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?

1 Like

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.

Hello, guys! I’m very new to the code world.

I just don’t really understand why in this exercise on Datalist Input we can change the capitalization of options by, well, capitalizing the words directly in the value parameter. I just thought that browsers do not recognize capitalization within elements. Am I missing something?

Also, why in the previous exercise (on dropdown lists) we should “duplicate” the value parameter in between elements for it to be visible, while in this exercise the text renders just fine with only value parameter? Is it the element that “allows” the 's value to be visible?

If we look at the specs for the datalist element there is no need to use non-void tags. The OPENTAG is sufficient.

As for capitalization, that is a designer decision. The browser does not parse attribute values the way it does tag names. Values may be rendered, but they get no scrutiny.

Eg.

<LABEL></LABEL>

and,

<label></label>

are the same thing to the browser engine. However, the former is HTML 4.01 and previous. Since XHTML was introduced, lowercase tag names became the gold standard.

Hi! Thank you for your response! Unfortunately, I’m still to underskilled to fully understand it. I’ve got the point with capitalization, but I still don’t get why in the combination of <select>+<option> tags we need to write the content within <option> opening and closing tags for it to be visible, while when we use <datalist>+<option> it is enough to set the value of the tag, and it renders just fine.:thinking:
I really appreciate your help, @mtf !

1 Like

For validation, Is there a way to prevent someone from typing something that is not provided by the options?

Yes, there are a number of ways, not the least of which is simple, linear logic. It is not so simple to illustrate, though. We first need an example to explore, can you muster something up for that?

<label for="sauce">What type of sauce would you like?</label>
          <input type="text" list="sauces" id="sauce" name="sauce">
          <!--Add your code below-->
					<datalist id="sauces">
            <option value="ketchup"></option>
            <option value="mayo"></option>
            <option value="mustard"></option>
          </datalist>

In the above code, if a user input “Coca Cola” and attempt to submit, can my datalist form prevent user from doing so?

This control is meant to allow user input, that’s why it opens focus on a text input field. A select control does not allow this freedom, so that would be the one to use.

Aside

Since datalist options do not have any contained text, they are treated as void elements with no end tag.

            <option value="ketchup">
            <option value="mayo">
            <option value="mustard">
1 Like

Hi all,

I had to expand the height of the overlay to fit the entire form.

#overlay {
width: 80%;
margin: 3% auto;
height: 150vh;
background-color: rgba(255, 255, 255, 0.9);

I’ll leave it here in case it helps someone.

See you!

in datalist i noticed the id is changing compared to using radio or select… why is this the case? for example in exercise the id in input is sauce while the attribute is sauces in datalist