Les formulaires HTML sont un élément essentiel des sites Web, mais ils peuvent sembler difficiles à utiliser. Non seulement ils utilisent des éléments et attributs HTML spécialisés, mais ils brouillent également la frontière entre le contenu statique et l’interaction avec l’utilisateur. Les formulaires perturbent souvent la manière dont les utilisateurs s’attendent à interagir avec votre site Web ou votre application, ce qui les rend frustrants pour vos utilisateurs. Ces cinq meilleures pratiques vous aideront, en tant que développeur ou concepteur, à concevoir des formulaires plus intuitifs et moins frustrants pour vos utilisateurs.
Utiliser des légendes pour vos champs de formulaire HTML
Il est difficile de justifier l’utilisation d’un fieldset sans lui donner un nom. Nous pouvons améliorer le code ci-dessus en titrant notre fieldset avec l’élément legend. La légende se placera au-dessus de la bordure de l’élément fieldset, qui possède une bordure par défaut.
<fieldset>
<legend>Adresse de facturation</legend>
<span>Nom</span><input type="text" name="nom"/>
<span>Prénom</span><input type="text" name="prenom"/>
<span>Adresse</span><input type="text" name="adresse"/>
<span>Complément d'adresse</span><input type="text" name="adresse2"/>
<span>Ville</span><input type="text" name="ville"/>
<span>Département</span><input type="text" name="departement"/>
<span>Pays</span><input type="text" name="pays"/>
</fieldset>⚠️ Privilégier des labels dans vos formulaires HTML
S’il n’y a rien de mal à utiliser un span pour marquer les entrées, la balise label leur est naturellement plus adaptée.
<fieldset>
<legend>Adresse de facturation</legend>
<label>Nom</label><input type="text" name="nom"/>
<label>Prénom</label><input type="text" name="prenom"/>
<label>Adresse</label><input type="text" name="adresse"/>
<label>Complément d'adresse</label><input type="text" name="adresse2"/>
<label>Ville</label><input type="text" name="ville"/>
<label>Département</label><input type="text" name="departement"/>
<label>Pays</label><input type="text" name="pays"/>
</fieldset>Donner aux labels l'attribut for
L’attribut for vous permet d’associer un <label> à un <input>. L’identifiant de l’entrée à laquelle vous souhaitez le lier doit être le même que la valeur de for.
<fieldset>
<legend>Adresse de facturation</legend>
<label for="nom">Nom</label><input id="nom" type="text" name="nom"/>
<label for="prenom">Prénom</label><input id="prenom" type="text" name="prenom"/>
<label for="adresse">Adresse</label><input id="adresse" type="text" name="adresse"/>
<label for="adresse2">Complément d'adresse</label><input id="adresse2" type="text" name="adresse2"/>
<label for="ville">Ville</label><input id="ville" type="text" name="ville"/>
<label for="departement">Département</label><input id="departement" type="text" name="departement"/>
<label for="pays">Pays</label><input id="pays" ype="text" name="pays"/>
</fieldset>Utiliser optgroup pour catégoriser les options d'un select
L’optgroup est un élément peu connu qui permet d’indenter et de titrer les choix. Il est important de noter que l’attribut label est essentiel encore une fois.
<select>
<optgroup label="France">
<option>Paris</option>
<option>Lille</option>
<option>Lyon</option>
</optgroup>
<optgroup label="Espagne">
<option>Madrid</option>
<option>Bercelone</option>
<option>Valence</option>
</optgroup>
</select>Conclusion
Avec ses astuces, vous devriez mieux structurer vos formulaires HTML et faciliter son formatage afin d’aider à vos utilisateurs à mieux les appréhender, si vous avez aimez cet article, je vous conseil de lire mon article sur les erreurs HTML à éviter.
