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