What is the datalist tag for and when to use it?
In this article we will learn what the datalist tag is for and also how you can use it in your projects to take advantage of semantic HTML
What’s up programmer, how are you? Let’s learn more about HTML and also semantic HTML!
The datalist element is quite new in HTML, it was created in the version that is called HTML5
It is similar to a select, but with a differential
Which is the autocompletion of options as the user types some text that matches the options entered
In addition, it has the functionality to select options manually, as in select
Another advantage of the datalist is that the text of value and the text of the element appear in the combo box, allowing us to style it differently than the Select method
Let’s see a practical example:
<label>Browsers list</label> <input list="browsers" /> <datalist id="browsers"> <option value="Chrome"> Version 1.0 <option value="Firefox"> Version 2.5 <option value="Internet Explorer"> Version 13.0 <option value="Opera"> Version 5.0 <option value="Safari"> Version 2.0 </datalist>
Check out the return in the browser:
In addition to autocomplete, as mentioned, you have caption as functionality in addition to the value
In this article learned what the datalist tag is for
Which is basically a select with auto-completion, which is very good because we no longer need to use jQuery to do this functionality as before it.
Now you can apply it to your projects 🙂
Do you want to learn more about HTML and its tags? Click here!