FAQ: Learn HTML: Forms - Datalist Input

The list attribute is given to an INPUT element to bind it to a DATALIST which has an id attribute with the same value.

<input list="colors">

<datalist id="colors">

</datalist>
1 Like

Hi there, Just wondering the difference between -select- and -datalist- when it comes to code.

  1. In -select- this is the appropriate option option -value=“sesame”>Sesame</option-
  2. In -datalist- this is the appropriate option -option value=“Ketchup”></option-
    Why doesn’t datalist require that second “Ketchup” like in the sesame option.

edit: - in place of opening and closing tags

is the drop down button supposed to be there in the data list field as shown in the example… because i can’t see it … i see the text field and filter results as i type… but no drop down button

datalist

Looks like the drop down arrow is present.

The dropdown in “bun section” is from an earlier topic of “select” input function…
what m askings is in the next topic of “datalist” the example shows a dropdown button on the datalist field.
But when i make a data list , the dropdown is not present (as shown in the picture i posted earlier)
and this one below is the example in the topic


hope i was clear…

Is there a way to use datalist without allowing custom text but keeping the text entry as a search bar?

When I do this on chrome I get the value and the text showing as options.
Annotation 2021-01-23 163824
It’s pretty ugly. How would I fix it?

Here’s the code:

					<label for="sauce">What type of sauce would you like?</label>
          <input list="sauces" id="sauce" name="sauce">
          <!--Add your code below-->
					<datalist id="sauces">
            <option value="ketchup">Ketchup</option>
            <option value="mayo">Mayo</option>
            <option value="burger sauce">Burger Sauce</option>
          </datalist>
        </section>

We see your OPTION elements are written as they would be for a SELECT element. In a DATALIST we normally don’t have a text node other than the value itself, so no closing tag is needed.

<option value="Ketchup">

Try that and let us know the result, please.