J'ai regardé en ligne pour des exemples de mise en œuvre du formulaire en utilisant des divs et tout ce que je vois est assez simple des formulaires de colonne. J'ai des formes assez complexes, voici une photo d'un:
http://img835.imageshack.us/img835/8292/formn.jpg
Il est facile de le faire fonctionner avec la table (que je fais), le seul problème que j'ai est que parfois J'ai commencé à faire des formes en utilisant des divs, mais ils tombent à part lorsque je change la taille de la fenêtre du navigateur et que ce n'est pas facile d'aligner les choses.
Ce sujet est utile:
Est-ce une mauvaise conception à utiliser Tags de table lors de l'affichage des formulaires en HTML?
Mais cela ne traite pas de certaines des préoccupations que j'ai.
Que proposeriez-vous comme une solution? Je peux supprimer de manière dynamique / insérer des valeurs dans la table ou essayer de faire les divs.
3 Réponses :
Je voudrais aller la route div. Tant que vous êtes prudent de vos largeurs lorsque vous appliquez des flotteurs, il est réellement assez simple d'obtenir les aménagements nécessaires pour fonctionner correctement dans différentes résolutions d'écran.
Voici quelques règles:
sur le balisage, vous pouvez utiliser les éléments de formulaire avec CSS pour créer une structure sémantique: et le CSS: vous pouvez Voir le résultat ici . < / p>
Il y a un problème avec cette solution - j'ai plusieurs formulaires de recherche et j'affiche le champ de recherche de manière dynamique et qui crée des lacunes lorsque je n'exprime pas l'un des champs et c'est le problème principal que j'essaie de résoudre. Votre solution ne déplacera pas les champs si je saute l'un des champs.
@ROMARIO Voulez-vous dire que si vous n'exprimez pas de champ dans une colonne, les champs ci-dessous ne progressent pas pour remplir l'écart?
Ensuite, vous devez ajuster le code de sorte que vous disposez de 2 colonnes flottées côte à côte dans le
S'il s'agit d'une table à largeur fixe, il est trivial de disposer avec des divs et des flotteurs. Il suffit de fixer chaque largeur pour exactement ce que vous voulez.
pour une disposition de la table de mise en page liquide et de la disposition de la disposition de liquide, il est beaucoup plus difficile d'organiser une forme sans affichage de style table, car Donc, dans des cas comme celui-ci, ce qui inclut certainement le type de formulaire à deux colonnes que vous avez posté, la Il n'y a pas de honte dans cela. Un formulaire est un peu semi-tabulaire de toute façon et il n'y a pas d'inconvénient d'accessibilité pratique car le contenu de la page reste commandé de manière appropriée.
Remarque: Pour les formulaires de mise en page de liquide, vous avez également le problème des champs de saisie de dimensionnement pour correspondre à l'élément parent. float et la position Ne laissez pas facilement les calculs comme "Cette cellule est la moitié de la largeur restante du parent, une fois que les étiquettes à largeur fixe ont été attribuées".
Tableau - * CSS affichage des valeurs est votre seule possibilité. Si vous ne visez que chez IE8 et les autres navigateurs modernes, vous pouvez utiliser des divs et définir Affichage: table-rund et al dans la feuille de style. Toutefois, pour la compatibilité avec IE6-7 et d'autres navigateurs plus anciens / mobiles / niches, vous devrez utiliser des
/ éléments, car seuls les navigateurs modernes prennent en charge la table-CSS indépendamment des éléments de table.
entrée {largeur: 100%; } le fait presque, mais pas tout à fait, car la largeur n'incluait pas la bordure ou le remplissage que les entrées obtiennent par défaut. Vous pouvez utiliser CSS3 COX-dimensionnement de la boîte et les versions spécifiques au navigateur pour se déplacer sur celle des navigateurs modernes, mais si vous voulez que cela alignent exactement le pixel sur IE6-7, vous auriez aussi. Pour utiliser le rembourrage sur les éléments parent égaux à la bordure / remplissage sur le champ de saisie de l'enfant.
0 commentaires
0
votes
Informations générales est une sorte de liste, clé> Liste de valeurs pour être exacte - serait probablement la meilleure structure pour elle
valeurs de problèmes est une table,
notes est une table,
Rédemption et Les indicateurs sont des listes - Listes non ordonnées
0 commentaires
J'ai oublié de mentionner - j'en ai besoin de travailler dans IE6-7, qui ajoute une certaine complexité, avec une largeur mineure Gimmicky et d'autres bugs.