Last Updated on April 26, 2023 by Roshan Parihar
HTML datalist tag is used to show some pre-defined options for the users to select for input field.
Syntax
|
1 2 3 4 5 6 |
<input list="mylist"/> <datalist id="mylist"> <option value="value1"/> <option value="value2"/> .... </datalist> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<p>Few list of html tags to select by the user.</p> <input list="myhtml5list"/> <datalist id="myhtml5list"> <option value="canvas"/> <option value="aside"/> <option value="audio"/> <option value="video"/> <option value="footer"/> <option value="header"/> <option value="figure"/> </datalist> |
Output
Few list of html tags to select by the user.
List of HTML datalist tag attributes
| Sr. No. | Datalist attributes | Description |
|---|---|---|
| 1 | id | Used to include an id for datalist. This id should be same as value of list attributes in the input field. |
| 2 | value | Used to give value of <options> tag used inside datalist tag. |
HTML Datalist tag with input type, color
This example for datalist contains an input field with a type attribute value color. This can be used in web pages to show the list of colors to select by the user.
|
1 2 3 4 5 6 7 8 9 |
<input type="color" list="mycolor" /> <datalist id="mycolor"> <option value="#00000"/> <option value="#478912"/> <option value="#FFFFFF" /> <option value="#33FF99" /> <option value="#5AC6D9" /> <option value="#573905" /> </datalist> |
Output
Example for HTML datalist tag with an input type range
This example for datalist contains an input field with a type attribute value range. This can be used in web pages to show the list of ranges to select by the user. This is not the replacement of HTML list tag.
|
1 2 3 4 5 6 7 |
<input type="range" value="0" min="0" max="100" list="mynumbers" /> <datalist id="mynumbers"> <option value="20" /> <option value="40" /> <option value="60" /> <option value="80" /> </datalist> |
Output
Resources and References
1. W3C Specification.
2. HTML living standard
3. W3C project using Github