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
   76   77   78   79   80   81   82   83   84   85   86