Ein Webformular ohne Tabellen
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Formularfelder und deren Beschriftungen sollen zeilenweise dargestellt werden, ohne dass Tabellen verwendet werden. Dabei soll das Layout allein mit Hilfe von CSS erstellt werden, ohne dass dabei Präsentations-Markup eingesetzt wird.
Lösung
Im ersten Schritt legen Sie die Eingabefelder (input) und deren Beschriftungen (label) an (siehe nächste Abbildung):
<form action="login.php" method="post">
<label for="uname">Benutzername</label>
<input type="text" name="uname" id="uname" value="" />
<br />
<label for="pword">Passwort</label>
<input type="text" name="pword" id="pword" value="" />
<br />
<label for="recall">Daten merken?</label>
<input type="checkbox" name="recall" id="recall" class="checkbox" />
<br />
<input type="submit" name="Submit" value="Abschicken" class="buttonSubmit" />
</form>
Abbildung: Darstellung des Formulars ohne Stildefinitionen.
Im nächsten Schritt legen Sie anhand der Eigenschaften display und label fest, dass label-Elemente als Block-Elemente angezeigt werden sollen. In der gleichen Regel wird die Beschriftung per Definition nach links "gefloatet", während der Text rechts ausgerichtet wird (siehe folgende Abbildung):
input {
display: block;
width: 175px;
float: left;
margin-bottom: 10px;
}
label {
display: block;
text-align: right;
float: left;
width: 75px;
padding-right: 20px;
}
.checkbox {
width: 1em;
}
br {
clear: left;
}
.buttonSubmit {
width: 100px;
margin-left: 95px;
}
Abbildung: Darstellung des Formulars mit Stildefinitionen.
Diskussion
Für die Elemente input und label wird für die Eigenschaft display der Wert block festgelegt, wodurch beide Elemente als Block-Elemente dargestellt werden. Dadurch kann für den Beschriftungstext eine Breite festgelegt werden. Anstatt die input-Elemente zu überlagern, werden die Beschriftungen per Definition als Float nach links verschoben. Da alle Beschriftungen die gleiche Breite besitzen, ist ihr Aussehen im gesamten Formular gleich.
Durch das br-Tag werden die einzelnen aus label und form bestehenden Zeilen voneinander getrennt. Gleichzeitig wird verhindert, dass Elemente im Formular, die nach dem auf die Beschriftung passenden Eingabefeld stehen, ebenfalls gefloatet werden.
Siehe auch
- Die HTML 4.1-Spezifikation für weitere Informationen zum Element label,
- die CSS 2.1-Spezifikation zur Eigenschaft float und
- die CSS 2.1-Spezifikation zur Eigenschaft clear.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln