HTML list attribute

HTML list attribute associates input element to the source of suggested list of predefined options.

<p>Which is your favourite subject.</p>
<input list="data">
<datalist id="data">
 <option value="physics">Physics
 <option value="chemistry">Chemistry
 <option value="mathematics">Mathematics
 <option value="none">None
</datalist>
</>

Which is your favourite subject.

Here datalist contains the predefined options to aid the user in choosing the option.

Attribute values

All possible values of list attribute

The value of this attribute is simple text.

when the user selects one option then the value of that option becomes the value of input element.

<input type="email" list="emails">
<datalist id="emails">
 <option value="[email protected]">John
 <option value="[email protected]">Harry
 <option value="[email protected]">Chips
</datalist>
Try</>

If a browser does not support datalist element then the fallback content can be placed inside select element. The options can be placed inside the select element.

<input type="text" list="gender">
<datalist id="gender">
 ot select gender from the list:
<select name="sex">
 <option value=" ">
 <option>Male
 <option>Female
</select>
</datalist>
Try</>

Related Tags

The tags that support list attribute

Only <input> tag supports the list attribute.

Next Previous