Web4College

HTML list attribute

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

Example
Try it
<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.

Example
Try it
<input type="email" list="emails">
<datalist id="emails">
 <option value="johnexample@gmail.com">John
 <option value="harryexample@gmail.com">Harry
 <option value="chipsexample@gmail.com">Chips
</datalist>

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.

Example
Try it
<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>

Related Tags

The tags that support list attribute

Only <input> tag supports the list attribute.