Textarea Modèles HTML

Modèles HTML de zone de texte pour les champs structurés

La plupart des problèmes liés aux champs multilignes proviennent du balisage : absence d’étiquette associée à la zone, absence de nom pour la saisie, et aucune indication permettant à l’utilisateur de savoir si deux phrases ou deux paragraphes sont attendus. Un modèle « zone de texte » résout ces problèmes en premier lieu.

Balisage de base : Étiquette, Nom, Lignes

Un champ d’assistance complet nécessite peu d’éléments. Une étiquette telle que « Décrivez le problème » pointe vers le champ grâce à sa valeur « for » ; le champ reprend cette valeur comme « id », possède un « name » comme « message », s’ouvre sur six lignes et propose un champ de saisie tel que « numéro de commande, description du problème, actions effectuées ».

Quatre détails sont essentiels :

1. « for » dans l’étiquette et l’« id » correspondant dans le champ les lient, de sorte que cliquer sur le texte place le curseur dans la zone et que les logiciels d’assistance les interprètent comme un seul élément ;

2. « name » est la clé sous laquelle la réponse est enregistrée, et un champ sans nom est inutile ;

3. « rows » définit le nombre de lignes visibles avant le défilement, une indication claire de la longueur attendue.

4. « placeholder » affiche un exemple et ne remplace jamais le libellé, puisqu'il disparaît à la première frappe.

« cols » est son équivalent horizontal, et la plupart des modèles l'omettent.

Attributs pour les réponses obligatoires ou limitées

Un commentaire rapide et une demande de garantie nécessitent des garanties différentes, et trois attributs couvrent la plupart de ces différences :

1. « required » empêche la soumission d'un champ vide et doit être associé au champ indispensable à votre équipe, généralement la description du problème.

2. « minlength » définit une longueur minimale au-delà de laquelle les réponses d'un seul mot sont inutiles, comme dans un briefing de projet.

3. « maxlength » limite les entrées très longues et fonctionne de manière optimale avec un compteur auquel « aria-describedby » est associé.

Il en résulte des modèles nettement différents. Un message d'assistance conserve l'attribut « obligatoire », six lignes et une limite d'environ 1 200 caractères. La description d'un projet s'étend sur 10 lignes et peut contenir jusqu'à 80 caractères. La relecture reste facultative et illimitée, car une limite de caractères décourage la rédaction.

Ordre d'accessibilité avant soumission

L'ordre des éléments dans le document est aussi important que leurs attributs. Commencez par l'étiquette, puis le texte d'aide (le cas échéant), le champ de saisie, et enfin l'emplacement du message de validation. À la lecture, cet ordre est logique et un visiteur qui navigue avec la touche Tabulation trouvera l'explication avant le champ vide. L'attribut « aria-describedby » lie le texte d'aide et le compteur de caractères au champ de saisie, et aucun texte d'espace réservé ne remplace ce lien.

Nicepage utilise la même structure grâce à son élément Formulaire de contact, qui conserve l'ordre des étiquettes, des champs de saisie et de la soumission.

Choisissez un modèle en fonction de l'étiquette souhaitée, du caractère obligatoire ou non de la réponse, de la longueur attendue, des indications fournies au visiteur et de la validation associée.