Concept

Tag <datalist> is a new HTML tag introduced in HTML5. It is used to create a list of options for an input field.

How to use

Syntax

<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>

Where:

• list is an attribute of an input field, it must have a value of the ID of the <datalist> list.
• <datalist> is a tag that contains a list of options.
• <option> is a tag that contains an option in a list.

Example

<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>

Result

In the example, when the user enters the input field, they will receive suggestions from the fruit list.