Style et structure

Maintenant qu'on a vu comment insérer un formulaire, qu'on a une bonne idée des différents éléments de formulaire qu'il est possible d'utiliser et qu'on sait comment préparer un formulaire à être soumis, on va s'intéresser à la mise en page de formulaire.

Style des éléments de formulaire

Il est parfois utile de rendre un champ de formulaire en lecture seule. Dans ce cas, la valeur du champ ne pourra pas être modifiée par l'utilisateur et il ne pourra que consulter la valeur que vous aurez définie. Pour ce faire, il suffit d'utiliser la propriété readonly. L'exemple suivant montre un champ de texte avec le texte Contenu qui ne pourra pas être modifié par l'utilisateur.

Les éléments qui sont en lecture seule peuvent recevoir le focus (vous pouvez cliquer dessus et sélectionner le texte d'une zone de texte en lecture seule par exemple) et ils seront donc atteint lors de la navigation par tabulation. De plus, les valeurs de ces champs seront envoyées lors de la soumission du formulaire par l'utilisateur.

Pour éviter tout cela, on peut décider de désactiver un élément de formulaire. Pour ce faire, il suffit d'utiliser la propriété disabled. Un tel élément apparaitra souvent grisé et ne pourra pas recevoir le focus et ne sera pas atteint lors de la navigation par tabulations. Enfin, les valeurs des éléments désactivés ne sont pas transmises lors de la validation du formulaire.

Accès rapide

Certaines personnes préfèrent pouvoir naviguer entre les différents champs d'un formulaire en utilisant le clavier. On a déjà parlé de la navigation par tabulations. Par défaut, le navigateur définit un certain ordre de navigation. Si vous désirez modifier cet ordre, il suffit d'utiliser l'attribut tabindex qui prend des entiers comme valeur, ceux-ci définissant l'ordre de navigation : 1, 2, 3, ...

De plus, on peut définir un raccourci clavier pour certains éléments de formulaire. L'utilisateur pourra alors directement placer le focus sur l'élément de formulaire en utilisant le raccourci clavier ALT + touche. On définit un tel raccourci en utilisant l'attribut accesskey.

Dans cet exemple, lorsque l'utilisateur utilisera le raccourci clavier Alt + N, le focus sera directement placé sur la zone de texte. Remarquez également que les attributs tabindex et accesskey sont également disponibles pour les liens hypertextes (élément A).

Étiquette

On associe souvent à un élément de formulaire une étiquette, c'est-à-dire un petit texte qui permet de donner quelques explications par rapport au champ représenté et qui indique à l'utilisateur ce à quoi on s'attend comme donnée. Les étiquettes sont insérées à l'aide de l'élément LABEL. Les deux balises de l'élément sont obligatoires et comme on va le voir, il existe deux manières d'utiliser cet élément pour associer une étiquette à un champ de formulaire.

La première manière de faire consiste donc à utiliser l'attribut for de l'élément LABEL et de lui donner comme valeur, la même que celle de l'attribut id de l'élément qui doit être associé à cette étiquette. Une étiquette ne peut bien entendu être associée qu'à un seul élément de formulaire au maximum. Cette manière de faire permet de séparer l'étiquette de l'élément de formulaire. L'exemple suivant montre un formulaire plus complet qui exploite les étiquettes.

L'autre manière d'insérer une étiquette consiste à placer l'élément entre les deux balises de l'élément LABEL. Dans ce cas là, il ne faut plus utiliser les attributs for et id. Par contre, la limitation reste la même et il ne peut y avoir qu'un seul élément de formulaire entre les balises de l'élément LABEL.

Enfin, il faut savoir que lorsqu'une étiquette reçoit le focus (par exemple parce que l'utilisateur clique sur le texte de l'étiquette), le focus est directement transmis à l'élément de formulaire qui est lié à cette étiquette. On peut donc définir un raccourci clavier pour une étiquette et on peut la rendre visible à l'utilisateur en soulignant la lettre d'accès rapide avec l'élément U.

L'idéal serait que les navigateurs mettent eux-mêmes en évidence les accès rapide, mais il n'en est rien pour le moment. Il nous faut donc le faire nous-mêmes en soulignant par exemple la lettre de raccourci. À partir du moment où vous avez défini un raccourci clavier sur une étiquette, il ne faut bien entendu plus le définir sur l'élément de formulaire étant donné que le focus sera automatiquement transmis à ce dernier.

Structurer les formulaires

Enfin, terminons ce chapitre sur les formulaires en voyant comment il est possible de structurer visuellement le contenu de ces derniers en différentes zones. Pour ce faire, on va utiliser deux nouveaux éléments : l'élément FIELDSET qui représente un ensemble de champs et l'élément LEGEND qui représente une légende pour un ensemble de champs. Voyons tout de suite un exemple :

Les deux balises sont obligatoires pour les deux éléments. L'élément FIELDSET est simplement structurel, il permet de rassembler de manière logique plusieurs champs d'un formulaire. Ensuite, on peut définir une légende à cette zone en utilisant l'élément LEGEND. La position de la légende peut être modifiée en utilisant l'attribut align et en spécifiant les valeurs top, bottom, left ou right.