Coder Perfect

Select-Option vs. Datalist-Option in HTML Forms


I was curious as to what the distinctions between Select-Option and Datalist-Option are. Is there any circumstance in which one or the other would be preferable? Here’s an example of each:


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

Asked by user928984

Solution #1

Consider the distinction between a demand and a suggestion. The user must choose one of the alternatives you’ve provided for the select element. It is recommended that the user select one of the alternatives you’ve provided for the datalist element, but he can enter whatever he wants in the input.

Edit 1: Ultimately, the one you use will be determined by your needs. Use the select element if the user must choose one of your options. Use the datalist element if the user can enter whatever they want.

Edit 2: “Each option element that is a descendant of the datalist element…represents a proposal,” according to the HTML Living Standard.

Answered by james.garriss

Solution #2

From a technological standpoint, they are diametrically opposed. datalist> is an abstract container for other elements’ options. You’ve used it with input type=”text” in your case, but it may also be used with ranges, colors, dates, and so on.

If you’re utilizing it as a type of autocomplete with text input, the key question is whether you should use a free-form text input or a predetermined list of alternatives. In that scenario, I believe the solution is a little clearer.

If we concentrate on the use of datalist> as a list of possibilities for a text field, there are a few key distinctions to be made:

In my opinion, the last point is the most important. Because you’ll almost certainly need a more universal autocomplete fallback, there’s basically no reason to bother configuring a datalist>. Plus, unlike datalist>, any quality autocomplete plug-in will allow you to personalize the appearance of your alternatives. It would have been fantastic if datalist> could take li> components that you could alter in whatever way you wanted! However, no.

Furthermore, as far as I can see, the datalist> search is an exact match from the start of the string. So if you had and you searched for ‘explorer’ you would get no results. Most autocomplete plugins will search anywhere in the text.

I’ve just used datalist> as a quick and lazy convenience tool for specific internal pages where I know for sure that the users are using the most recent version of Chrome or Firefox and will not try to input fraudulent information. In any other instance, due to limited browser support, it’s difficult to propose using datalist>.

Answered by mastaBlasta

Solution #3

Datalist comes with autocomplete and suggestions out of the box, and it can also allow a user to enter a value that isn’t in the suggestions.

Select only gives you pre-defined options the user has to select from

Answered by user3167654

Solution #4

In HTML5-enabled browsers, the Data List tag is a new HTML tag. It appears as a text box with a drop-down menu of possibilities. When you type ‘M’ or ‘F’ in the Gender Text Box, for example, it will give you options such as Male Female.

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

Answered by Deepak

Solution #5

Its similar to select, But datalist has additional functionalities like auto suggest. You can even type and receive ideas as you go.

The user will also be able to add items to the list that aren’t already there.

Answered by VIJ

Post is based on