<form id="myForm" action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice" id="radio-choice-1" tabindex="2" value="choice-1">
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice" id="radio-choice-2" tabindex="3" value="choice-2">
</div>
<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>Beispiel-Formular-Markup
Chris Coyier am
Ich packe die Eingabe normalerweise in ein Label, um es einfacher zu machen.
Das funktioniert zwar nicht in IE6, aber das kümmert niemanden (auch meine Kunden nicht).
Ant ist nicht einfacher, denn wenn man das Formular stylen möchte, wird es komplizierter und weniger zugänglich, semantisch. Verwenden Sie einfach "for" und Sie haben mehr Optionen zum Stylen.
Nur eine Beobachtung.
Das ist, was ich normalerweise benutze
Das Hauptziel dieses Markups ist Konsistenz. Mit diesem Markup können Sie Ihr Formular in fast jeder Konfiguration stylen (z. B. Label links, Label oben, Label rechts).
Sie können auch die Wrapper-Klassen verwenden, um Eingaben und ihre Labels je nach Typ (Auswahlfelder, Kontrollkästchen, Text) unterschiedlich zu stylen. Oder basierend auf dem Zustand (Fehler, gültig, erforderlich).
Der Nachteil ist, dass es ziemlich viel zusätzlichen Markup gibt, den man vielleicht nicht immer verwendet. Persönlich denke ich, dass es sich für die Konsistenz lohnt.
Warum nicht jedes Radio-/Label-Paar in ein neueres div einpacken, um sie stärker zu binden?
Hallo,
Ich habe einige Vorschläge
Was wäre damit, das Markup mit CSS-Styles zu vervollständigen, damit es wahrscheinlich mit allen Geräten funktioniert?
Insbesondere welche Breite wird für typische Eingaben wie Name und Unternehmen empfohlen?
Kennt jemand gute Beispiele?
Divs in einem Formular? Warum?
Vielleicht macht Chris das nur, um die verschiedenen Formularelemente zu Demonstrationszwecken zu trennen?
Idealerweise würde man das Formular nicht mit zusätzlichen divs überladen.
Sie können ein Formular ganz einfach mit inhärenten Formularelementen im CSS layouten
form {}
form fieldset { }
form fieldset label {}
form fieldset input {}
form fieldset input[type=radio] {}
form fieldset input[type=checkbox] {}
// Für Ja / Nein oder Geschlecht = M / F Art von Fragen //
form fieldset fieldset {}
form fieldset fieldset legend {}
form fieldset fieldset label {}
form fieldset fieldset input[type=radio] {}
Das Stylen von Formularen mit NUR den Formularelementen ist einfach (abhängig von der Komplexität Ihres Formulars - und ich habe einige SEHR komplexe Formulare auf diese Weise erstellt) UND macht viel Spaß!
Probieren Sie es aus. Seien Sie nicht faul und greifen Sie zu divs!
Wunderbar! Genau das, was ich gesucht habe... sehr cool. Danke.
Die Verwendung von tabindex in diesem Beispiel sollte entfernt werden. Das explizite Setzen von tabindex auf einen Wert größer als 0 ist fast immer eine schlechte Idee, da dies zu Verwirrung bei Personen führen kann, die eine Website nur mit der Tastatur navigieren. Die Quellreihenfolge sollte in den meisten Fällen ausreichen.
Die Verwendung einer Überschrift der vierten Ebene (h4) ist für ein generisches Codebeispiel möglicherweise nicht die beste Wahl, da sie die Position in der Dokumentengliederung bestimmt. Ich versuche nicht, pingelig zu sein, werfe es nur ein, falls jemand das Beispiel liest und davon ausgeht, dass der richtige Platz für ein h4 in einem Formular als Titel ist.
(Offensichtlich sollte ein h4 verwendet werden, wenn es innerhalb des Dokuments angemessen ist)
Prost!
Andrew
Tolle Kommentare,
Habe ich den Teil verpasst, wo wir "label" und "input" Tags verwenden und mit CSS3 ausrichten? Die meisten Lesematerialien sagen, man soll Tabellen zum Gestalten von Formularen meiden. Ich versuche, das zu tun, aber ich kann nicht dieselbe ordentliche Ausrichtung erreichen, die man mit "Tabelle" bekommen würde.
Gedanken und Eingaben willkommen
Grüße und danke
Formulare sind keine tabellarischen Daten, daher sollten sie nicht zur Layoutgestaltung in Tabellen gesetzt werden. Wenn Sie einige der Layout-Tricks benötigen, die Tabellen bieten, können Sie display: table, display: table-cell usw. verwenden. Hoffe, das hilft. :)