HTML Form Select-Option vs Datalist-Option

Question

I was wondering what the differences are between Select-Option and Datalist-Option   Is there any situation in which it would be better to use one or the other   An example of each follows   Select-Option   lt select name  browser  gt   lt option value  firefox  gt Firefox lt  option gt   lt option value  ie  gt IE lt  option gt   lt option value  chrome  gt Chrome lt  option gt   lt option value  opera  gt Opera lt  option gt   lt option value  safari  gt Safari lt  option gt   lt  select gt    Datalist-Option   lt input type text list browsers gt   lt datalist id browsers gt     lt option value  Firefox  gt     lt option value  IE  gt     lt option value  Chrome  gt     lt option value  Opera  gt     lt option value  Safari  gt   lt  datalist gt

User · Answer

Data List is a new HTML tag in HTML5 supported browsers  It renders as a text box with some list of options  For Example for Gender Text box it will give you options as Male Female when you type  M  or  F  in Text Box    lt input list  Gender  gt   lt datalist id  Gender  gt     lt option value  Male  gt     lt option value  Female gt    lt  datalist gt

User · Answer

Datalist includes autocomplete and suggestions natively  it can also allow a user to enter a value that is not defined in the suggestions   Select only gives you pre-defined options the user has to select from

User · Answer

To specifically answer a part of your question  Is there any situation in which it would be better to use one or the other    consider a form with repeating sections  If the repeating section contains many select tags  then the options must be rendered for each select  for every row   In such a case  I would consider using datalist with input  because the same datalist can be used for any number of inputs  This could potentially save a large amount of rendering time on the server  and would scale much better to any number of rows

User · Answer

There is another important difference between select and datalist  Here comes the browser support factor   select is widely supported by browsers compared to datalist  Please take a look at this page for complete browser support of datalist--  Datalist browser support  Where as select is supported in effectively all browsers  since IE6   Firefox 2   Chrome 1  etc

User · Answer

From a technical point of view they re completely different   lt datalist gt  is an abstract container of options for other elements  In your case you ve used it with  lt input type  text  but you can also use it with ranges  colors  dates etc  http   demo agektmr com datalist   If using it with text input  as a type of autocomplete  then the question really is  Is it better to use a free-form text input  or a predetermined list of options  In that case I think the answer is a bit more obvious   If we focus on the use of  lt datalist gt  as a list of options for a text field then here are some specific differences between that and a select box    A  lt datalist gt  fed text box has a single string for both display label and submit  A select box can have a different submit value vs  display label  lt option value  ie  gt Internet Explorer lt  option gt    A  lt datalist gt  fed text box does not support the  lt optgroup gt  tag to organize the display  You can not restrict a user to the list of options in a  lt datalist gt  like you can with a  lt select gt   The onchange event works differently  On a  lt select gt  element  the onchange event is fired immediately upon change  whereas with  lt input type  text  the event is fired after the element loses focus or the user presses enter   lt datalist gt  has really spotty support across browsers  The way to show all available options is inconsistent  and things only get worse from there    The last point is really the big one in my opinion  Since you will HAVE to have a more universal autocomplete fallback  then there is almost no reason to go through the trouble of configuring a  lt datalist gt   Plus any decent autocomplete pluging will allow for ways to style the display of your options  which  lt datalist gt  does not do  If  lt datalist gt  accepted  lt li gt  elements that you could manipulate however you want  it would have been really great  But NO   Also insofar as i can tell  the  lt datalist gt  search is an exact match from the beginning of the string  So if you had  lt option value  internet explorer  gt  and you searched for  explorer  you would get no results  Most autocomplete plugins will search anywhere in the text   I ve only used  lt datalist gt  as a quick and lazy convenience helper for some internal pages where I know with a 100  certainty that the users have the latest Chrome or Firefox  and will not try to submit bogus values  For any other case  it s hard to recommend the use of  lt datalist gt  due to very poor browser support

User · Answer

Think of it as the difference between a requirement and a suggestion   For the select element  the user is required to select one of the options you ve given   For the datalist element  it is suggested that the user select one of the options you ve given  but he can actually enter anything he wants in the input     Edit 1   So which one you use depends upon your requirements   If the user must enter one of your choices  use the select element   If the use can enter whatever  use the datalist element   Edit 2   Found this tidbit in the HTML Living Standard    Each option element that is a descendant of the datalist element   represents a suggestion

User · Answer

I noticed that there is no selected feature in datalist  It only gives you choice but can t have a default option  You can t show the selected option on the next page either

User · Answer

Its similar to select  But datalist has additional functionalities like auto suggest  You can even type and see suggestions as and when you type    User will also be able to write items which is not there in list

[html] HTML Form: Select-Option vs Datalist-Option

Examples related to html

Examples related to html-select

Examples related to forms

Examples related to html-datalist