Thuộc tính đầu vào HTML
Chương này mô tả các thuộc tính khác nhau cho <input>phần tử HTML.
Thuộc tính giá trị
Thuộc tính đầu vào valuechỉ định giá trị ban đầu cho trường đầu vào:
Thí dụ
Các trường nhập 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>
Thuộc tính chỉ đọc
Thuộc tính đầu vào readonlychỉ định rằng một trường đầu vào là chỉ đọc.
Không thể sửa đổi trường đầu vào chỉ đọc (tuy nhiên, người dùng có thể gắn thẻ, đánh dấu và sao chép văn bản từ trường đó).
Giá trị của trường đầu vào chỉ đọc sẽ được gửi khi gửi biểu mẫu!
Thí 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>
Thuộc tính bị vô hiệu hóa
Thuộc tính đầu vào disabledchỉ định rằng một trường đầu vào nên bị vô hiệu hóa.
Trường đầu vào bị vô hiệu hóa không thể sử dụng được và không thể nhấp được.
Giá trị của trường đầu vào bị vô hiệu hóa sẽ không được gửi khi gửi biểu mẫu!
Thí dụ
Một trường đầu vào 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>
Thuộc tính kích thước
Thuộc tính đầu vào sizechỉ đị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 sizelà 20.
Lưu ý: Thuộc sizetính hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, điện thoại, url, email và mật khẩu.
Thí 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>
Thuộc tính maxlength
Thuộc tính đầu vào maxlengthchỉ định số ký tự tối đa được phép trong một trường đầu vào.
Lưu ý: Khi a maxlengthđược đặt, trường nhập sẽ không chấp nhận nhiều hơn số ký tự được 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 bạn muốn cảnh báo người dùng, bạn phải viết mã JavaScript.
Thí 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>
Thuộc tính tối thiểu và tối đa
Đầu vào minvà maxcác thuộc tính chỉ định các giá trị tối thiểu và tối đa cho một trường đầu vào.
Thuộc tính minvà maxhoạt động với các loại đầu vào sau: số, phạm vi, ngày, ngày giờ-cục bộ, tháng, giờ và tuần.
Mẹo: Sử dụng các thuộc tính max và min cùng nhau để tạo ra một loạt các giá trị pháp lý.
Thí dụ
Đặt ngày tối đa, ngày tối thiểu và phạm vi 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>
Nhiều thuộc tính
Thuộc tính đầu vào multiplechỉ định rằng người dùng được phép nhập nhiều giá trị vào một trường đầu vào.
Thuộc multipletính hoạt động với các loại đầu vào sau: email và tệp.
Thí dụ
Trường tải lên tệp chấp nhận nhiều giá trị:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
Thuộc tính mẫu
Thuộc tính đầu vào patternchỉ đị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 patterntính 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 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.
Thí dụ
Trường đầu vào 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>
Thuộc tính trình giữ chỗ
Thuộc tính đầu vào placeholderchỉ đị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 về định dạng mong đợi).
Gợi ý ngắn được hiển thị trong trường nhập liệu trước khi người dùng nhập giá trị.
Thuộc placeholdertính hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, url, điện thoại, email và mật khẩu.
Thí dụ
Trường đầu vào 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>
Thuộc tính bắt buộc
Thuộc tính đầu vào requiredchỉ định rằng một trường đầu vào phải được điền trước khi gửi biểu mẫu.
Thuộc requiredtính hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, url, điện thoại, email, mật khẩu, bộ chọn ngày, số, hộp kiểm, radio và tệp.
Thí dụ
Một trường đầu vào bắt buộc:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
Thuộc tính bước
Thuộc tính đầu vào stepchỉ định khoảng số hợp pháp cho một trường đầu vào.
Ví dụ: nếu bước = "3", các số hợp pháp có thể là -3, 0, 3, 6, v.v.
Mẹo: Bạn có thể sử dụng thuộc tính này cùng với các thuộc tính max và min để tạo ra một loạt các giá trị pháp lý.
Thuộc steptính hoạt động với các loại đầu vào sau: số, phạm vi, ngày, ngày giờ-cục bộ, tháng, giờ và tuần.
Thí dụ
Trường đầu vào có khoảng số hợp pháp được chỉ định:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Lưu ý: Các hạn chế đầu vào không phải là 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 kiểm tra bởi người nhận (máy chủ)!
Thuộc tính lấy nét tự động
Thuộc tính đầu vào autofocuschỉ định rằng trường nhập sẽ tự động lấy tiêu điểm khi tải trang.
Thí dụ
Để trường nhập "Tên" tự động lấy tiêu điểm khi trang tải:
<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>
Thuộc tính chiều cao và chiều rộng
Đầu vào heightvà widthcác thuộc tính chỉ định chiều cao và chiều rộng của một <input
type="image">phần tử.
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, không gian 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 không biết kích thước của hình ảnh và không thể dành không gian thích hợp cho nó. Hiệu quả sẽ là bố cục trang sẽ thay đổi trong quá trình tải (trong khi tải hình ảnh).
Thí dụ
Xác định hình ảnh làm nút gửi, với các 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>
Thuộc tính danh sách
Thuộc tính đầu vào listđề cập đến một <datalist>phần tử có chứa các tùy chọn được xác định trước cho phần tử <input>.
Thí dụ
Phần tử <input> với các giá trị được xác định trước trong <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Thuộc tính tự động hoàn thành
Thuộc tính đầu vào autocompletechỉ định xem biểu mẫu hoặc trường nhập liệu có nên bật hoặc tắt tính năng tự động hoàn thành hay không.
Tự động điền 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 autocompletetính hoạt động với <form>và các <input>loại sau: văn bản, tìm kiếm, url, điện thoại, email, mật khẩu, bộ chọn ngày, phạm vi và màu sắc.
Thí dụ
Biểu mẫu HTML có bật và tắt tính năng tự động điền cho một trường đầu vào:
<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>
Mẹo: Trong một số trình duyệt, bạn có thể cần phải 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
Các phần tử đầu vào và biểu mẫu HTML
| 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 .