Utiliser les attributs des formulaires HTML pour améliorer l’expérience utilisateur

Les formulaires web et les champs de saisie possèdent une multitude d’attributs qui peuvent fournir des indications au navigateur et améliorer ainsi l’expérience utilisateur lors de leur saisie.

De nombreuses variétés de validations, d’étiquettes… et de comportement JavaScript peuvent être évitées.

Des attributs tels que spellcheck, autofocus, autocapitalize, autocomplete et autocorrect peuvent être ajoutés aux champs de saisie pour améliorer l’expérience utilisateur (UX).

Tous ces attributs servent à indiquer au navigateur de quelle manière gérer le ou les champs de saisies et sans JavaScript.

L’attribut autofocus

1 seul élément peut le posséder. Certains navigateurs se déplacent automatiquement vers ce champ ; ce qui peut-être gênant s’il va dans le footer.

<input type="text" autofocus>

L’attribut autocapitalize

Cet attribut peut être spécifié sur un élément de formulaire pour s’appliquer à tous ses champs enfants ou à chaque élément de saisie indépendamment. Son comportement varie également en fonction du navigateur.

4 comportements pour autocapitalize :

• none ou off : ne rien capitaliser.
• sentences ou on : capitalise la première lettre de chaque phrase.
• characters : chaque caractère.
• words : mets en majuscule la première lettre de chaque mot.

<form action="/capitalize" autocapitalize="true">
    <input type="text" autocapitalize="on">
    <input type="text" autocapitalize="off">
    <input type="text" autocapitalize="characters">
    <input type="text" autocapitalize="words">
</form>

L’attribut autocomplete

Cet attribut possède une large plage de valeurs en fonction du type de saisie.

Il peut être spécifié sur un élément de formulaire pour s’appliquer à tous ses champs enfants ou à chaque élément de saisie. Les valeurs les plus courantes sont on et off. Il laissent le navigateur décider du type de valeur. Mais l’on peut utiliser : email, shipping, street-address, billing, postal-code, family-name…

<input type="email" name="email" autocomplete="email">
<input name="full-name" autocomplete="name">
<input type="password" name="password" autocomplete="new-password">

L’attribut spellcheck

L’attribut spellcheck peut être définit sur true ou false. Définit le comportement par défaut de la vérification orthographique. Il varie suivant les navigateurs. On peut la désactiver globalement ou champ par champ.

<form method="post" action="/login" spellcheck="true">
    <!-- Hérite de form -->
    <input type="text">
    <!-- Active la correction ortthographique -->
    <input type="text" spellcheck="true">
    <!-- Désactive la correction ortthographique -->
    <input type="text" spellcheck="false">
</form>

L’attribut autocorrect

L’attribut autocorrect peut être réglé sur on ou off. Il s’agit d’un attribut non standard (Safari).

    <input type="text" name="email" autocorrect="off">
    <textarea name="description" autocorrect="on"></textarea>

Conclusion

Il existe plein d’autres attributs pour les champs de saisies. Peu de caractères à écrire pour une optimisation utilisateur. Il en existe d’autres comme pattern qui permet de définir une expression régulière, placeholder pour une zone de saisie qui n’a pas de valeur…

Une grande partie de attributs sont disponibles sur mdn.