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 9 days ago.
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 9 days ago.