Datalist elements can have values and labels
- Published at
- Updated at
- Reading time
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. :)
If you want to play around with it and see it in action you can have a look at this CodePen.
- Automatic hyphenation depends on the defined document language
- Input-wrapping labels are not supported by Dragon
- How to define Open Graph / Twitter image alt text (and why it might not matter...)
- "HTML End Tag Labels" – a useful VSCode extension to navigate HTML
- HTML defines a ping attribute on anchor elements (links)