Hi, what is the difference between using an input list
or select
?
Below is an example.
<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>
As I read (today), he
select
forces you to choose a value from the list, whiledatalist
he allows you to enter a value that is not in the list (this sometimes leads to errors on the part of the user), in addition to the elementdatalist
, can be used with other types ofinput
, not just text.Based on what the
W3C
, this class of lists can be used with typeurl
, phone, color and date. ( https://www.lawebera.es/diseno-web-html-5/uso-elemento-datalist.php )Some differences:
list
/datalist
you can manually enter values that do not exactly match the values suggested in thedatalist
, while with aselect
you have to choose from the values of theoption
.select
is supported by all browsers, while support forlist
/datalist
although widespread, is not quite there yet and can cause problems (especially on mobile devices)... And interestingly, the way to fix it is to have aselect
inside thedatalist
.input list
pointing to the samedatalist
without affecting the page (creating one is basically automatic), whereas you have toselect
insert all of themoption
to have values, which can negatively affect performance.And here are some differences that will depend on the browser you use:
list
/datalist
you can search for items anywhere in the string, while withselect
you have to search starting from the first character of the string (for example, in thelist
you can type a "c" and it will automatically suggest "Google Chrome", while in theselect
to select Chrome you would have to start with a "g" because it is "Google Chrome"). In IE the behavior is the same betweeninput
/datalist
andselect
.select
will show all the values (maybe with a scroll), while alist
/datalist
will only show some or none (eg Chrome will show a select list while Firefox won't show anything until you start write).——-
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 render them very similarly, but that similarity will depend on the browser being used (eg IE and Chrome display the
input list
resemblance to aselect
but Firefox renders it as a normal text field until you start typing).