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

Regardez ça : http://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html

il y a tout ce que vous devez savoir, y compris l'api css et les templates

EDIT : voici ma solution finale avec le modèle css de fluid960

Et voici un exemple graphique . Bien sûr, vous pouvez facilement changer les couleurs en modifiant le css.

Answer 2

Tout d'abord, n'utilisez pas de tableau. Mettre des éléments de formulaire dans un tableau ne résout pas votre problème et complique votre maintenance. Utiliser des tableaux pour compléter la présentation des formulaires est un signe d'incompétence et de complexité. C'est également totalement non-sémantique. Au lieu de cela, vous pourriez avoir à écrire quelques CSS. Honnêtement, si vous utilisez des tableaux pour des données non tabulaires, ne vous donnez même pas la peine d'utiliser des CSS, car cela multiplie la complexité de la maintenance.

Voici quelques éléments à garder à l'esprit :

1) Définissez toutes vos unités en unités "em". La plupart des éléments de formulaire sont destinés à contenir du texte. Ces éléments, comme les champs de texte et les blocs de zone de texte, peuvent être agrandis ou réduits pour des raisons d'accessibilité. Cela signifie que votre jolie grille CSS au pixel près se brisera dès qu'un utilisateur modifiera la taille du texte sur la page.

2) N'enfermez pas votre élément de formulaire dans un div. Comme un div, votre formulaire est un élément de niveau bloc. À moins que le formulaire ne comporte des nœuds pairs sous un div parent, il suffit de diriger toute présentation directement vers l'élément de formulaire et non vers un élément parent qui n'existe que pour contenir le formulaire.

3) Regroupez les éléments de votre formulaire. Si vous faites flotter des champs de texte, les choses peuvent se gâter si les formulaires sont flottés indépendamment de leurs éléments d'étiquette respectifs. Il sera plus facile de placer une liste ordonnée à l'intérieur de votre formulaire, puis d'envelopper chaque élément de formulaire dans un élément de liste. De cette façon, vous n'aurez à vous soucier que de la mise en page de l'élément d'étiquette par rapport à son contrôle de formulaire, puis de la mise en page de l'ensemble en définissant la présentation de l'élément de liste. Cette méthode est également sémantique et informe les lecteurs de texte d'un ordre sur vos contrôles de formulaire.

4) N'utilisez pas la déclaration !important. Cela permet d'apporter une solution rapide à votre CSS, mais gâche complètement l'héritage et complique considérablement la maintenance. Prenez plutôt le temps d'écrire votre code correctement dès la première fois, afin que la maintenance future soit rapide et mineure.

5) N'utilisez pas la position absolue, sauf si vous savez vraiment ce que vous faites, même si votre formulaire est réglé sur la position relative. La position absolue entraîne des comportements inattendus dans de nombreux cas et des problèmes inattendus.

6) Pour vous assurer que votre code CSS définit effectivement une vraie grille, utilisez le plug-in MeasureIt de Firefox. Il vous aidera à obtenir une précision étonnante et vous fera gagner un temps fou lors de la création de votre grille.

7) Faites tout correctement dès la première fois en utilisant aussi peu de code que nécessaire pour effectuer le travail et présenter votre formulaire parfaitement. Ce n'est qu'ensuite que vous testerez votre formulaire pour vérifier son exactitude dans les différents navigateurs. Apportez une seule correction à la fois pour limiter l'alourdissement inutile de votre code CSS.

Answer 3

Quelque chose comme ceci peut aider. C'est ainsi que je l'ai fait sur un formulaire. Il faudra cependant l'ajuster pour qu'il fonctionne à la largeur souhaitée. Mais cela peut vous aider à démarrer.

Le CSS :

.contact ul {margin:0; padding:0; list-style:none;}
.contact li {margin-bottom:10px; overflow:hidden;}
.contact label {display:block; margin-bottom:2px;}
.contact label span {color:#999;}
.contact .input {width:592px; border:1px solid #E0E0E0; background:#F6F6F6;}
.contact select.input {border:1px solid #E0E0E0; background:#F6F6F6;}
.contact .third {float:left; width:193px; margin-right:10px;}
.contact .third .input {width:185px;}
.contact .half {float:left; width:294px; margin-right:10px;}
.contact .half .input {width:286px;}
.contact .half select.input {width:294px;}
.contact .omega {margin-right:0;}

Le HTML :

<form action="/contact-us" method="post" class="contact">
    <ul>
        <li>
            <div class="half">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" class="input" />
            </div>
        </li>
        <li>
            <label for="address">Address:</label>
            <input type="text" id="address" name="address" class="input" />
        </li>
        <li>
            <div class="third">
                <label for="city">City:</label>
                <input type="text" id="city" name="city" class="input" />
            </div>
            <div class="third">
                <label for="state">State:</label>
                <input type="text" id="state" name="state" class="input" />
            </div>
            <div class="third omega">
                <label for="zip">Zip:</label>
                <input type="text" id="zip" name="zip" class="input" />
            </div>
        </li>
    </ul>
</form>

Answer 4

Voici un cadre de formulaires CSS qui fait ce que vous avez demandé : http://www.formee.org/demo/index.htm

Answer 5

Voici un exemple de démarrage de base qui peut vous être utile :

<!doctype html>
<html lang="en">
    <head>
        <style>
            fieldset { width: 400px; padding: 1%; }
            input[type=text], select, textarea { width: 98%; }
            .half { float: left; width: 48%; padding: 1%; }
            .full { clear: both; width: 98%; padding: 1%; }
            .right { text-align: right; }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>Contact form</legend>
            <form>
                <div class="half">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name">
                </div>
                <div class="half">
                    <label for="email">Email</label>
                    <input type="text" id="email" name="email">
                </div>
                <div class="half">
                    <label for="zip">Zip / Postal code</label>
                    <input type="text" id="zip" name="zip">
                </div>
                <div class="half">
                    <label for="country">Country</label>
                    <select id="country" name="country"><option></option></select>
                </div>
                <div class="full">
                    <label for="message">Message</label>
                    <textarea id="message" name="message"></textarea>
                </div>
                <div class="half">
                    <input type="checkbox" id="copy" name="copy">
                    <label for="copy">Send me a copy</label>
                </div>
                <div class="half right">
                    <input type="submit" value="send">
                </div>
            </form>
        </fieldset>
    </body>
</html>

Notez que j'utilise des div's de demi-largeur flottant à gauche au lieu d'éléments de liste non ordonnés.

Comme vous insistez pour utiliser des pourcentages, ne vous attendez pas à ce qu'il soit parfait au pixel près dans tous les navigateurs. Si vous voulez que tout soit parfait au pixel près, vous devez vraiment utiliser des pixels.