Question Encore un autre problème Divs vs Tables: Forms


[Meta-note:] J'étais en train de parcourir la page des questions, de me lasser de "DIVS vs Tables" "Quand utiliser les tables vs DIVS" "Les Divs sont-ils meilleurs que les Tables" La même chose que les gens mais j'aimerais voir toutes les façons dont les gens abordent la traduction de l'exemple canonique de "pourquoi abandonner et utiliser des tableaux":

<table>
  <tr>
    <td> Name </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> Social Security Number </td>
    <td> <input> </td>
  </tr>
</table>

 Question:  Comment mieux mettre en œuvre (de manière sémantique, simple, robuste, fluide, portable) ce qui précède sans tableaux. Pour les débutants, je suppose qu'une implémentation naïve utilise une largeur de colonne fixe pour la première colonne, mais cela peut avoir des résultats différents pour le contenu généré dynamiquement. Y compris les forces / faiblesses de votre approche dans la réponse serait bien.

P.S. Un autre problème que je me pose est le centrage vertical jakpsatweb.cz

EDIT: scunlife montre un bon exemple de ce que je n’ai pas pensé au problème avec autant de soin. Les tables peuvent aligner plusieurs colonnes simultanément. La question se pose toujours (j'aimerais voir différentes techniques CSS utilisées pour l'alignement / la mise en page) - bien que des solutions puissent gérer les siennes? les exemples plus compliqués sont définitivement préférés.


12
2017-12-04 00:12


origine


Réponses:


Ce que je fais habituellement est:

<form>
 <label for="param_1">Param 1</label>
 <input id="param_1" name="param_1"><br />
 <label for="param_2">Param 2</label>
 <input id="param_2" name="param_2"><br />
</form>

et dans un CSS:

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

Bien sûr, vous devrez définir la largeur en fonction de vos données réelles :-)

  • Tout d'abord, donnez l'étiquette et l'entrée display: block, pour qu’on puisse lui attribuer une taille et l’aligner.
  • Ils ont tous deux float: left car Explorer fait les choses un peu différemment
  • Formatez l'étiquette bien
  • pirater le br de sorte qu'il y a un clear: left quelque part, et je me souviens que le mettre sur l'étiquette ne fonctionnait pas sur certains navigateurs.

De plus, avec le br vous obtenez une belle mise en forme même si le navigateur ne supporte pas CSS :-)


11
2017-12-04 00:21



L'astuce est que lorsque le formulaire devient plus compliqué que votre échantillon, vous vous rendez compte que les tables activent une "grille flexible" qu'aucun autre élément ne fait.

par exemple. Et si le "input" est plus compliqué qu'une zone de texte? par exemple. un tas de boutons radio, chacun avec son propre label:

Color: [____Red___][v]
 Hood: [*] 
 Size: (_) Small
       (_) Medium
       (_) Large
       (*) X-Large

Si tout ce dont vous avez besoin sont des formulaires simples, CSS est génial, mais dès que vous avez besoin d'une grille, les choses deviennent intéressantes ...

Si vous voulez vraiment faire ça, je vérifierais La solution de l'homme en bleu, ça marche plutôt bien et c'est très propre.


5
2017-12-04 00:36



Les gens parlent de tables qui affichent leurs formulaires comme ils veulent, c'est vrai, SEULEMENT si vous voulez afficher vos formulaires dans des colonnes et que vous voulez perdre le sens sémantique. Avec le code HTML suivant en place, il est possible d'afficher ce formulaire dans autant de mises en page que vous le souhaitez.

BTW - Non à la <br />

<form>
 <fieldset>
  <legend>Personal Info</fieldset>
  <div>
   <label for="name">Name</label>
   <input id="name" name="name" />
  </div>
  <div>
   <label for="ssn">Social Security Number</label>
   <input id="ssn" name="ssn" />
  </div>
 </fieldset>
</form>

Vous pouvez effacer le <divs> ou les mettre à overflow: hidden pour s'assurer que les flotteurs sont effacés.

Options du html ci-dessus:

Name |==============|    SSN |==============|

Name |==============|
SSN |==============|

Name     |==============|
SSN      |==============|

    Name |==============|
     SSN |==============|

   Name: |==============|
    SSN: |==============|

Name:
|==============|
SSN:
|==============|

Tout ce qui précède peut être accompli avec juste quelques lignes de CSS.

En ce qui concerne la radio, les cases à cocher et les boutons de soumission, cela devient un peu plus compliqué, mais le langage sémantique HTML propre peut être affiché comme vous le souhaitez en utilisant css.


3
2017-12-29 15:53



Bien que les autres suggestions soient probablement meilleures pour obtenir une présentation flexible, la réponse littérale à la question est quelque chose comme:

<form action="www.example.com">
    <div class="table">
        <div class="tbody">
          <div class="tr">
            <div class="td"> <label for="name">Name</label> </div>
            <div class="td"> <input id="name"> </div>
          </div>
          <div class="tr">
            <div class="td"> <label for="ssn">Social Security Number</label> </div>
            <div class="td"> <input id="ssn"> </div>
          </div>
        </div>
    </div>
</form>

avec

    <style type="text/css">
        div.table { display:table; border-spacing:2px; }
        div.tbody { display:table-row-group; }
        div.tr { display:table-row; }
        div.td { display:table-cell; vertical-align: middle; padding:1px; }
    </style>

Cela fonctionne avec les dernières versions de Firefox, Chrome, Opera et Safari. Il fonctionne également avec IE8 Beta 2 (mode standard). Il ne fonctionne pas avec IE7 ou antérieur, mais "amélioration progressive" et tout ça.


3
2017-12-29 17:14



Je pensais à quelque chose comme:

<div style="text-align:right; float:left;">
    Name: <input /> <br />
    Social Security Number: <input /> <br />
</div>

qui, si la colonne de droite est à longueur fixe, aligne OK avec la longueur du texte variable, mais je me demande quels sont les inconvénients de cette méthode?


0
2017-12-04 00:35