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

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 name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>


<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">

This question is related to html html-select forms html-datalist

The answer is

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."

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

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)

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.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 

From a technical point of view they're completely different. <datalist> is an abstract container of options for other elements. In your case you've used it with <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 <datalist> as a list of options for a text field then here are some specific differences between that and a select box:

  • A <datalist> 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 <option value='ie'>Internet Explorer</option>.
  • A <datalist> fed text box does not support the <optgroup> tag to organize the display.
  • You can not restrict a user to the list of options in a <datalist> like you can with a <select>.
  • The onchange event works differently. On a <select> element, the onchange event is fired immediately upon change, whereas with <input type="text" the event is fired after the element loses focus or the user presses enter.
  • <datalist> 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 <datalist>. Plus any decent autocomplete pluging will allow for ways to style the display of your options, which <datalist> does not do. If <datalist> accepted <li> elements that you could manipulate however you want, it would have been really great! But NO.

Also insofar as i can tell, the <datalist> search is an exact match from the beginning of the string. So if you had <option value="internet explorer"> and you searched for 'explorer' you would get no results. Most autocomplete plugins will search anywhere in the text.

I've only used <datalist> 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 <datalist> due to very poor browser support.

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.

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.

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.

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to html-select

How can I get new selection in "select" in Angular 2? How to show disable HTML select option in by default? Remove Select arrow on IE Bootstrap 3 select input form inline Change <select>'s option and trigger events with JavaScript How to use a Bootstrap 3 glyphicon in an html select Creating a select box with a search option Drop Down Menu/Text Field in one How to have a default option in Angular.js select box How to set the 'selected option' of a select dropdown list with jquery

Examples related to forms

How do I hide the PHP explode delimiter from submitted form results? React - clearing an input value after form submit How to prevent page from reloading after form submit - JQuery Input type number "only numeric value" validation Redirecting to a page after submitting form in HTML Clearing input in vuejs form Cleanest way to reset forms Reactjs - Form input validation No value accessor for form control TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

Examples related to html-datalist

Show datalist labels but submit the actual value HTML Form: Select-Option vs Datalist-Option