Entry

Représente les éléments de type INPUT et TEXTAREA, qui permettent de récolter des informations saisies librement par l'utilisateur. Ils doivent être contenu dans une balise <form></form>

Code de base

Aperçu

<textarea id="example-textarea" class="textarea" placeholder="placeholder textarea" aria-label="exemple textarea"></textarea>

 

DO

Les champs de saisie de texte doivent avoir un label explicite et visible.

L'exception peut être faite pour le champ de saisie d'une barre de recherche, dès lors que la fonction est signalée par une icône appropriée et comporte un intitulé non visible à destination des lecteurs d'écran (voir ACCESSIBILITÉ).

ACCESSIBILITY

Les champs de saisie de texte doivent avoir un label placé à proximité du champ les décrivant pour rester conforme aux exigences d'accessibilité :

  • Un champ de saisie avec label visible doit lier le champ et le label au moyen d'une correspondance id / for

    <div>
        <input id="email" class="input" type="text">
        <label for="email">Adresse mail</label>
    <div>

  • Un champ de saisie sans label visible doit posséder l'attribut aria-label

    <input class="input" type="text" aria-label="Recherche">

Avec label dynamique

Ajoutez la classe has-dynamic-placeholder pour obtenir un label se transformant en placeholder lorsque la saisie est commencée.

Aperçu

<textarea id="dynamic-label-textarea" class="textarea" placeholder="Text input"></textarea>

 

Avec icône

Vous pouvez prévoir un spinner dans le champ (is-searching), ou des icônes placées à droite (has-icons-right). La couleur de l'icône s'adapte à la sémantique du champ (erreur, avertissement, etc.).

Aperçu

Ce mot de passe ne respecte pas les règles de sécurité