Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 89 - 2620_Birla Open Mind C-8
P. 89

    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  87

| 84 85 86 87 88 89 90 91 92 93 94 |