HTML <datalist> tag provide pre-arranged options for an HTML input element that can be specified as needed. This tag allows the input element to be completed automatically by providing selective choices in a pre-defined list. It implies that a list option falls to select when the user starts filling the text box on the web page. Users should apply the <datalist> tag with the <input> element, which includes the "list" attribute. Here, the list attribute of the <input> element holds the ID of the <datalist> tag so that they can be linked together.
Benefits of Using the HTML <datalist> Tag
The <datalist> The tag provides a feature so that the user can quickly pick and fill out the data in the input field without typing the data. It is useful where the HTML form requires this type of input where the user can type in the input field and also select from the options.
HTML <datalist> Tag Example
Here is an example of HTML datalist elements that keep a record of courses so that users can quickly choose an option from the list without typing.
Example:
<label for="course">Type or select your course from the list:</label>
<input id="course" name="course" type="text" list="courseslist">
<datalist id="courseslist">
<option value="Web Design">
<option value="Web Development">
<option value="Programming Languages">
<option value="Database Design and Development">
</datalist>In the example above, datalist tags have been used in the input text type, and the other textual types are search, url, tel, email, and number, where datalist tags can be used.
HTML <datalist> Tag With Date and Time Type
Example:
<label for="batchtime">Type or select your batch time from the list:</label>
<input id="batchtime" name="batchtime" type="time" list="batchtimelist">
<datalist id="batchtimelist">
<option value="13:00">
<option value="14:00">
<option value="15:00">
</datalist>HTML <datalist> Tag With Range Type
The recommended values in the range type will be shown as a series of marks that the user can easily choose.
Example:
<label for="age">Select from the Range:</label>
<input id="age" name="age" type="range" list="agelist">
<datalist id="agelist">
<option value="20">
<option value="30">
<option value="40">
</datalist>HTML <datalist> Tag With Color Type
Example:
<label for="color">Choose a color from options:</label>
<input id="color" name="color" type="color" list="colorlist">
<datalist id="colorlist">
<option value="#dc3545">
<option value="#20c997">
<option value="#0d6efd">
</datalist>