Các kiểu nhập HTML
Chương này mô tả các loại khác nhau của phần tử HTML <input> .
Các kiểu nhập HTML
Dưới đây là các loại đầu vào khác nhau mà bạn có thể sử dụng trong HTML:
-
<input type="button"> -
<input type="checkbox"> -
<input type="color"> -
<input type="date"> -
<input type="datetime-local"> -
<input type="email"> -
<input type="file"> -
<input type="hidden"> -
<input type="image"> -
<input type="month"> -
<input type="number"> -
<input type="password"> -
<input type="radio"> -
<input type="range"> -
<input type="reset"> -
<input type="search"> -
<input type="submit"> -
<input type="tel"> -
<input type="text"> -
<input type="time"> -
<input type="url"> -
<input type="week">
Mẹo: Giá trị mặc định của thuộc tính type là "văn bản".
Loại văn bản đầu vào
<input type="text"> xác định trường nhập văn bản một dòng :
Ví dụ
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Hãy tự mình thử »Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Tên đầu tiên:Họ:
Mật khẩu loại đầu vào
<input type="password"> xác định trường mật khẩu :
Ví dụ
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Hãy tự mình thử »Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Tên tài khoản:Mật khẩu:
Các ký tự trong trường mật khẩu được che đi (hiển thị dưới dạng dấu hoa thị hoặc vòng tròn).
Loại đầu vào Gửi
<input type="submit"> xác định nút để gửi dữ liệu biểu mẫu tới trình xử lý biểu mẫu .
Trình xử lý biểu mẫu thường là một trang máy chủ có tập lệnh để xử lý dữ liệu đầu vào.
Trình xử lý biểu mẫu được chỉ định trong thuộc tính action của biểu mẫu:
Ví dụ
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Hãy tự mình thử »Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Nếu bạn bỏ qua thuộc tính giá trị của nút gửi, nút sẽ nhận được văn bản mặc định:
Ví dụ
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Hãy tự mình thử »Đặt lại loại đầu vào
<input type="reset"> xác định nút đặt lại sẽ đặt lại tất cả các giá trị của biểu mẫu về giá trị mặc định của chúng:
Ví dụ
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset"
value="Reset">
</form>
Hãy tự mình thử »Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Nếu bạn thay đổi các giá trị đầu vào và sau đó nhấp vào nút "Đặt lại", dữ liệu biểu mẫu sẽ được đặt lại về giá trị mặc định.
Loại đầu vào Đài phát thanh
<input type="radio"> xác định nút radio .
Nút radio cho phép người dùng CHỈ chọn MỘT trong số các lựa chọn giới hạn:
Ví dụ
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Hãy tự mình thử »Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Hộp kiểm loại đầu vào
<input type="checkbox"> xác định hộp kiểm .
Các hộp kiểm cho phép người dùng chọn các tùy chọn KHÔNG hoặc NHIỀU tùy chọn trong một số lựa chọn giới hạn.
Ví dụ
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Hãy tự mình thử »Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Nút loại đầu vào
<input type="button"> định nghĩa một nút :
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Màu loại đầu vào
<input type="color"> được sử dụng cho các trường đầu vào phải chứa màu.
Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn màu có thể hiển thị trong trường nhập.
Ví dụ
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form> Hãy tự mình thử »Loại đầu vào Ngày
<input type="date"> được sử dụng cho các trường đầu vào cần chứa ngày.
Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập.
Ví dụ
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form> Hãy tự mình thử » Bạn cũng có thể sử dụng thuộc tính min và max để thêm các hạn chế cho ngày:
Ví dụ
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form> Hãy tự mình thử »Loại đầu vào Ngày giờ-cục bộ
<input type="datetime-local"> chỉ định trường nhập ngày và giờ, không có múi giờ.
Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập.
Ví dụ
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form> Hãy tự mình thử »Loại đầu vào Email
<input type="email"> được sử dụng cho các trường nhập phải chứa địa chỉ email.
Tùy thuộc vào sự hỗ trợ của trình duyệt, địa chỉ e-mail có thể được xác thực tự động khi gửi.
Một số điện thoại thông minh nhận dạng loại email và thêm ".com" vào bàn phím để khớp với thông tin nhập vào email.
Ví dụ
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form> Hãy tự mình thử »Hình ảnh loại đầu vào
<input type="image"> xác định hình ảnh là nút gửi.
Đường dẫn tới hình ảnh được chỉ định trong thuộc tính src .
Ví dụ
<form>
<input type="image" src="img_submit.gif" alt="Submit"
width="48" height="48">
</form> Hãy tự mình thử »Tệp loại đầu vào
<input type="file"> xác định trường chọn tệp và nút "Duyệt" để tải tệp lên.
Ví dụ
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form> Hãy tự mình thử »Loại đầu vào Ẩn
<input type="hidden"> xác định trường nhập ẩn (người dùng không hiển thị).
Trường ẩn cho phép các nhà phát triển web bao gồm dữ liệu mà người dùng không thể nhìn thấy hoặc sửa đổi khi gửi biểu mẫu.
Trường ẩn thường lưu trữ bản ghi cơ sở dữ liệu nào cần được cập nhật khi biểu mẫu được gửi.
Lưu ý: Mặc dù giá trị không được hiển thị cho người dùng trong nội dung của trang nhưng nó vẫn hiển thị (và có thể chỉnh sửa) bằng cách sử dụng bất kỳ công cụ dành cho nhà phát triển nào của trình duyệt hoặc chức năng "Xem nguồn". Không sử dụng đầu vào ẩn như một hình thức bảo mật!
Ví dụ
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form> Hãy tự mình thử »Loại đầu vào Tháng
<input type="month"> cho phép người dùng chọn tháng và năm.
Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập.
Ví dụ
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form> Hãy tự mình thử »Số loại đầu vào
<input type="number"> xác định trường nhập số .
Bạn cũng có thể đặt giới hạn về số lượng được chấp nhận.
Ví dụ sau hiển thị trường nhập số, trong đó bạn có thể nhập giá trị từ 1 đến 5:
Ví dụ
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form> Hãy tự mình thử »Hạn chế đầu vào
Dưới đây là danh sách một số hạn chế đầu vào phổ biến:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
Bạn sẽ tìm hiểu thêm về các hạn chế đầu vào trong chương tiếp theo.
Ví dụ sau hiển thị trường nhập số, trong đó bạn có thể nhập giá trị từ 0 đến 100, theo các bước 10. Giá trị mặc định là 30:
Ví dụ
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form> Hãy tự mình thử »Phạm vi loại đầu vào
<input type="range"> xác định điều khiển để nhập một số có giá trị chính xác không quan trọng (như điều khiển thanh trượt). Phạm vi mặc định là từ 0 đến 100. Tuy nhiên, bạn có thể đặt giới hạn về số nào được chấp nhận với các thuộc tính min , max và step :
Ví dụ
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form> Hãy tự mình thử »Tìm kiếm loại đầu vào
<input type="search"> được sử dụng cho các trường tìm kiếm (trường tìm kiếm hoạt động giống như trường văn bản thông thường).
Ví dụ
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form> Hãy tự mình thử »Loại đầu vào ĐT
<input type="tel"> được sử dụng cho các trường đầu vào phải chứa số điện thoại.
Ví dụ
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form> Hãy tự mình thử »Loại đầu vào Thời gian
<input type="time"> cho phép người dùng chọn thời gian (không có múi giờ).
Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn thời gian có thể hiển thị trong trường nhập.
Ví dụ
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form> Hãy tự mình thử »Url loại đầu vào
<input type="url"> được sử dụng cho các trường đầu vào phải chứa địa chỉ URL.
Tùy thuộc vào sự hỗ trợ của trình duyệt, trường url có thể được xác thực tự động khi gửi.
Một số điện thoại thông minh nhận dạng loại url và thêm ".com" vào bàn phím để khớp với dữ liệu nhập url.
Ví dụ
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form> Hãy tự mình thử »Loại đầu vào Tuần
<input type="week"> cho phép người dùng chọn tuần và năm.
Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập.
Ví dụ
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form> Hãy tự mình thử »Bài tập HTML
Thuộc tính loại đầu vào HTML
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |
