FAQ: Learn HTML: Forms - Datalist Input

#21

pic

Well, I actually don’t know but to me it seems like it’s optional if the value corresponds to what you actually want to have shown.

In my example “honey” shows up like that even though I wrote nothing in the content of the element. While if I do write something then the content replaces what is shown. It could be handy if in the value you want to register you don’t want to take capitalization into account but actually want “Ketchup” to show up.

Not sure if that’s how it is for you or for others, but it might also be browser related? I’m using firefox.

2 Likes
#22

Same in Safari as well. It only renders the word equaled to the value attribute. The word between the tags aren’t presented on the datalist under the input box

2 Likes
#23

Safari now supports datalist from its version 12.1, released March 25, 2019, according to caniuse.com.

But as reported in this discussion thread, how the text inserted between the opening and closing tags shows up appears to differ across browsers…

1 Like
#24

You can do it, but it’ll show up under the option, like this:

ketchup
ketchup

mayo
mayo

This trick is useful for websites that deal with limited-seating events or ticket sales, because the text between the opening and closing tags can set up to display a returned value. Other times, it can display a very brief description of the listed option . Outside of that, however, it’s confusing and takes up screen space… which is always at a premium, especially with tablets and smartphones.