HTML Tutorial

HTML Tag: <datalist>

Usage:

  • The <datalist> tag provides a pre-defined list of options for input fields.
  • When a user starts typing in the input field, a dropdown list of suggestions appears, making it easier to select valid values.

Attributes:

  • id: Unique identifier for the <datalist> element.
  • label: Label or title for the dropdown list.

Examples:

<!-- Pre-defined options for a country input field -->
<datalist id="countries">
  <option value="United States">
  <option value="Canada">
  <option value="Mexico">
</datalist>

<!-- Input field that uses the pre-defined options -->
<input list="countries">

Exploring the <datalist> tag:

  1. Create a <datalist> element with an id and optional label.
  2. Add <option> elements within the <datalist> to define the available options.
  3. Associate the <datalist> with an input field using the list attribute.
  4. When the user starts typing in the input field, the dropdown list will appear with the pre-defined options.

Tips for Accessibility:

  • Use the label attribute to provide a clear and concise description of the dropdown list.
  • Ensure the <datalist> options are relevant and accessible to users with disabilities.
  • Consider using keyboard navigation to improve accessibility for users who cannot use a mouse.