Text fields (Champs de texte)

Les champs de texte permettent à l’utilisateur de saisir et de modifier du texte. Ils se trouvent généralement dans un formulaire. Ce composant regroupe les champs de texte standards (input text, input number… et le textarea).

Usage

Label

• Le composant Label indique le type d’information demandée.
• Il est obligatoire sauf dans certains cas très particuliers. Quand il est absent, le placeholder est indispensable.

Conteneur

• Le conteneur est la « boîte » qui indique à l’utilisateur où saisir l’information.

Texte du placeholder

• Le texte du placeholder guide l’utilisateur sur le type de données attendu. Dans la grande majorité des cas, il est facultatif et supplémentaire au label : il ne le substitue pas et n’est pas identique. Ex. pour un champ de saisie d’adresse mail : prenom.nom@domaine.fr
• Il se trouve dans le container et n’est plus visible dès la saisie d’un caractère.

Icône

• En cas de besoin, deux types d’icônes peuvent être intégrés directement dans le champ de texte.

Icône d’information

• Cette icône illustre la nature du champ.
• Elle est située à gauche dans le container.

Icône d’action

• Elle est cliquable et permet une action spécifique.
• Elle est située à droite dans le container.
• Cas particulier : la croix.
  • Il s’agit de l’icône Vider. Elle permet la suppression totale et directe du contenu du champ.
  • Elle est présente lorsque l’input est en focus et qu’un contenu existe.

Gestion des erreurs

• Un champ obligatoire est défini comme KO lorsque le texte n’est pas correct ou est absent.

Bonnes pratiques

• En mobile, dès que l’utilisateur touche le champ, le clavier apparaît automatiquement. Il est approprié selon le contenu. Par exemple, le clavier numérique est adapté à un champ de type téléphone.

Style & code

Input text standard

Input standard minimal (sans placeholder). Le style est appliqué par défaut sur les inputs dans un site SipaUI. Il est possible de forcer cet affichage avec la classe su-input-text. Pour les labels (obligatoires), prendre le composant Labels.

<label for="input1">Label</label>
<input id="input1" name="input1" type="text" required>

Input text facultatif

Input facultatif. Pour le texte en complément dans le label, utiliser la classe su-label-complement du composant Labels.

<label for="input2">Label<span class="su-label-complement"> (facultatif)</span></label>
<input id="input2" name="input2" type="text">

Input text avec placeholder

Pour rappel du doc design, le texte du placeholder est une description supplémentaire au label, il ne le substitue pas. Il doit guider l’utilisateur sur le format de données attendu.

<label for="input3">Label</label>
<input id="input3" name="input3" type="text" placeholder="Placeholder" required>

Input text avec icône-label

Même si d’un point de vue ergonomique il est fortement déconseillé de ne pas mettre de label textuel explicite à un champ, il peut être parfois utile de passer outre, quand l’espace est compté ou que le formulaire est minimaliste (p. ex. avec un seul champ). Dans ce cas, afin de donner des indications sur le contenu attendu, le placeholder sera utile (pour présenter un exemple), mais on utilisera surtout une icône-label dans le champ, pour illustrer la donnée attendue. Pour cela, on utilisera quand même la balise <label>, pour l’accessibilité, le tout étant encapsulé dans un <div> portant la classe su-label-icon.

<div class="su-label-icon">
    <label for="input4">
        <span class="su-icon">email</span>
    </label>
    <input id="input4" name="input4" type="email" required placeholder="jacques.durant@domaine.fr">
</div>

Cas avec un SVG à la place d’une icône de la fonte

Il est aussi possible d’utiliser une icône SVG, mais attention à l’accessibilité !. En efftet, si l’utilisation d’une icône issue de la fonte d’icônes de SipaUI permet d’avoir dans le code un mot qui sera interprété par les lecteurs d’écran, ce n’est pas le cas avec une icône SVG. Il faut donc lui ajouter un texte explicatif qui sera masqué avec la classe su-visually-hidden des Helpers (classes d’aide)).

<div class="su-label-icon">
    <label for="input5">
        <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
            <style>path {fill: var(--gris-fonce)}</style>
            <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
            <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
        </svg>
        <span class="su-visually-hidden">Coordonées GPS</span> 
    </label>
    <input id="input5" name="input5" type="text" required placeholder="48,09557° N, 1,62680° O">
</div>

Input text prérempli

<label for="input6">Label</label>
<input id="input6" name="input6" type="text" required value="Valeur saisie">

