Comment utiliser des tableaux pour structurize formulaires en HTML, et des solutions de rechange, comme FIELDSET
Souvent considéré comme un outil de mise en page, les tables sont plus correctement traitées comme une méthode pour exprimer les relations structurelles. Par exemple, les tableaux peuvent être utilisés pour indiquer les relations entre les champs d'entrée et leurs explications dans un formulaire. Ce document décrit les détails techniques impliqués.
Les tableaux et les formes peuvent être imbriquées ou l'autre manière. Mais si vous mettez des formulaires dans les tables. chaque formulaire doit être complètement incluse dans une cellule de table unique (un seul élément de TD dans la pratique). Ainsi les formes sont entièrement indépendante. Voir mon document sur les choix dans les formulaires HTML pour quelques exemples simples.
Ce que les gens veulent probablement faire plus souvent pour les imbriquer dans l'autre sens: un élément de table à l'intérieur d'un élément de formulaire. Ensuite, tous les champs de formulaire dans les cellules du tableau, étant en éléments TR à l'intérieur de l'élément de table qui est à l'intérieur de l'élément de formulaire, sont des champs de la même forme.
Si les tableaux sont utilisés pour structurize formes?
Il est préférable d'organiser des formes simplement: ne pas utiliser les tables pour forcer une mise en page particulière, mais pour indiquer la structure en cas de besoin. Les navigateurs devraient présenter des tableaux et des documents HTML en général, d'une manière qui correspond à la structure exprimée en HTML.
Pour prendre un exemple assez commun: Supposons que vous souhaitez laisser l'utilisateur choisir un produit à partir d'une liste et formulaire de commande. Probablement l'information produit se compose de certains champs comme le nom du produit, numéro de commande, et le prix unitaire pour chaque produit. Cela signifie que les données lui-même est par nature sous forme de tableau. Pourquoi faire pas table? Cela rendrait l'apparence reflète la structure. Il y a des aspects techniques impliqués ici; voir les notes sur l'utilisation de cases à cocher ou des boutons radio (au lieu de SELECT) à de telles fins.
A titre d'exemple simple. tenir compte de la situation dans laquelle un texte (étiquette de champ ou quelque chose comme ça) est associé à un champ de saisie. (Il existe de meilleures façons de le faire en principe en HTML 4.0, mais actuellement l'idée de table pourrait être mieux..) Vous pouvez configurer une table où la première colonne contient les textes et la deuxième colonne contient les champs d'entrée correspondants:
Sur votre navigateur actuel avec ses paramètres actuels, cela apparaîtra comme suit:
Un autre cas typique pour l'utilisation d'une table est d'organiser une série de boutons radio. Il y a un exemple dans les choix dans les formulaires HTML ainsi que à la fin du document en cours.
Notez que dans notre exemple, le bouton d'envoi est en dehors de la table. La raison est qu'il a un rôle différent de celui des autres domaines. Il pourrait être dans la table aussi, mais peut-être qu'il est plus facile de savoir si ce n'est pas.
Notez également que contrairement à la croyance populaire parmi les auteurs, un bouton de réinitialisation est pas obligatoire ou même utile, en règle générale. Il est particulièrement dangereux lorsqu'il est présenté à côté d'un bouton soumettre!
En ce qui concerne des questions spécifiques à la combinaison des tables et des formulaires, notez que si vous mettez une forme dans une cellule de table, alors vous il pourrait y avoir un peu d'espace vertical supplémentaire indésirable sous le formulaire. Il existe différentes façons d'essayer de supprimer cela. S'il n'y a qu'une seule forme de la table, l'un des moyens est de changer la structure de sorte que la forme et la table sont imbriquées dans l'autre sens: la forme contient la table, même si une seule cellule contient les champs du formulaire. Techniquement, vous souhaitez simplement déplacer les balises de début et de fin de la forme. Cela signifie quelque chose comme ce qui suit (dans un cas où la forme apparaît dans la dernière cellule de la table):
Bien sûr, vous pouvez passer des tables dans les formulaires. Vous pouvez simplement écrire par exemple
Sur votre navigateur actuel avec ses paramètres actuels, cela apparaîtra comme suit:
Les éléments de BR provoquent des sauts de ligne. Il est en grande partie une question de goût si vous préférez ce style à l'aide de tables. La principale différence dans la présentation typique est que lors de l'utilisation d'une table, les champs de saisie « aligner » formant une colonne. Et des feuilles de style ou les attributs dans les éléments de présentation relatif aux tables pourraient être utilisées pour suggérer les détails de la présentation.
Vous pouvez également faire de chaque paire de champs titre et élément de champ dans un paragraphe séparé, un élément P, par exemple
Sur votre navigateur actuel avec ses paramètres actuels, cela apparaîtra comme suit:
Bien que certaines personnes pourraient dire que ce serait gaspillage d'espace, l'utilisation d'un espace vertical vide (comme causé par la manière de navigateurs de présenter les paragraphes) n'est pas vraiment inutile.
Mais comme il pourrait faire valoir qu'un nom de domaine et un champ ne constituent pas un paragraphe, vous pouvez également utiliser des éléments DIV au lieu des éléments P. Cela introduirait sans espacement vertical supplémentaire.
Une façon de structurer une forme est l'élément FIELDSET.
Ce qui suit montre la présentation du formulaire sur votre navigateur actuel (à gauche) et sur IE 4 (à droite):
Il est également possible de combiner l'utilisation de FIELDSET avec l'utilisation d'une table à structurize par exemple un ensemble de boutons radio. Pour les boutons radio, et des cases à cocher, la méthode classique consiste à mettre le texte associé après que le bouton radio ou case à cocher. Cela est quelque peu illogique, mais si commun que les outils d'accessibilité pourraient gérer mieux que l'ordre logique. Exemple:
Il en résulte la présentation suivante sur votre navigateur actuel:
Il serait peut-être mieux (dans des cas comme celui-ci au moins, quand il y a un petit nombre d'alternatives) si la légende (qui est logiquement un titre pour l'ensemble des boutons radio) est apparu à la même ligne que les solutions de rechange. Mais la syntaxe de FIELDSET rend cela impossible: le premier élément, il doit être LÉGENDE. donc on ne peut pas organiser la légende et les boutons avec leurs étiquettes comme une ligne dans une table.
Pour des raisons d'accessibilité, et pour plus de clarté, il serait préférable de faire apparaître chaque option sur une ligne (ligne) de son propre, en utilisant la même approche que ci-dessus mais une table à une colonne au lieu d'une table à une rangée. Exemple:
Je l'ai souvent fait valoir qu'une telle construction est une table de structure (données tabulaires), pas une table de mise en page. Elle exprime la structure à deux dimensions des données sous la forme, y compris les champs de saisie. Mais beaucoup de gens sont en désaccord. Quoi qu'il en soit, nous allons examiner comment vous pourriez obtenir la mise en page sous forme de tableau pour une forme sans utiliser une table.
Il existe différentes approches, mais simple est comme ceci: En HTML, à l'intérieur d'un élément de forme, utilisez quelque chose comme
Cela fonctionne sans CSS, mais pas avec une belle mise en page. Pour la mise en page, vous pouvez utiliser les CSS pour suggérer une largeur commune pour les éléments de l'étiquette. Ceci est devinettes dans une certaine mesure, puisque vous voulez avoir une largeur suffisante pour toutes les étiquettes, mais pas plus large que nécessaire. Exemple:
Voici comment il ressemble sur votre navigateur: