HTML <datalist> Tag
The <datalist> tag is used to provide autocomplete feature in the HTML files. It can be used with an input tag so that users can easily fill the data in the forms using select the data.
Syntax:
<datalist> ... </datalist>
Example 1: The below code explains datalist Tag.
HTML
<!DOCTYPE html><html><body> <form action=""> <label>Your Cars Name: </label> <input list="cars"> <!--datalist Tag starts here --> <datalist id="cars"> <option value="BMW"/> <option value="Bentley"/> <option value="Mercedes"/> <option value="Audi"/> <option value="Volkswagen"/> </datalist> <!--datalist Tag ends here --> </form></body></html> |
Output:
Example 2: The <datalist> tag object can be easily accessed by an input attribute type.
HTML
<!DOCTYPE html><html><body> <form action=""> <label>Your Cars Name: </label> <input list="cars" id="carsInput" /> <!--datalist Tag starts here --> <datalist id="cars"> <option value="BMW" /> <option value="Bentley" /> <option value="Mercedes" /> <option value="Audi" /> <option value="Volkswagen" /> </datalist> <!--datalist Tag ends here --> <button onclick="datalistcall()" type="button"> Click Here </button> </form> <p id="output"></p> <!-- Will display the select option --> <script type="text/javascript"> function datalistcall() { var o1 = document.getElementById("carsInput").value; document.getElementById("output").innerHTML = "You select " + o1 + " option"; } </script></body></html> |
Output:
Supported Browsers:
- Google Chrome 20.0 and above
- Internet Explorer 10.0 and above
- Firefox 4.0 and above
- Opera 9.0 and above
- Safari 11.1
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.
