Thuộc tính loại HTML <input>
Thí dụ
Một biểu mẫu HTML với hai trường đầu vào; một trường văn bản và một nút gửi:
<form action="/action_page.php">
<label for="username">Username: </label>
<input type="text"
id="username" name="username"><br>
<input type="submit" value="Submit">
</form>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc typetính chỉ định loại
<input>phần tử để hiển thị.
Nếu typethuộc tính không được chỉ định, loại mặc định là "văn bản".
Hỗ trợ trình duyệt
| Attribute | |||||
|---|---|---|---|---|---|
| type | Yes | Yes | Yes | Yes | Yes |
Cú pháp
<input type="value">
Giá trị thuộc tính
| Value | Description |
|---|---|
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| color | Defines a color picker |
| date | Defines a date control (year, month, day (no time)) |
| datetime-local | Defines a date and time control (year, month, day, time (no timezone) |
| Defines a field for an e-mail address | |
| file | Defines a file-select field and a "Browse" button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| month | Defines a month and year control (no timezone) |
| number | Defines a field for entering a number |
| password | Defines a password field |
| radio | Defines a radio button |
| range | Defines a range control (like a slider control) |
| reset | Defines a reset button |
| search | Defines a text field for entering a search string |
| submit | Defines a submit button |
| tel | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field |
| time | Defines a control for entering a time (no timezone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no timezone) |
Các ví dụ khác
Loại đầu vào: nút
Một nút nhấn kích hoạt JavaScript khi nó được nhấp vào:
<input type="button" value="Click me" onclick="msg()">
Loại đầu vào: hộp kiểm
Hộp kiểm cho phép người dùng chọn một hoặc nhiều tùy chọn trong số các lựa chọn giới hạn:
<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><br>
Loại đầu vào: màu sắc
Chọn một màu từ bộ chọn màu:
<label for="favcolor">Select your favorite color:</label>
<input type="color"
id="favcolor" name="favcolor">
Loại đầu vào: ngày tháng
Xác định kiểm soát ngày tháng:
<label for="birthday">Birthday:</label>
<input type="date"
id="birthday" name="birthday">
Loại đầu vào: datetime-local
Xác định kiểm soát ngày và giờ (không có múi giờ):
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local"
id="birthdaytime" name="birthdaytime">
Loại đầu vào: email
Xác định trường cho địa chỉ e-mail (sẽ tự động được xác thực khi được gửi):
<label for="email">Enter your email:</label>
<input type="email"
id="email" name="email">
Loại đầu vào: tệp
Xác định trường chọn tệp và nút "Duyệt qua ..." (để tải lên tệp):
<label for="myfile">Select a file:</label>
<input type="file"
id="myfile" name="myfile">
Loại đầu vào: ẩn
Xác định một trường ẩn (không hiển thị cho người dùng).
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:
<input type="hidden" id="custId" name="custId" value="3487">
Loại đầu vào: hình ảnh
Xác định hình ảnh làm nút gửi:
<input type="image" src="img_submit.gif" alt="Submit">
Loại đầu vào: tháng
Xác định kiểm soát tháng và năm (không có múi giờ):
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month"
id="bdaymonth" name="bdaymonth">
Loại đầu vào: số
Xác định trường để nhập số (Bạn cũng có thể đặt giới hạn về những số được chấp nhận):
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number"
id="quantity" name="quantity" min="1" max="5">
Sử dụng các thuộc tính sau để chỉ định các hạn chế:
- max - chỉ định giá trị lớn nhất được phép
- min - chỉ định giá trị tối thiểu được phép
- bước - chỉ định khoảng số hợp pháp
- giá trị - Chỉ định giá trị mặc định
Loại đầu vào: mật khẩu
Xác định trường mật khẩu (các ký tự được che dấu):
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
Loại đầu vào: 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:
<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>
Loại đầu vào: phạm vi
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à 0 đến 100. Tuy nhiên, bạn có thể đặt hạn chế về những con số nào được chấp nhận với các thuộc tính min, max và step:
<label for="vol">Volume (between 0 and 50):</label>
<input type="range"
id="vol" name="vol" min="0" max="50">
Sử dụng các thuộc tính sau để chỉ định các hạn chế:
- max - chỉ định giá trị lớn nhất được phép
- min - chỉ định giá trị tối thiểu được phép
- bước - chỉ định khoảng số hợp pháp
- giá trị - Chỉ định giá trị mặc định
Loại đầu vào: đặt lại
Xác định nút đặt lại (đặt lại tất cả các giá trị biểu mẫu thành giá trị mặc định):
<input type="reset">
Mẹo: Sử dụng nút đặt lại cẩn thận! Nó có thể gây khó chịu cho người dùng nếu vô tình kích hoạt nút đặt lại.
Loại đầu vào: tìm kiếm
Xác định trường tìm kiếm (như tìm kiếm trang web hoặc tìm kiếm trên Google):
<label for="gsearch">Search Google:</label>
<input type="search"
id="gsearch" name="gsearch">
Loại đầu vào: gửi
Xác định nút gửi:
<input type="submit">
Loại đầu vào: tel
Xác định trường để nhập số điện thoại:
<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}">
Kiểu đầu vào: văn bản
Xác định hai trường văn bản một dòng mà người dùng có thể nhập văn bản vào:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text"
id="lname" name="lname"><br>
Loại đầu vào: thời gian
Xác định điều khiển để nhập thời gian (không có múi giờ):
<label for="appt">Select a time:</label>
<input type="time"
id="appt" name="appt">
Loại đầu vào: url
Xác định trường để nhập URL:
<label for="homepage">Add your homepage:</label>
<input type="url"
id="homepage" name="homepage">
Mẹo: Safari trên iPhone nhận dạng kiểu nhập url và thay đổi bàn phím ảo để khớp với kiểu đó (thêm tùy chọn .com).
Loại đầu vào: tuần
Xác định kiểm soát tuần và năm (không có múi giờ):
<label for="week">Select a week:</label>
<input type="week"
id="week" name="week">
❮ Thẻ HTML <input>