You don't need JS to do that - Part 1

Introduction

We all have a quick tendency to use JavaScript for everything. However, it is important to remember that HTML is a programming language in its own right. And it is possible to do a lot of things without resorting to JavaScript.

The HTML <input/> Element and Its Many Attributes:

We all know the <input/> tag, which creates a text input field.
But did you know that there are many attributes that allow you to modify its behavior?

The one we are particularly interested in today is the list attribute, which creates a list of suggestions for a text input field.
If we combine this list attribute with the datalist attribute, we can create a quite interesting list of suggestions.

Here's a small piece of code to illustrate this example:

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" id="browser" name="browser" />
<datalist id="browsers">
  <option value="Chrome" />
  <option value="Firefox" />
  <option value="Internet Explorer" />
  <option value="Opera" />
  <option value="Safari" />
</datalist>

And here the result :

So, when you type in the text input field, the browser displays a list of suggestions in the form of a dropdown list.

It filters the suggestions based on what you type in the text input field.
As it is a text field, users always have the option to enter their own text.

Finally, you can also view all the options in the list by clicking on the arrow to the right of the text input field or by selecting the field.

You can scroll through the list of suggestions using the keyboard arrows.

Conclusion :

This post is the first in the series "You don't need JavaScript for this."
If you enjoyed this post, feel free to share it on social media.

And if you have any ideas for topics you would like to see covered in this series, please let me know via email.