Using a Data List for text input element
Description
The list attribute allows you to specify the id value of a datalist element, which will be used to suggest users for possible value.
For the text type, the values are presented as autocomplete suggestions.
You specify the values you want to give to the user through the option element.
datalist can have option element.
option element can have local attributes:disabled, selected, label, value.
Example
The following code shows the datalist and option elements used
to create a set of values for a text box.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name: <input placeholder="Your name"
id="name" name="name" />
</label>
</p><!-- w w w. j a v a 2 s . c om-->
<p>
<label for="city"> City: <input placeholder="Where you live"
id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit: <input list="fruitlist" id="fave"
name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
<datalist id="fruitlist">
<option value="A" label="First" />
<option value="B">Second</option>
<option value="C"/>
</datalist>
</body>
</html>
Each option element contained inside of the datalist
represents a value that you want to propose to the user.
The value attribute specifies the data value that will be used in the input element if that option is selected.
You can use a different label to describe the option
by using the label attribute
or by defining content within the option element.