Datalist elements can have values and labels
- Published at
- Updated at
- Reading time
- 1min
This post is part of my Today I learned series in which I share all my web development learnings.
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:
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.
Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 14 days ago.
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 14 days ago.