Good, what's the difference between using a input list or select ?
Here's an example below.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<select name="Seleccion">
<option value="Rojo">rojo</option>
<option value="Verde">verde</option>
</select>Some differences:
list / datalist you can enter values manually that do not exactly match the suggested values in datalist , while with a select you have to choose from the values of option mandatorily . select is supported by all browsers, while support for list / datalist although extended, is still not there at all and can cause problems (especially on mobile devices) ... And interestingly, the way to solve it is to have a select within datalist . input list pointing to the same datalist without affecting the page (create one is basically automatic), while at select you must insert all the option to have values, which can negatively affect performance. And here some differences that will depend on the browser you use:
list / datalist you can search the elements for any part of the chain, while with select you have to search starting with the first character of the chain (for example, in the list you can write a "c" and automatically suggest "Google Chrome", while in select to select Chrome you should start with a "g" because it is "Google Chrome"). In IE the behavior is the same between input / datalist and select . select will show all the values (maybe with a scroll), while with a list / datalist only some or none will be displayed (eg Chrome will show a list select while Firefox will not show anything until you start writing). ---
The main difference is that they are not the same: one is a text field with autocomplete / suggestions and the other is a list of fixed values. Some browsers will represent them in a very similar way, but that similarity will depend on the browser that is used (eg IE and Chrome show input list similar to select but Firefox represents it as a normal text field until it starts write).
As I read (today), the select forces you to choose a value from the list, while the datalist allows you to enter a value that is not in the list (that sometimes leads to errors in the list). part of the user), plus the datalist element, can be used with other types of input , not just text.
Based on what the W3C tells us, this kind of lists can be used with type url , telephone, color and date.
( link )