HTML - list Attribute

HTML list attribute is used with the <input> element to specify a list of predefined options that the user can select from.

The datalist element provides a list of predefined values to suggest to the user for this input.

How It Works

When the user starts typing in the input field, a dropdown list will appear with the options defined in the <datalist>.
The user can select an option from this list, which will populate the input field with the selected value.
This is particularly useful for providing suggestions or a list of predefined values that the user can choose from, enhancing the user experience.

Syntax

<tag list = "value" />

Where value should be the id value of the datalist element.

Applies On

Below listed elements allow using of the HTML list attribute

Element	Description
<input>	HTML <input> tag is used to accept various types of input from user.

Examples of HTML list Attribute

Below examples will illustrate the HTML list attribute, where and how we should use this attribute!

Text input with predefined values in datalist

In the following example, we are using the ‘list’ attribute with the input type=text and mention value of list attribute as id name of datalist.

<!DOCTYPE html>
<html lang="en">

<body>
   <p>
      Click on input field and select 
      from dropdown: 
   </p>
   <input type="text" list="fruits">
   <datalist id='fruits'>
      <option value="Apple"></option>
      <option value="Banana"></option>
      <option value="Orange"></option>
      <option value="Grapes"></option>
      <option value="Pears"></option>
   </datalist>
</body>

</html>

List attribute for number input

Considering the another scenario, where we are going to use the list attribute with the input type=number. The user will have option to choose number from dropdown or type number in field.

<!DOCTYPE html>
<html lang="en">

<body>
   <!--Example of the HTML list attribute -->
   <p>
      Click on input field and 
      select from dropdown: 
   </p>
   <input type="number" 
          list="numbers" 
          placeholder="Select number..">

   <datalist id='numbers'>
      <option value="10"></option>
      <option value="20"></option>
      <option value="30"></option>
      <option value="40"></option>
      <option value="50"></option>
   </datalist>

</body>
</html>

List attribute for time input

Let's look into the following example, where we are going to use the list attribute with the input type=time. User can choose time from dropdown list or type the time of his need.

<!DOCTYPE html>
<html lang="en">

<body>
   <p>
      Click on input field and 
      select from dropdown: 
   </p>
   <input type="time" 
          list="hours" 
          placeholder="Select time..">
   <datalist id='hours'>
      <option value="12:00"></option>
      <option value="13:00"></option>
      <option value="14:00"></option>
      <option value="15:00"></option>
   </datalist>
</body>

</html>

Supported Browsers

Attribute
list	Yes 20.0	Yes 10.0	Yes 4.0	No	Yes 9.6

html_attributes_reference.htm

Print Page