Khái niệm

Tag <datalist> là một tag HTML mới được giới thiệu trong phiên bản HTML5. Nó được sử dụng để tạo ra một danh sách các tùy chọn cho một trường nhập liệu.

Cách sử dụng

Cú pháp

<input list="ten-danh-sach">
<datalist id="ten-danh-sach">
  <option value="tuy-chon-1">
  <option value="tuy-chon-2">
  <option value="tuy-chon-3">
  <!--Thêm các tùy chọn khác nếu cần-->
</datalist>

Trong đó:

• list là thuộc tính của trường nhập liệu, nó phải có giá trị là ID của danh sách <datalist>.
• <datalist> là thẻ chứa danh sách các tùy chọn.
• <option> là thẻ chứa một tùy chọn trong danh sách.

Ví dụ

<label for="fruit">Chọn một loại trái cây:</label>
<input list="fruit" id="fruit-input">
<datalist id="fruit">
  <option value="Táo">
  <option value="Cam">
  <option value="Chuối">
  <option value="Dứa">
  <option value="Dưa hấu">
</datalist>

Kết quả

Trong ví dụ, khi người dùng nhập vào trường nhập liệu, họ sẽ nhận được các gợi ý từ danh sách trái cây.