Demos of native HTML things

This contains native things, to check how they work on different devices/browsers easily. Most examples are either taken from Mozilla MDN directly or slightly edited.

Unfortunately, these widgets are infrequently seen in the web for a reason. They are not too accessible or usable forcing you to end up using a custom solution[^titleattr]. So I don't actually recommend using these widgets.

[^titleattr]: I'm particularly sad about the title attribute. It's been used for a long time, on many websites, yet its accessibility is mediocre as per the link. And there is no native HTML alternative. One would hope the situation would improve, but I don't have any reason to believe that it will.

Select Multiple

--Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish

code:

<select multiple name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

Input with Datalist

You can add a list attribute to some input types, to give suggestions, like a native, limited select2 alternative. The suggestions themselves should be in a <datalist>, and the list attribute is the id of the corresponding datalist.

Here is the <input type="text"> version:

And here are versions for 5 time selection <input>s.

Select with type time:

Select with type month, suggesting 2023-12, 2020-03 and 2016-08:

Select with type week, suggesting some weeks at the beginning of 2023:

Select with type date, suggesting some dates at the beginning of 2023:

Select with type datetime-local

For the code, use inspect element.