Page 90 - CodePilot V5.0 C8

The output of the preceding code is as follows:

Scan the QR
for full code

THE <DATALIST> TAG
You can use the <DATALIST> tag to provide input suggestions while allowing the user to enter

their own input in an associated <INPUT> field. Bind the <DATALIST> to the control by assigning it a
unique ID and using the LIST attribute in the <INPUT> tag with the same ID. The syntax to add the
datalist in the form is as follows:

<INPUT LIST="list type" ID="Id of list">

<DATALIST ID="Id of list">
<OPTION VALUE="Option1"></OPTION>

...

<OPTION VALUE="OptionN"></OPTION>
</DATALIST>

The following code uses the <DATALIST> tag to create a drop-down list:

<LABEL FOR="fruit">Select Your Favourite Fruit:</LABEL>
<INPUT TYPE="TEXT" ID="fruit" NAME="fruit" LIST="fruits"

PLACEHOLDER="Start typing a fruit">
<DATALIST ID="fruits">

<OPTION VALUE="Apple"></OPTION>

<OPTION VALUE="Banana"></OPTION>
<OPTION VALUE="Orange"></OPTION>

</DATALIST>
Scan the QR
for full code

88
CodePilot (V5.0)-VIII