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

Conclusion

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!