The datalist element in HTML5

Example Download

The <datalist> element provided in HTML5 allows you to create a set of viable options to set as a value in other elements of type input; In other words, the <datalist> element provides a list of predefined options through the <option> elements; Its common use is to establish input elements of various types with a set of options through the <datalist>:

Preferred browser

How to use the <datalist> in conjunction with the inputs?

To use the <datalist> in conjunction with the inputs, some identifier must be established in the <datalist> through the id attribute; In addition, a set of </option> must be established as possible options established in the <datalist>:

     <datalist id="navegadores">
     <option value="Internet Explorer">
     <option value="Firefox">
     <option value="Chrome">
     <option value="Opera">
     <option value="Safari">
     </datalist>

With the value of the identifier above, it is set via the list attribute on the input:

<input list="navegadores" type="text">

We can also place a label attribute on <option> elements in conjunction with alternative text:

<datalist id="urls">
	<option value="http://www.google.com" label="Google">
	<option value="http://www.bing.com" label="Bing">
	<option value="http://www.yahoo.com" label="Yahoo">
</datalist>

Example Download

CSS

Lista

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy