Séance 2
Last updated
Last updated
Les formulaires sont un élément essentiel du web et le seul moyen de collecter des informations provenant de vos utilisateurs.
Ils sont aussi une vraie difficulté dans bien des cas, et une perte importante d'utilisateur est généralement constaté au moment de compléter un formulaire.
Rendre un formulaire accessible est donc indispensable afin de conserver les utilisateurs, et de permettre que tous les usagers puissent le remplir.
Permet de définir globalement un formulaire.
Ce sont les champs des formulaires
Les boutons radios ou checkbox doivent retourner une valeur pour indiquer l'option retenue.
Pour que ces boutons fonctionnent ensemble il faut qu'ils aient la même valeur pour l'attribut name.
Exemple pour un radio (source :
Exemple pour un checbox
Ici le name est un tableau, car il est possible de sélectionner plusieurs valeurs.
On peiut indiquer "checked
" sur les valeurs par défaut (une seule par radio, mais potentiellement plusieurs sur un checkbox)
Ce sont les textes accompagnant chaque champ de formulaire.
Le lien entre le label et le champ se fait parce que l'attribut for de label contient la valeur de l'attribut id du champs.
Les fieldsets permettent de regrouper les champs de formulaires qui ont un lien ou une cohérence entre eux.
Un fieldset possède une "legend", et par défaut est représenté par un cadre avec la légende en haut à gauche. Ce comportement peut bien sr tre modifié en CSS.
Tout comme pour les tableaux, bien utiliser les bonnes balises peut permettre de formater en CSS un formulaire sans devoir créer des class ou des id spécifiques.
27 règles de qualité encadre les formulaires :
Créez un formulaire accessible, ergonomique et correctement structuré qui doit contenir les champs suivants :
Nom, Prénom
Civilité
Nationalité (indiquer uniquement quelques pays)
Adresse complète
Coordonnées du moyen de paiement
Acceptation des CGU
Vous proposerez des regroupements cohérents des champs. Vous veillerez à un rendu correct en CSS (sans utilisation de Bootstrap ou équivalent pour cet exercice).
(partie label)
Source :
Ce que dit l'accessibilité :