CSS-Gittersystem für Formulare (mehrspaltig)

Question

Für die Zukunft sehen Sie hier das Endergebnis mit pixelgenauer Präzision:

Der CSS-Code:

._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;
}

Und einige Beispiele für HTML-Code:

<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>

---

Seit kurzem verwende ich CSS-Rastersysteme, und ich finde den gesamten Prozess der Gestaltung einer Webseite viel einfacher. Jetzt versuche ich, Formularelemente zu stylen, aber Ich habe wirklich Schwierigkeiten, Formulare mit Spalten zu erstellen Nehmen Sie das folgende Beispiel:

• div (Breite = 400px)
  • Formular
    • ul
      • li .halb
        • Etikett
        • Eingabe (sollte 200px breit sein)
      • li .halb
        • anderes Etikett
        • eine weitere Eingabe (sollte ebenfalls 200px breit sein)

Grundsätzlich wende ich eine Klasse an, die ein Breitenattribut von 50% hat, aber wenn ich beide Eingaben nebeneinander stelle, wird die Zeile größer als 100% (400px) - ich schätze, das liegt an der Rahmen, Ränder und Abstände .

Gibt es ein CSS-Rastersystem, das ich verwenden kann, um mehrspaltige Formulare zu haben, während alle Formularelemente immer noch die gleiche Größe haben (Inputs, Selects und Textareas); z.B. 1 Input in 1 Spalte sollte 400px haben, während 2 Spalten jeweils 200px haben sollten.

EDIT: Wufoo hat einige Beispiele von dem, was ich versuche zu tun, aber ich bin zu unwissend in CSS zu verstehen, dass alle Code und ich würde es begrüßen, wenn jemand mir einige Hinweise geben könnte.

Answer 1

Erstens: Verwenden Sie keine Tabelle. Das Einfügen von Formularelementen in eine Tabelle löst Ihr Problem nicht und erschwert die Pflege. Die Verwendung von Tabellen zur Ergänzung der Formulardarstellung ist ein Zeichen von Inkompetenz und Komplexität. Außerdem ist es völlig unsemantisch. Stattdessen müssen Sie vielleicht sogar etwas CSS schreiben. Ehrlich gesagt, wenn Sie Tabellen für nicht-tabellarische Daten verwenden, dann machen Sie sich gar nicht erst die Mühe, CSS zu verwenden, denn das vervielfacht die Komplexität der Wartung.

Hier sind einige Dinge zu beachten:

1) Definieren Sie alle Ihre Einheiten in "em"-Einheiten. Die meisten Formularelemente sind dazu bestimmt, Text zu enthalten. Diese Elemente, wie Textfelder und Textarea-Blöcke, können im Sinne der Barrierefreiheit vergrößert und verkleinert werden. Das bedeutet, dass Ihr pixelperfektes, hübsches CSS-Raster in dem Moment zerbricht, in dem ein Benutzer die Textgröße auf der Seite ändert.

2) Wickeln Sie Ihr Formularelement nicht in ein div ein. Wie ein div ist auch Ihr Formular ein Element auf Blockebene. Sofern das Formular keine gleichrangigen Knoten unter einem übergeordneten div hat, leiten Sie die Darstellung direkt auf das Formularelement und nicht auf ein übergeordnetes Element, das nur existiert, um das Formular zu enthalten.

3) Gruppieren Sie Ihre Formularelemente. Wenn Sie Textfelder gruppieren, können die Dinge durcheinander geraten, wenn die Formulare unabhängig von ihren jeweiligen Beschriftungselementen gruppiert sind. Es ist einfacher, eine geordnete Liste in das Formular einzufügen und dann jedes Formularelement in ein Listenelement zu verpacken. Auf diese Weise müssen Sie sich nur um das Layout des Beschriftungselements in Bezug auf das zugehörige Formularsteuerelement kümmern und dann das Layout der beiden Elemente zusammen festlegen, indem Sie die Darstellung des Listenelements definieren. Diese Methode ist auch semantisch und informiert die Textleser über die Reihenfolge der Steuerelemente Ihres Formulars.

4) Verwenden Sie nicht die Deklaration !important. Dies sorgt für eine schnelle Lösung in Ihrem CSS, bringt aber die Vererbung völlig durcheinander und erschwert die Wartung erheblich. Nehmen Sie sich stattdessen die Zeit, Ihren Code beim ersten Mal richtig zu schreiben, damit die künftige Wartung ein schnelles und unbedeutendes Ereignis ist.

5) Verwenden Sie nicht die absolute Position, es sei denn, Sie wissen wirklich, was Sie tun, auch wenn Ihr Formular auf relative Position eingestellt ist. Die absolute Position führt in vielen Fällen zu unerwartetem Verhalten und unerwarteten Problemen.

6) Um sicherzustellen, dass Ihr CSS-Code tatsächlich ein echtes Raster definiert, verwenden Sie das Firefox MeasureIt-Plug-in. Es hilft Ihnen, eine erstaunliche Genauigkeit zu erreichen und spart Ihnen unglaublich viel Zeit bei der Erstellung Ihres Rasters.

7) Machen Sie alles beim ersten Mal richtig und verwenden Sie so wenig Code wie nötig, um die Aufgabe zu erledigen und Ihr Formular perfekt zu präsentieren. Testen Sie Ihr Formular erst dann auf browserübergreifende Genauigkeit. Nehmen Sie jeweils eine Korrektur für die browserübergreifende Genauigkeit vor, um Ihren CSS-Code nicht unnötig aufzublähen.

Answer 2

So etwas könnte helfen. So habe ich es mit einem Formular gemacht. Es bedarf allerdings einer gewissen Feinabstimmung, damit es in der gewünschten Breite funktioniert. Dies könnte Ihnen helfen, den Anfang aber.

Der 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;}

Das 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 3

Hier ist ein einfaches Beispiel für einen Startschuss, das vielleicht von Nutzen ist:

<!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>

Beachten Sie, dass ich links schwimmende divs von halber Breite anstelle von ungeordneten Listenelementen verwende.

Da Sie auf der Verwendung von Prozentsätzen bestehen, sollten Sie nicht erwarten, dass sie in allen Browsern pixelgenau sind. Wenn Sie alles pixelgenau haben wollen, müssen Sie wirklich Pixel verwenden.

Answer 4

Ich glaube, das ist es, wonach Sie suchen:

http://www.alistapart.com/articles/prettyaccessibleforms/

Das sollte helfen, Ihre Struktur etwas zu vereinfachen. Es wird nicht explizit beschrieben, wie man mehrspaltige Formulare erstellt, aber die Technik könnte mit etwas Kreativität Ihrerseits wahrscheinlich darauf erweitert werden.

Answer 5

Das Fluid 960-System ist hier nicht erforderlich, es sei denn, Sie möchten, dass sich das Formular mit dem Browser ausdehnt und zusammenzieht.

Ich würde die normale alte 960 Rastersystem für diese. Die Breite von 960 eignet sich hervorragend für Raster, da sie gleichmäßig durch 12 und 16 geteilt wird, wodurch Sie pixelgenaue drei- und vierspaltige Layouts einrichten können.

Der beste Weg, um sich mit dem 960 Grid-System vertraut zu machen, ist ein Blick auf die Source-Css und die Quelle der html-Demo

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

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