In this article I will explain the DataList tag of HTML 5.
Introduction A <datalist> tag can be used to create a simple auto-complete feature for a webpage. <datalist> is the newly defined HTML tag that came with the HTML 5 specification. By using this <datalist> tag we can define a list of data and then we can bind it with an <input> tag. A <datalist> tag specifies a list of predefined options for an <input> element. After binding it the user will see a drop down list in which all the predefined options will be there for the input. When the user types a character or string then the user will automatically get the data depending on the input string or character. The main feature of this <datalist> tag is to auto-complete the <input> element. Example Suppose we have a TextBox for the country.<input type="text" list="countries" name="country" /> In the preceding input element we are using the list attribute and we are passing the list of countries. so we will define a list of countries using the <datalist> tag as given below:
Complete Example
Output The output of the code above is given below:
Browser Compatibility The following are the browser versions that fully supports <datalist>:
Grid structure in css