HTML is Amazing.

JavaScript is cool and all, but I’m still on the fence. HTML is actually pretty amazing, and can totally be the right tool for the job without having to get stuck in dependency hell.

Instead of using a bloated library, why not try your hand at what va…

JavaScript is cool and all, but I’m still on the fence. HTML is actually pretty amazing, and can totally be the right tool for the job without having to get stuck in dependency hell.

Instead of using a bloated library, why not try your hand at what vanilla HTML has to offer?

Here are some interactive HTML elements you can use without any JavaScript.

Dropdowns

The <select> element is commonly used in forms, but with a bit of imagination you can use it for a bunch of other things. How about a language selector, page switcher, or a version menu for documentation pages?

<select>
    <option value="en">English</option>
    <option value="sv">Swedish</option>
    <option value="es">Spanish</option>
    <option value="fr">French</option>
    <option value="de">German</option>
</select> 

Screenshot of a dropdown menu

Searchable inputs

As you can see, select elements are great when you want to limit selections to a predefined list, but can become quite overwhelming when you have a large list of options.

You can use the <datalist> element to create a set of values that the browser can then use for autocompletion.

<input type="text" list="common-search-values" placeholder="Search...">
<datalist id="common-search-values">
    <option>George Orwell</option>
    <option>Daniel Handler</option>
    <option>Neil Gaiman</option>
    <option>Ernest Hemingway</option>
    <option>Virginia Woolf</option>
</datalist>

Screenshot of an input with a datalist

Vanilla HTML datetime picker

This one is my favorite. I spend too much time trying out JavaScript datetime pickers before realizing that HTML already has one. All you need is the following snippet:

<input type="datetime-local">

Screenshot of the datetime-local date picker

Learn more

You can try all of the examples shown here on CodePen, https://codepen.io/stresseddev/pen/zYRGgrN

And here are some links to the MDN resources.

What are your favorite HTML elements? When does it make sense to use JavaScript, and when is it best to stick to HTML? Let me know in the comments!


Print Share Comment Cite Upload Translate
APA
Stressed Developer | Sciencx (2024-03-29T14:58:23+00:00) » HTML is Amazing.. Retrieved from https://www.scien.cx/2022/05/05/html-is-amazing/.
MLA
" » HTML is Amazing.." Stressed Developer | Sciencx - Thursday May 5, 2022, https://www.scien.cx/2022/05/05/html-is-amazing/
HARVARD
Stressed Developer | Sciencx Thursday May 5, 2022 » HTML is Amazing.., viewed 2024-03-29T14:58:23+00:00,<https://www.scien.cx/2022/05/05/html-is-amazing/>
VANCOUVER
Stressed Developer | Sciencx - » HTML is Amazing.. [Internet]. [Accessed 2024-03-29T14:58:23+00:00]. Available from: https://www.scien.cx/2022/05/05/html-is-amazing/
CHICAGO
" » HTML is Amazing.." Stressed Developer | Sciencx - Accessed 2024-03-29T14:58:23+00:00. https://www.scien.cx/2022/05/05/html-is-amazing/
IEEE
" » HTML is Amazing.." Stressed Developer | Sciencx [Online]. Available: https://www.scien.cx/2022/05/05/html-is-amazing/. [Accessed: 2024-03-29T14:58:23+00:00]
rf:citation
» HTML is Amazing. | Stressed Developer | Sciencx | https://www.scien.cx/2022/05/05/html-is-amazing/ | 2024-03-29T14:58:23+00:00
https://github.com/addpipe/simple-recorderjs-demo