Các loại đầu vào HTML
Chương này mô tả các kiểu khác nhau cho <input>phần tử HTML.
Các loại đầu vào HTML
Dưới đây là các kiểu đầ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 typethuộc tính là "văn bản".
Nhập văn bản
<input type="text">xác định
trường nhập văn bản một dòng :
Thí 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>
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Họ:Họ:
Nhập mật khẩu
<input type="password">xác định một trường mật khẩu :
Thí 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>
Đâ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 (được 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 một nút để
gửi dữ liệu biểu mẫu đến 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 của biểu mẫu action
:
Thí 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>
Đâ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:
Thí 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>
Đặ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ị biểu mẫu về giá trị mặc định của chúng:
Thí 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">
</form>
Đâ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ề các giá trị mặc định.
Loại đầu vào Radio
<input type="radio">xác định một nút radio .
Các 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:
Thí 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>
Đâ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 một hộp kiểm .
Hộp kiểm cho phép người dùng chọn 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.
Thí 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>
Đâ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">xác định một nút :
Thí dụ
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Loại đầu vào Màu sắc
Được sử dụng cho các trường đầu <input type="color">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 liệu.
Thí dụ
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Loại đầu vào Ngày
Được sử dụng cho các trường đầu <input type="date">vào phải chứa ngày tháng.
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 liệu.
Thí dụ
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
Bạn cũng có thể sử dụng các thuộc tính minvà maxđể thêm các hạn chế cho ngày tháng:
Thí 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>
Loại đầu vào Ngày giờ-cục bộ
Trường <input type="datetime-local">chỉ định 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 liệu.
Thí dụ
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Loại đầu vào Email
Được sử dụng cho các trường <input type="email">nhập phải chứa địa chỉ e-mail.
Tùy thuộc vào sự hỗ trợ của trình duyệt, địa chỉ e-mail có thể được tự động xác nhận khi được gửi.
Một số điện thoại thông minh nhận dạng được loại email và thêm ".com" vào bàn phím để khớp với kiểu nhập email.
Thí dụ
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Tệp loại đầu vào
Trường <input type="file">
xác định trường chọn tệp và nút "Duyệt qua" để tải tệp lên.
Thí dụ
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Loại đầu vào bị ẩn
Định <input type="hidden">
nghĩa một trường nhập ẩn (không hiển thị cho người dùng).
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ó được hiển thị (và có thể được 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!
Thí 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>
Loại đầu vào Tháng
Cho <input type="month">phép người dùng chọn một 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 liệu.
Thí dụ
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Số loại đầu vào
Định <input type="number">nghĩa một trường nhập
số .
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| 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 |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<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>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |