Est-ce une mauvaise conception d’utiliser des balises de table lors de l’affichage de formulaires en HTML?
https://stackoverflow.com/questions/109488
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je continue à entendre que les balises div doivent être utilisées à des fins de mise en page et non les balises table. Cela s'applique-t-il également à la mise en page? Je sais qu'une disposition de formulaire est toujours une disposition, mais il semble que créer des dispositions de formulaire avec html s nécessite plus css et <=>. En gardant cela à l'esprit, la mise en forme des formulaires doit-elle utiliser <=> balises à la place?
La solution
Oui, cela s'applique aux dispositions de formulaire. N'oubliez pas qu'il existe également des balises telles que FIELDSET et LABEL, qui existent spécifiquement pour ajouter de la structure à un formulaire. Il n'est donc pas vraiment question d'utiliser simplement DIV. Vous devriez être en mesure de baliser un formulaire avec du code HTML plutôt minimal et laisser CSS faire le reste du travail. Exemple:
<fieldset>
<div>
<label for="nameTextBox">Name:</label>
<input id="nameTextBox" type="text" />
</div>
...
</fieldset>
Autres conseils
Je pense que c'est un mythe que les formes sont & "difficiles &"; pour bien mettre en page avec HTML et CSS. Le niveau de contrôle que CSS vous donne sur votre mise en page va bien au-delà de toute mise en page maladroite basée sur des tableaux. Ce n'est pas une idée nouvelle, comme ce Smashing Article de magazine publié il y a peu de temps en 2006.
J'ai tendance à utiliser des variantes du balisage suivant dans mes formulaires. J'ai un style .form générique dans mon CSS, puis des variantes pour les entrées de texte, les cases à cocher, les sélections, les zones de texte, etc., etc.
.field label {
float: left;
width: 20%;
}
.field.text input {
width: 75%;
margin-left: 2%;
padding: 3px;
}<div class="field text">
<label for="fieldName">Field Title</label>
<input value="input value" type="text" name="fieldName" id="fieldName" />
</div>
Les tables ne sont pas mauvaises. Ils constituent de loin la meilleure option lorsque des données tabulaires doivent être affichées. Les formulaires IMHO ne sont pas des données tabulaires - ce sont des formulaires, et CSS fournit suffisamment d’outils pour mettre en forme les formulaires comme bon vous semble.
Si vous avez simplement besoin d’une disposition de type poignée de colonne de rangée, vous ne devriez pas vous sentir coupable d’utiliser des tableaux. Je ne sais pas comment quiconque peut appeler cela un «mauvais design» simplement parce que ce n'est pas du CSS. J'ai vu de nombreux nombreux mauvais modèles basés sur CSS. J'adore les CSS et je pense qu'elles sont bien supérieures, à bien des égards, aux dispositions de tables imbriquées traditionnelles, mais je fais ce qui fonctionne le mieux et ce qui est le plus facile à maintenir et à passer aux décisions plus importantes et plus percutantes.
Le principe général est que vous souhaitez utiliser les éléments HTML qui véhiculent le mieux le contenu sémantique que vous souhaitez utiliser, puis vous fier à CSS pour représenter visuellement ce contenu sémantique. Suivre ce principe offre de nombreux avantages intrinsèques, notamment des modifications visuelles générales du site, l’optimisation des moteurs de recherche, la disposition de plusieurs appareils et l’accessibilité.
La réponse courte est donc la suivante: vous pouvez faire ce que vous voulez, mais les meilleures pratiques suggèrent de n'utiliser que des balises de tableau pour représenter des données tabulaires et d'utiliser celles qui traduisent le mieux ce que vous essayez de représenter. Ce sera peut-être un peu plus difficile au début, mais une fois que vous serez habitué à l'idée, vous vous demanderez pourquoi vous l'avez fait autrement.
En fonction de ce que vous essayez de faire avec votre formulaire, l'utilisation de balisage sémantique et de css ne devrait pas demander beaucoup plus de balisage, en particulier si vous vous basez sur les propriétés en cascade de css. De plus, si vous avez plusieurs pages du même formulaire sur plusieurs pages de votre site, l’approche sémantique est beaucoup plus efficace, à la fois pour le code et pour la maintenance.
Pour rendre les formulaires aussi accessibles que possible et sémantiquement corrects, j'utilise le format suivant:
<fieldset>
<ol>
<li>
<label for='text_field'>Text Field</label>
<input type='text' name='text_field' id='text_field' />
</li>
</ol>
</fieldset>
J'utilise CSS principalement jusqu'à ce que CSS devienne un glisser-déposer. Par exemple, il est beaucoup plus facile de créer un formulaire de 3 colonnes ou plus (3 ensembles d'étiquette + champ de formulaire) à l'aide d'une table qu'en css. Je n'arrivais pas à obtenir une mise en page correcte dans tous les principaux navigateurs utilisant du css pur et je passais trop de temps à le faire fonctionner. Alors j'ai dit de le visser et je l'ai fait facilement en utilisant une table. Les tables ne sont pas mauvaises.
C'est une zone grise. Tout le balisage n’a pas des limites clairement définies, et c’est un cas où vous devez utiliser vos préférences personnelles et faire appel à votre jugement. Cela ne correspond pas tout à fait à l'idée d'organiser les données, mais les cellules sont liées sur plusieurs axes, et c'est la règle empirique que j'utilise pour décider si quelque chose s'inscrit dans un tableau ou non.
Il est certainement plus facile d'utiliser table que div pour mettre en forme une table, mais gardez à l'esprit qu'une table est censée avoir une signification, c'est présenter des données de manière régulière pour que l'utilisateur puisse les voir, bien plus que de mettre des cases à l'écran un ordre donné. De manière générale, je pense que les mises en forme de formulaires doivent utiliser des divisions pour décider de la manière dont les éléments de formulaire sont affichés.
Une chose que je ne vois pas souvent dans les questions de mise en forme, si vous avez choisi un tableau pour mettre en forme votre formulaire (avec les étiquettes à gauche et les champs à droite comme indiqué dans l'une des réponses), puis cette mise en page est corrigée. Au travail, nous avons récemment dû faire une rapide démonstration du concept de nos applications Web en arabe. Les applications qui utilisaient des tableaux pour la mise en forme des formulaires étaient fondamentalement bloquées, alors que j’étais capable d’inverser l’ordre de tous les champs et étiquettes des formulaires sur toutes mes pages en modifiant une dizaine de lignes dans mon fichier CSS.
Si vos formulaires sont présentés sous forme de tableau (par exemple, les libellés à gauche et les champs à droite), utilisez les balises de tableau.
Un formulaire n'est pas & "Présentation &", vous demandez des données, vous ne présentez généralement pas de données. J'utilise beaucoup l'édition en ligne dans les données tabulaires. Évidemment, j’utilise les cellules de données - td comme supports des éléments d’entrée lors du passage de la présentation à l’entrée.
La plupart des réponses que j'ai vues ici semblent appropriées. La seule chose que j'ajouterais, en particulier à Apathetic ou à M. Matt, est d'utiliser <dl>/<dt>/<dd>. Je crois que ceux-ci représentent la liste sémantiquement.
<dl>
<dt><label for="nameTextBox">Name:</label></dt>
<dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>
Vous voudrez peut-être reformuler ces styles, mais ceci indique sémantiquement ce qui se passe, c'est-à-dire que vous avez une liste de & "termes &"; (<dt>) et " définitions " (<dd>), le terme étant l'étiquette et la définition étant la valeur entrée par l'utilisateur.