Input text en lecture seule

Attention, si le readonly suffit à l’input pour changer son opacité, il faut une classe su-disabled sur le label pour le changer aussi. Cette classe est dépendante des Helpers (classes d’aide).

<label for="input7" class="su-disabled">Label</label>
<input id="input7" name="input7" type="text" required readonly value="Valeur saisie">

Input text en erreur

Pour pouvoir gérer les erreurs, chaque composant a besoin d’être inclus dans un parent qui portera la classe su-error si nécessaire. Cette classe, absente par défaut, sera positionnée par le développeur (soit par JS, soit par réponse serveur). Le message d’erreur sera identifié par la classe su-error-message. Ces 2 classes d’erreur sont issues du composant Errors (erreurs).

<div class="su-error">
    <label for="input8">Label</label>
    <input id="input8" name="input8" type="email" required value="Value">
    <div class="su-error-message">Message d’erreur</div>
</div>

Input text avec RAZ (remise à zéro)

Il s’agit d’un input standard amélioré. L’utilisateur peut vider tout le champ d’un coup en cliquant sur un bouton « croix ». Le bouton apparaît quand le champ est en focus ET qu’il a du contenu.

CSS

Classes à appliquer par défaut : su-input-actions-1 (le chiffre à la fin du nom de la classe indique qu’il y a 1 bouton d’action) sur le parent de l’input pour réserver la place à droite et su-input-action sur le bouton.

JS

Gestion de l’affichage du bouton

Déclencheur à mettre sur l’input : data-sutoggleclass='{"parent":".su-input-actions-1","klass":"su-js-show"}' (où "parent":".su-input-actions-1" fait référence à la classe ou l’ID du <div> englobant).

Classe à mettre sur l’input pour conditionner le changement au focus : su-on-focus. Cette classe est issue du composant JS Toggleclass.

Gestion du vidage du champ

Déclencheur à mettre sur le bouton : data-suemptyinput. Pour fonctionner, ce déclencheur doit être un neveu direct de l’input à vider, si pour une raison particulière ce ne peut être le cas, vous pouvez utiliser data-suemptyinput='{"sel":"#input9"}', où #input9 est l’ID de l’input à vider.

<label for="input9">Label</label>
<div class="su-input-actions-1">
    <input id="input9" name="input9" type="text" class="su-on-focus" data-sutoggleclass='{"parent":".su-input-actions-1","klass":"su-js-show"}' required value="Lorem ipsum">
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action" data-suemptyinput>
            <i class="su-icon">vider</i>
        </button>
    </div>
</div>

Exemple de champ complexe

(complément de label, placeholder, RAZ et gestion d’erreur)

<div class="su-error">
    <label for="input10">Label<span class="su-label-complement"> (facultatif)</span></label>
    <div class="su-input-actions-1">
        <input id="input10" name="input10" type="text" placeholder="Placeholder" class="su-on-focus" data-sutoggleclass='{"parent":".su-input-actions-1","klass":"su-js-show"}' required value="Value">
        <div class="su-input-actions-area">
            <button type="button" class="su-input-action" data-suemptyinput>
                <i class="su-icon">vider</i>
            </button>
        </div>
    </div>
    <div class="su-error-message">Message d’erreur</div>
</div>

Textarea

Textarea standard. Il est possible de forcer cet affichage avec la classe su-textarea.

<label for="textarea">Label</label>
<textarea id="textarea" name="textarea" required></textarea>

Accessibilité

En utilisant ces composants, vous utilisez du HTML sémantique qui est suffisant pour l’accessibilité de base dans la plus part des cas.

Règles minimales :

• Si le champ n’a pas de label, mais peut s’appuyer sur un autre élément du DOM pour en avoir un, utiliser l’attribut aria-labelledby avec l’ID de l’élément (« Utiliser l’attribut aria-labelledby » chez MDN Web docs [moz://a]).
• Si le champ n’a pas de label et que rien dans le DOM ne peut lui servir de label, lui ajouter un aria-label="".

Des règles optionnelles peuvent être utilisées pour les anciens lecteurs d’écrans :

• Chaque champ peut avoir un rôle role="textbox".
• S’il s’agit d’un champ multilignes (textarea), rajouter aria-multiline="true".
• Si le champ est en readonly mettre l’attribut aria-readonly="true" (ne pas oublier de le passer à "false" s’il n’est plus en readonly).
• Si le champ est requis (required), ajouter aria-required="true"