<datalist>: Phần tử HTML Data List
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Phần tử <datalist> trong HTML chứa tập hợp các phần tử <option> đại diện cho các tùy chọn được phép hoặc được khuyến nghị để chọn trong các điều khiển khác.
Try it
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coconut"></option>
<option value="Mint"></option>
<option value="Strawberry"></option>
<option value="Vanilla"></option>
</datalist>
label {
display: block;
margin-bottom: 10px;
}
Để liên kết phần tử <datalist> với điều khiển, chúng tôi cung cấp cho nó một định danh duy nhất trong thuộc tính id, và sau đó thêm thuộc tính list vào phần tử <input> với cùng định danh làm giá trị.
Chỉ một số loại <input> nhất định hỗ trợ hành vi này, và nó cũng có thể thay đổi tùy theo trình duyệt.
Mỗi phần tử <option> nên có thuộc tính value, đại diện cho một gợi ý để nhập vào input. Nó cũng có thể có thuộc tính label, hoặc thiếu điều đó, một số nội dung văn bản, có thể được trình duyệt hiển thị thay vì value (Firefox), hoặc ngoài value (Chrome và Safari, như văn bản bổ sung). Nội dung chính xác của menu thả xuống phụ thuộc vào trình duyệt, nhưng khi nhấp, nội dung được nhập vào trường điều khiển sẽ luôn đến từ thuộc tính value.
Note:
<datalist> không phải là thay thế cho <select>. <datalist> không đại diện cho một input trong chính nó; đó là danh sách các giá trị được gợi ý cho điều khiển liên kết. Điều khiển vẫn có thể chấp nhận bất kỳ giá trị nào vượt qua xác thực, ngay cả khi nó không có trong danh sách gợi ý này.
Thuộc tính
Phần tử này không có thuộc tính nào khác ngoài các thuộc tính toàn cục, chung cho tất cả các phần tử.
Khả năng tiếp cận
Khi quyết định sử dụng phần tử <datalist>, đây là một số vấn đề khả năng tiếp cận cần lưu ý:
- Kích thước font của các tùy chọn danh sách dữ liệu không phóng to, luôn duy trì cùng kích thước. Nội dung của gợi ý tự động không tăng hoặc thu nhỏ khi phần còn lại của nội dung được phóng to hoặc thu nhỏ.
- Vì việc nhắm đến danh sách tùy chọn bằng CSS rất hạn chế hoặc không tồn tại, việc hiển thị không thể được tạo kiểu cho chế độ tương phản cao.
- Một số kết hợp screen reader/trình duyệt, bao gồm NVDA và Firefox, không thông báo nội dung của popup gợi ý tự động.
Ví dụ
Các loại văn bản
Các giá trị được khuyến nghị trong các loại text, search, url, tel, email và number, được hiển thị trong menu thả xuống khi người dùng nhấp hoặc nhấp đôi vào điều khiển. Thường thì phía bên phải của điều khiển cũng có mũi tên chỉ ra sự hiện diện của các giá trị được xác định trước.
<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
Các loại Ngày và Thời gian
Các loại month, week, date, time và datetime-local có thể hiển thị giao diện cho phép chọn ngày và thời gian thuận tiện. Các giá trị được xác định trước có thể được hiển thị ở đó, cho phép người dùng nhanh chóng điền giá trị điều khiển.
Note:
Khi các loại này không được hỗ trợ, loại text cơ bản sẽ được hiển thị thay thế, tạo ra trường văn bản. Trường đó sẽ nhận dạng đúng các giá trị được khuyến nghị và hiển thị chúng cho người dùng trong menu thả xuống.
<input type="time" list="popularHours" />
<datalist id="popularHours">
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
</datalist>
Loại Range
Khi các thuộc tính value được bao gồm trên các phần tử <option> được cung cấp cho datalist liên kết với loại input range, chúng sẽ được hiển thị như một loạt các dấu tick mà người dùng có thể dễ dàng chọn.
<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
<option value="0" label="0%"></option>
<option value="10" label="Minimum Tip"></option>
<option value="20" label="Standard"></option>
<option value="30" label="Generous"></option>
<option value="50" label="Very Generous"></option>
</datalist>
Note:
Thuộc tính label có mục đích cung cấp nhãn cho các dấu tick, như được định nghĩa trong HTML Standard. Tuy nhiên, hỗ trợ trình duyệt hiện tại khác nhau; nhãn có thể không hiển thị trực quan hoặc như chú giải công cụ.
Loại Color
Loại color có thể hiển thị các màu được xác định trước trong giao diện do trình duyệt cung cấp.
<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
<option value="#800000"></option>
<option value="#8B0000"></option>
<option value="#A52A2A"></option>
<option value="#DC143C"></option>
</datalist>
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung luồng, nội dung cụm từ. |
|---|---|
| Nội dung cho phép |
Hoặc là
nội dung cụm từ
hoặc không hoặc nhiều phần tử <option>.
|
| Bỏ qua thẻ | Không, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha cho phép | Bất kỳ phần tử nào chấp nhận nội dung cụm từ. |
| Vai trò ARIA ngầm định | listbox |
| Vai trò ARIA cho phép | Không có role nào được phép |
| Giao diện DOM | HTMLDataListElement |
Đặc tả
| Specification |
|---|
| HTML # the-datalist-element |