Tu n'as pas besoin de JavaScript pour faire ça - Partie 1

Introduction

Nous avons tous rapidement tendance à utiliser JavaScript pour tout et n'importe quoi.
Mais il est important de se rappeler que le HTML est un langage de programmation à part entière.
Et qu'il est possible de faire beaucoup de choses sans avoir recours à JavaScript.

L'élément HTML <input/> et ses nombreux attributs :

On connait tous le tag <input/> qui permet de créer un champ de saisie de texte.
Mais sais-tu qu'il existe de nombreux attributs qui permettent de modifier son comportement ?

Et celui qui nous intéresse particulièrement aujourd'hui est l'attribut list qui permet de créer une liste de suggestions pour un champ de saisie de texte.
Si on combine cet attribut list avec l'attribut datalist on peut ainsi créer une liste de suggestions assez intéressante.

Voici un petit bout de code pour illustrer cet exemple :

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

Et voici le résultat :

Ainsi lorsque l'on tape dans le champ de saisie de texte, le navigateur affiche une liste de suggestions sous forme de liste déroulante.

Et en filtrant les suggestions en fonction de ce que l'on tape dans le champ de saisie de texte. Comme il s'agit d'un champ texte, les utilisateurs ont toujours la possibilité de saisir leur propre texte.

Enfin, on peut aussi voir toutes les options de la liste en cliquant sur la flèche à droite du champ de saisie de texte, ou en sélectionnant le champ.

Et on peut faire défiler la liste de suggestions avec les flèches du clavier.

Conclusion :

Ce post est le 1er de la série "Tu n'as pas besoin de JavaScript pour faire ça". Si vous avez aimé ce post, n'hésitez pas à le partager sur les réseaux sociaux.

Et si jamais vous avez des idées de sujets que vous aimeriez voir abordés dans cette série, n'hésitez pas à me le dire par mail.