Datalist elements can have values and labels (#tilPost)

Today I was reading an issue of Šime Vidas’ great Web Platform news. He describes something that was news to me – datalist elements not only provide values that can be chosen but also have a mechanism to show labels, too.
<label>…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Today I was reading an issue of Šime Vidas' great Web Platform news. He describes something that was news to me – datalist elements not only provide values that can be chosen but also have a mechanism to show labels, too.

<label>
 Animal:
 <input name=animal list=animals>
</label>
<datalist id=animals>
  <option value="Dog">?
  <option value="Cat">?
  <option value="Duck">?
</datalist>

The markup above results in the following:

Input field with auto-completion including values and labels

That's very cool in my opinion. :)

But heads-up: before you jump onto using this - make sure to read Šime's article about it. Currently, there is a Firefox bug that troubles user experience tremendously.

If you want to play around with it and see it in action you can have a look at this CodePen.


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2023-02-04T22:22:52+00:00) » Datalist elements can have values and labels (#tilPost). Retrieved from https://www.scien.cx/2019/05/16/datalist-elements-can-have-values-and-labels-tilpost/.
MLA
" » Datalist elements can have values and labels (#tilPost)." Stefan Judis | Sciencx - Thursday May 16, 2019, https://www.scien.cx/2019/05/16/datalist-elements-can-have-values-and-labels-tilpost/
HARVARD
Stefan Judis | Sciencx Thursday May 16, 2019 » Datalist elements can have values and labels (#tilPost)., viewed 2023-02-04T22:22:52+00:00,<https://www.scien.cx/2019/05/16/datalist-elements-can-have-values-and-labels-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » Datalist elements can have values and labels (#tilPost). [Internet]. [Accessed 2023-02-04T22:22:52+00:00]. Available from: https://www.scien.cx/2019/05/16/datalist-elements-can-have-values-and-labels-tilpost/
CHICAGO
" » Datalist elements can have values and labels (#tilPost)." Stefan Judis | Sciencx - Accessed 2023-02-04T22:22:52+00:00. https://www.scien.cx/2019/05/16/datalist-elements-can-have-values-and-labels-tilpost/
IEEE
" » Datalist elements can have values and labels (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2019/05/16/datalist-elements-can-have-values-and-labels-tilpost/. [Accessed: 2023-02-04T22:22:52+00:00]
rf:citation
» Datalist elements can have values and labels (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2019/05/16/datalist-elements-can-have-values-and-labels-tilpost/ | 2023-02-04T22:22:52+00:00
https://github.com/addpipe/simple-recorderjs-demo