<datalist>

<datalist> Tag

The <datalist> element holds a collection of <option> elements that represent valid or suggested choices for use with other input controls.

Syntax

<input list="options">
<datalist id="options">
  <option value="Option 1">
  <option value="Option 2">
  <option value="Option 3">
</datalist>

• To connect a <datalist> to an <input>, assign a unique ID to the <datalist> and set the input's list attribute to that ID. The behavior may differ depending on the input type and browser.
• Each <option> element should include a value attribute for the suggestion. It can also have a label attribute or text content, which may be displayed differently in various browsers but won't affect the submitted value.

Examples

• Text input types
• Date and time inputs
• Range inputs
• Color inputs
• Password inputs

Textual Types

For types like text, search, url, tel, email, and number, recommended values appear in a drop-down menu when the user interacts with the control, often with an arrow indicating predefined options.

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

Date and Time Types

The month, week, date, time, and datetime-local types provide user interfaces for selecting dates and times, featuring predefined values to assist users in quickly setting the control's value.

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

Range Type

The recommended values in the range type will be shown as a series of hash marks that the user can easily select.

<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"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

Color Type

The color type displays predefined colors using a browser-provided interface.

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

Password Type

The specification permits linking <datalist> with a password type, but no browsers support this due to security concerns.

<label for="pwd">Enter a password:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[_3DnkgSu@!q#"></option>
</datalist>

Conclusion

The <datalist> tag in HTML is used to define a list of predefined options for an <input> element, enhancing user experience by offering suggestions for the user to select from. It works by associating the <datalist> with an input field through the list attribute. The <option> elements within the <datalist> provide the possible choices. This feature is helpful for various input types, such as text, range, color, and date/time, allowing users to quickly select values from a dropdown. Although it is not supported with the password input due to security concerns, it is widely applicable for other form controls.