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>
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>
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">
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!