Système de grille CSS pour les formulaires (multi-colonnes)

Question

Pour référence future, voici le résultat final avec une précision au pixel près :

Le code CSS :

._25 {
    width: 21%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._50 {
    width: 46%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._75 {
    width: 71%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._100 {
    width: 96%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
textarea {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
select {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}

Et quelques exemples de code HTML :

<div class="_50">
    <p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
</div>

<div class="_50">
    <p><label for="in_pass">Password</label><input id="in_pass" type="text" value=""/></p>
</div>

---

Récemment, j'ai commencé à utiliser les systèmes de grille CSS et je trouve le processus de conception d'une page Web beaucoup plus simple. J'essaie maintenant de styliser des éléments de formulaire, mais J'ai beaucoup de mal à créer des formulaires avec des colonnes. Prenons l'exemple suivant :

• div (largeur = 400px)
  • formulaire
    • ul
      • li .half
        • étiquette
        • entrée (devrait être de 200px de large)
      • li .half
        • une autre étiquette
        • une autre entrée (qui doit également avoir une largeur de 200px)

En fait, j'applique une classe dont l'attribut de largeur est de 50 %, mais si je mets les deux entrées côte à côte, la ligne est plus grande que 100 % (400px). les bordures, les marges et les paddings .

Existe-t-il un système de grille CSS que je puisse utiliser pour créer des formulaires à plusieurs colonnes tout en veillant à ce que tous les éléments du formulaire aient la même taille ? (entrées, sélections et zones de texte) ; par exemple, une entrée dans une colonne doit avoir 400px, tandis que deux colonnes doivent avoir 200px chacune.

EDIT : Wufoo a algunos exemples de ce que j'essaie de faire, mais je suis trop ignorant en matière de CSS pour comprendre tout ce code et j'apprécierais que quelqu'un puisse me donner quelques conseils.

Answer 1

Le système fluide 960 n'est pas nécessaire ici, à moins que vous ne souhaitiez que le formulaire s'étende et se contracte avec le navigateur.

Je recommanderais le bon vieux Système de grille 960 pour cela. La largeur de 960 est idéale pour les grilles, car elle est divisée de manière égale par 12 et 16, ce qui vous permet de créer des mises en page en trois ou quatre colonnes parfaites.

La meilleure façon de se familiariser avec le système de grille 960 est de regarder la css de la souce et la source de la Démonstration html

<div class="grid_6">
        <p>
            contact form
        </p>
    </div>

<div class="grid_3">
        <p>
            name
        </p>
    </div>

Answer 2

Cela peut aider :

http://www.websiteoptimization.com/speed/tweak/forms/

Je l'avais aussi dans mes favoris :

http://www.skyrocket.be/2006/01/09/semantic-horizontal-forms/

Answer 3

J'ai dû faire quelque chose de similaire et j'ai fini par régler mes demi-colonnes à 46 %. Cela laisse un peu d'espace supplémentaire pour le remplissage et permet d'obtenir des champs de saisie de taille cohérente.

Answer 4

Une réponse est Plan d'action . J'ai lu que vous ne pensiez pas que c'était la solution, mais c'est toujours la façon dont je procéderais. Toute la facilité des tableaux avec toute la puissance des CSS.

Avec Blueprint, les calculs sont assez simples. Disons que votre formulaire s'étend sur 10 colonnes.

<div id="contact-form" class="span-10">
  <h3>Contact Form</h3>
  <form action="contact">
  <div id="form-sec-1" class="span-5">
     <label>Name</label> <br/>
     <input type="text" name="name" /> <br/>
     <label>ZIP code</label> <br/>
     <input type="text" name="zipcode" />
  </div>
  <div id="form-sec-2" class="span-5 last">
     <label>Email</label> <br/>
     <input type="text" name="email" /> <br/>
     <label>Country</label> <br/>
     <input type="text" name="country" />
  </div>
  <div id="form-sec-3" class="span-10 last">
     <label>Message</label> <br/>
     <textarea name="message" />
  </div>
  <div id="form-sec-4" class="span-8">
    <input type="checkbox" name="copy"/>
    <label>Send me a copy</label>
  </div>
  <div id="form-sec-5" class="span-2">
     <input type="submit"/>
  </div>
  </form>
</div>

Answer 5

Oh wow, j'étais en train de me demander ce qui se passe dans le monde du css, puis j'ai vu ce projet d'éditeurs de grille css, http://dev.w3.org/csswg/css3-grid-align/

Je n'arrive toujours pas à expliquer pourquoi le monde css n'a pas vraiment réfléchi à ce genre de choses, quelle explication peut-on donner à l'absence d'une telle fonctionnalité dans css.