Thuộc tính đầu vào HTML
Chương này mô tả các thuộc tính khác nhau cho phần tử HTML <input> .
Thuộc tính giá trị
Thuộc tính value đầu vào chỉ định giá trị ban đầu cho trường đầu vào:
Ví dụ
Các trường đầu vào có giá trị ban đầu (mặc định):
<form>
<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">
</form>
Hãy tự mình thử »Thuộc tính chỉ đọc
Thuộc tính readonly đầu vào xác định rằng trường đầu vào là chỉ đọc.
Không thể sửa đổi trường nhập chỉ đọc (tuy nhiên, người dùng có thể tab vào trường đó, đánh dấu và sao chép văn bản từ trường đó).
Giá trị của trường nhập chỉ đọc sẽ được gửi khi gửi biểu mẫu!
Ví dụ
Trường đầu vào chỉ đọc:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Hãy tự mình thử »Thuộc tính bị vô hiệu hóa
Thuộc tính disabled đầu vào chỉ định rằng trường đầu vào sẽ bị vô hiệu hóa.
Trường nhập bị vô hiệu hóa sẽ không sử dụng được và không thể nhấp vào được.
Giá trị của trường nhập bị tắt sẽ không được gửi khi gửi biểu mẫu!
Ví dụ
Trường nhập bị vô hiệu hóa:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Hãy tự mình thử » Thuộc tính kích thước
Thuộc tính size đầu vào chỉ định chiều rộng hiển thị, tính bằng ký tự, của trường đầu vào.
Giá trị mặc định cho size là 20.
Lưu ý: Thuộc tính size hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, số điện thoại, url, email và mật khẩu.
Ví dụ
Đặt chiều rộng cho trường đầu vào:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form> Hãy tự mình thử »Thuộc tính maxlength
Thuộc tính maxlength đầu vào chỉ định số lượng ký tự tối đa được phép trong trường đầu vào.
Lưu ý: Khi đặt maxlength , trường đầu vào sẽ không chấp nhận nhiều hơn số ký tự đã chỉ định. Tuy nhiên, thuộc tính này không cung cấp bất kỳ phản hồi nào. Vì vậy, nếu muốn cảnh báo người dùng, bạn phải viết mã JavaScript.
Ví dụ
Đặt độ dài tối đa cho trường đầu vào:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form> Hãy tự mình thử »Thuộc tính tối thiểu và tối đa
Thuộc tính đầu vào min và max chỉ định giá trị tối thiểu và tối đa cho trường đầu vào.
Thuộc tính min và max hoạt động với các loại đầu vào sau: số, phạm vi, ngày, giờ địa phương, tháng, thời gian và tuần.
Mẹo: Sử dụng các thuộc tính tối đa và tối thiểu cùng nhau để tạo ra một loạt các giá trị pháp lý.
Ví dụ
Đặt ngày tối đa, ngày tối thiểu và một loạt các giá trị pháp lý:
<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"><br><br>
<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ử »Nhiều thuộc tính
Thuộc tính multiple đầu vào chỉ định rằng người dùng được phép nhập nhiều giá trị vào trường đầu vào.
Thuộc tính multiple hoạt động với các loại đầu vào sau: email và tệp.
Ví dụ
Trường tải tệp lên chấp nhận nhiều giá trị:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form> Hãy tự mình thử »Thuộc tính mẫu
Thuộc tính pattern đầu vào chỉ định một biểu thức chính quy mà giá trị của trường đầu vào được kiểm tra khi biểu mẫu được gửi.
Thuộc tính pattern hoạt động với các loại đầu vào sau: văn bản, ngày tháng, tìm kiếm, url, số điện thoại, email và mật khẩu.
Mẹo: Sử dụng thuộc tính tiêu đề chung để mô tả mẫu nhằm trợ giúp người dùng.
Mẹo: Tìm hiểu thêm về biểu thức chính quy trong hướng dẫn JavaScript của chúng tôi.
Ví dụ
Trường nhập chỉ có thể chứa ba chữ cái (không có số hoặc ký tự đặc biệt):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>Hãy tự mình thử »Thuộc tính giữ chỗ
Thuộc placeholder đầu vào chỉ định một gợi ý ngắn mô tả giá trị mong đợi của trường đầu vào (giá trị mẫu hoặc mô tả ngắn gọn về định dạng dự kiến).
Gợi ý ngắn được hiển thị trong trường nhập trước khi người dùng nhập giá trị.
Thuộc tính placeholder hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, url, số, điện thoại, email và mật khẩu.
Ví dụ
Trường nhập có văn bản giữ chỗ:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form> Hãy tự mình thử »Thuộc tính bắt buộc
Thuộc tính required đầu vào chỉ định rằng trường đầu vào phải được điền trước khi gửi biểu mẫu.
Thuộc tính required hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, url, số điện thoại, email, mật khẩu, bộ chọn ngày, số, hộp kiểm, radio và tệp.
Ví dụ
Trường đầu vào bắt buộc:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form> Hãy tự mình thử »Thuộc tính bước
Thuộc tính step vào chỉ định các khoảng số hợp lệ cho trường đầu vào.
Ví dụ: nếu step="3", các số hợp pháp có thể là -3, 0, 3, 6, v.v.
Mẹo: Thuộc tính này có thể được sử dụng cùng với thuộc tính max và min để tạo ra một loạt các giá trị pháp lý.
Thuộc tính step hoạt động với các loại đầu vào sau: số, phạm vi, ngày, ngày giờ địa phương, tháng, thời gian và tuần.
Ví dụ
Trường đầu vào có khoảng số hợp lệ được chỉ định:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form> Hãy tự mình thử »Lưu ý: Hạn chế đầu vào không phải là điều dễ hiểu và JavaScript cung cấp nhiều cách để thêm đầu vào bất hợp pháp. Để hạn chế đầu vào một cách an toàn, nó cũng phải được người nhận (máy chủ) kiểm tra!
Thuộc tính tự động lấy nét
Thuộc autofocus vào chỉ định rằng trường đầu vào sẽ tự động lấy tiêu điểm khi tải trang.
Ví dụ
Để trường nhập "Tên" tự động lấy tiêu điểm khi tải trang:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form> Hãy tự mình thử »Thuộc tính chiều cao và chiều rộng
Thuộc tính height và width đầu vào chỉ định chiều cao và chiều rộng của phần tử <input type="image"> .
Mẹo: Luôn chỉ định cả thuộc tính chiều cao và chiều rộng cho hình ảnh. Nếu chiều cao và chiều rộng được đặt, khoảng trống cần thiết cho hình ảnh sẽ được dành riêng khi trang được tải. Nếu không có các thuộc tính này, trình duyệt sẽ không biết kích thước của hình ảnh và không thể dành khoảng trống thích hợp cho hình ảnh đó. Hiệu ứng sẽ là bố cục trang sẽ thay đổi trong quá trình tải (trong khi tải hình ảnh).
Ví dụ
Xác định hình ảnh làm nút gửi, với thuộc tính chiều cao và chiều rộng:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form> Hãy tự mình thử »Thuộc tính danh sách
Thuộc tính list đầu vào đề cập đến phần tử <datalist> chứa các tùy chọn được xác định trước cho phần tử <input>.
Ví dụ
Phần tử <input> có các giá trị được xác định trước trong <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> Hãy tự mình thử »Thuộc tính tự động hoàn thành
Thuộc tính autocomplete đầu vào chỉ định xem một biểu mẫu hoặc trường đầu vào có nên bật hay tắt tính năng tự động hoàn thành hay không.
Tự động hoàn thành cho phép trình duyệt dự đoán giá trị. Khi người dùng bắt đầu nhập vào một trường, trình duyệt sẽ hiển thị các tùy chọn để điền vào trường đó, dựa trên các giá trị đã nhập trước đó.
Thuộc tính autocomplete hoạt động với <form> và các loại <input> sau: văn bản, tìm kiếm, url, số điện thoại, email, mật khẩu, bộ chọn ngày, phạm vi và màu sắc.
Ví dụ
Biểu mẫu HTML có bật và tắt tính năng tự động hoàn tất cho một trường nhập:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Hãy tự mình thử »Mẹo: Trong một số trình duyệt, bạn có thể cần kích hoạt chức năng tự động hoàn thành để tính năng này hoạt động (Xem trong phần "Tùy chọn" trong menu của trình duyệt).
Bài tập HTML
Biểu mẫu HTML và các phần tử đầu vào
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.
