Quelles sont les solutions pour donner des indications de saisie (aide en ligne) dans un formulaire ?

Il existe plusieurs solutions pour fournir de l’aide aux personnes utilisatrices d’un formulaire :

• les commentaires avant ou après le champ

• le texte de remplissage

• l’info-bulle

• une mise en forme personnalisée des champs en CSS

Les commentaires avant ou après le champ

Cette solution repose sur l’ajout de « commentaires », ceux sont des blocs de texte HTML qui s’insèrent entre deux champs dans un formulaire. Les commentaires sont gérés dans un corpus à la page Insertion de commentaires. Les commentaires sont multilingues, avec un bloc par langue de travail de la fichothèque. L’utilisation des commentaires est décrite plus précisément dans cette fiche.

Le texte de remplissage

Un texte de remplissage (placeholder en anglais) est un petit texte affiché par le navigateur en grisé dans un champ vide. C’est différent d’un texte par défaut puisque dès que la personne sélectionne le champ, le texte de remplissage disparait. Et si une fiche est validée sans saisie dans le champ en question, c’est bien une valeur vide qui est enregistrée et non le texte de remplissage. Le texte de remplissage est une bonne aide pour les personnes qui découvrent le formulaire pour la première fois mais il n’apparait plus par le suite quand le champ est rempli.

Pour indiquer un texte de remplissage, il faut aller dans un corpus à la page Attributs des composants; celle-ci permet d’associer des attributs à chaque composant du formulaire, que ce soit les champs d’une fiche ou les insertions de thésaurus et d’autres collections. L’attribut à utiliser pour indiquer le texte de remplissage est ficheform:placeholder:{code de langue}. Dans le cas d’une fichothèque multilingue, on aura un attribut pour chaque langue (le code de la langue est obligatoire même si la fichothèque n’a qu’une langue de travail.

ficheform:placeholder:fr=Texte de remplissage en français
ficheform:placeholder:en=English placeholder

Le texte de remplissage ne fonctionne que pour les champs de saisie de type texte. Cases à cocher et boutons radios ne sont pas affectés.

L’info-bulle

L’info-bulle (tooltip en anglais) est un petit texte disponible en survolant le pictogramme 🛈 qui est affiché à côté du libellé du champ quand ce texte existe. Comme pour le texte de remplissage, la définition du texte de l’infobulle se fait avec un attribut défini pour le champ en question via la page Attributs des composants d’un corpus.

L’attribut à utiliser est ficheform:tooltip:{code de langue}. Contrairement au texte de remplissage, l’info-bulle peut être utilisé pour tous les champs et il est toujours disponible, que le champ aie une valeur ou non.

ficheform:tooltip:fr=À l'aide
ficheform:tooltip:en=Help

Mise en forme en CSS

Une autre possibilité est de modifier l’apparence de certains champs en CSS, par exemple en utilisant des couleurs différentes pour les libellés. Dans la structure HTML du formulaire, chaque champ est défini à l’intérieur de son propre bloc <div>. Des classes CSS spécifiques peuvent être rajoutées à ce bloc <div>, via l’attribut ficheform:classes défini pour un composant dans la page Attributs des composants d’un corpus.

Dans cet exemple, la classe « rouge » est définie pour un composant.

ficheform:classes=rouge

En modifiant le CSS dans custom/theme.css (voir l’explication de la procédure) de la façon suivante, on obtient le libellé en rouge :

.rouge .ficheform-standard-Label, .rouge .ficheform-section-Label, .rouge .ficheform-standard-Colon {
    color: red;
}

Plusieurs classes peuvent être définies dans l’attribut en les séparant par un point-virgule :

ficheform:classes=rouge;avertissement