Page 79 - Plus V4 with Adobe class 8
P. 79
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 an 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">
#Forms in HTML5 77

