Page 78 - Code_GPT_Class_8
P. 78
<BODY>
<FORM>
Password: <INPUT TYPE="PASSWORD" NAME="Pass" SIZE="10">
</FORM>
</BODY>
</HTML>
Adding DataList
To provide input suggestions while allowing the user to submit input directly, use the <datalist> element.
The <datalist> element provides a list of options for the user to select from, but it also allows the user
to enter their own input freely in an associated <input> field.
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">
Hintbot
<OPTION VALUE="Option1">
<OPTION VALUE="Option2">
Closing tag for <option> tag can be used for
<OPTION VALUE="Option3">
proper syntax rules and maintainability.
<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>
CodeGPT (Ver. 4.0)-VIII
76

