Page 81 - TP_Play_V2.2_Class8
P. 81
Adding DataList
If you want to provide input suggestions while also allowing the user to submit input directly, implement
the <datalist> element.
The <datalist> element allows the user to add the input as he wishes, whereas the user has the option
to select one input from the provided list when using the <select> element.
To add the data list in the form, follow the syntax as given below:
<INPUT LIST="list type" NAME="name of the list">
<DATALIST ID="Id of list">
<OPTION VALUE="Option1">
<OPTION VALUE="Option2">
<OPTION VALUE="Option3">
<OPTION VALUE="Option4">
</DATALIST>
For example:
<INPUT LIST="Countries" NAME="Country">
<DATALIST ID="Countries">
<OPTION VALUE="India">
<OPTION VALUE="China">
<OPTION VALUE="Indonesia">
<OPTION VALUE="Pakistan">
<OPTION VALUE="Bangladesh">
<OPTION VALUE="Japan">
</DATALIST>
The above code will create a drop-down list in which these countries names are available.
Let us create a web page to display the datalist.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Countries</TITLE>
</HEAD>
<BODY>
<FORM>
Choose Your Country:
<INPUT LIST="Countries" NAME="Country">
<DATALIST ID="Countries">
<OPTION VALUE="India">
#Forms in HTML5 79

