Designbeispiel: ein Registrierungsformular
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Bei manchen Formularen bietet es sich an, die form-Elemente in einer zweispaltigen Tabelle anzulegen, bei der eine Spalte die Felder und die andere die Beschriftungen enthält. Im folgenden Beispiel sehen Sie den Code. Die nächste Abbildung zeigt das Formular ohne Stildefinitionen.
Beispiel: Formular mit Stil.
<form action="registration.cfm" method="post">
<table cellspacing="0">
<tr class="header">
<th colspan="2">Informationen zum Benutzerkonto</th>
</tr>
<tr class="required">
<th scope="row">Login-Name*</th>
<td><input name="uname" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Passwort*</th>
<td><input name="pword" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Passwort bestätigen* </th>
<td><input name="pword2" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">E-Mail-Adresse*</th>
<td><input name="email" type="text" /></td>
</tr>
<tr class="required">
<th scope="row">E-Mail-Adresse bestätigen*</th>
<td><input type="text" name="email2" /></td>
</tr>
<tr class="header">
<th colspan="2">Informationen zur Person</th>
</tr>
<tr class="required">
<th scope="row">Vorname*</th>
<td><input name="fname" type="text" size="11" /></td>
</tr>
<tr class="required">
<th scope="row">Nachname*</th>
<td><input name="lname" type="text" size="11" /></td>
</tr>
<tr class="required">
<th scope="row">Adresse 1*</th>
<td><input name="address1" type="text" size="11" /></td>
</tr>
<tr>
<th scope="row">Adresse 2</th>
<td><input type="text" name="address2" /></td>
</tr>
<tr class="required">
<th scope="row">Stadt*</th>
<td><input type="text" name="city" /></td>
</tr>
<tr class="required">
<th scope="row">Bundesland*</th>
<td>
<select name="state">
<option selected="selected" disabled="disabled">Auswählen</option>
<option value="hamburg">Hamburg</option>
</select>
</td>
</tr>
<tr class="required">
<th scope="row">PLZ*</th>
<td><input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" /></td>
</tr>
<tr class="required">
<th scope="row">Land*</th>
<td><input type="text" name="country" id="country" /></td>
</tr>
<tr class="required">
<th scope="row">Geschlecht*</th>
<td><input type="radio" name="sex" value="female" />Weiblich <input type="radio" name="sex" value="male" />Männlich</td>
</tr>
<tr class="header">
<th colspan="2">Weitere Informationen</th>
</tr>
<tr>
<th scope="row">Jahreseinkommen</th>
<td>
<select name="income" size="1" >
<option selected="selected" disabled="disabled">Auswählen</option>
<option value="notsay">Verrate ich nicht!</option>
</select>
</td>
</tr>
<tr>
<th scope="row">Interessen</th>
<td><input name="interests" type="checkbox" value="shopping-fashion" />Einkaufen/Mode <input name="interests" type="checkbox" value="sports" />Sport <input name="interests" type="checkbox" value="travel" />Reisen</td>
</tr>
<tr>
<th scope="row">Augenfarbe</th>
<td><input name="eye" type="checkbox" value="red" />Rot <input name="eye" type="checkbox" value="green" />Grün <input name="eye" type="checkbox" value="brown" />Braun <input name="eye" type="checkbox" value="blue" />Blau-Golden</td>
</tr>
</table>
<input type="submit" name="Submit" value="Abschicken" id="buttonSubmit" />
<input type="reset" name="Submit2" value="Formular löschen" id="buttonReset" />
</form>
Abbildung: Formular und Tabelle ohne Stildefinitionen.
Das erste Element, für das Stildefinitionen angelegt werden müssen, ist das table-Element selbst. Hierfür wird mit Hilfe der Eigenschaft border-collapse festgelegt, wie die Rahmen zwischen den einzelnen Tabellenzellen dargestellt werden sollen. Gleichzeitig werden Farbe und Rahmen für die Tabelle definiert (siehe folgende Abbildung):
Abbildung: Die Tabelle hat einen Rahmen erhalten.
Im nächsten Schritt wird die Darstellung der Zellen mit den Beschriftungen (hier als th-Elemente) festgelegt (siehe nächste Abbildung). Die Beschriftungszellen erhalten eine Breite von 200 Pixeln, ihr Inhalt wird rechts ausgerichtet. Als Zeichensatz wurde hier Verdana mit einer Größe von 0,7 em-Einheiten gewählt:
th {
width: 200px;
text-align: right;
vertical-align: top;
border-top: 1px solid black;
font-family: Verdana;
font-size: 0.7em;
}
Abbildung: Tabellenzellen für die Beschriftungen mit Stildefinitionen.
Als Nächstes werden die Beschriftungszellen noch mit Innenabständen versehen (siehe nächste Abbildung):
th {
width: 200px;
text-align: right;
vertical-align: top;
border-top: 1px solid black;
font-family: Verdana;
font-size: 0.7em;
padding-right: 12px;
padding-top: 0.75em;
padding-bottom: 0.75em;
}
Abbildung: Die Tabellenzellen für die Beschriftungen mit Innenabständen.
Es folgen die Stildefinitionen für die Zellen der rechten Tabellenspalte. Um den Unterschied zwischen der linken und rechten Spalte deutlicher hervorzuheben, erhalten die rechten Zellen einen schwarzen Hintergrund. Um den Übergang beim Lesen von links nach rechts etwas weicher zu gestalten, werden die linken Rahmenseiten dieser Zellen grau eingefärbt (siehe nächste Abbildung):
td {
vertical-align: middle;
background-color: black;
border-bottom: 1px solid white;
color: white;
border-left: 4px solid gray;
padding: 4px;
font-family: Verdana;
font-size: .7em;
}
Abbildung: Die rechten Tabellenzellen mit angewandten Stildefinitionen.
Um die Registrierung durchzuführen, müssen bestimmte Felder auf jeden Fall ausgefüllt werden. Um das zu verdeutlichen, wird für diese Zellen die Textfarbe auf Rot gesetzt (siehe nächste Abbildung):
.required {
color: red;
}
Abbildung: Die benötigten Felder werden mit rotem Text dargestellt.
Um die Abschnittsüberschriften besser vom übrigen Text zu unterscheiden, sollen diese in Großbuchstaben und mit einer etwas höheren Schriftgröße dargestellt werden (siehe nächste Abbildung):
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
}
Abbildung: Die angepassten Überschriften für die Formularabschnitte.
Danach werden die Abschnittsüberschriften so verschoben, dass sie über der zweiten Tabellenspalte angezeigt werden. Um die Platzierung zu berechnen (in unserem Beispiel über den linken Innenabstand der Überschrift definiert), addieren Sie die Breite der linken Spalte (200 Pixel), den rechten Innenabstand der linken Spalte (12 Pixel), die Breite der linken Rahmenseite der rechten Spalte (4 Pixel) und den linken Innenabstand der rechten Spalte (4 Pixel):
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
padding-left: 220px;
}Um die Überschriften visuell noch ansprechender zu gestalten, wird die obere und untere Rahmenseite etwas dicker dargestellt (siehe nächste Abbildung):
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
padding-left: 220px;
border-bottom: 2px solid gray;
border-top: 2px solid black;
}
Abbildung: Die Abschnittsüberschriften mit Innenabstand.
Für den letzten Schliff werden die Submit- und Reset-Buttons wie die Abschnittsüberschriften nach rechts und in diesem Fall unter die Eingabefelder verschoben. Dabei wird ein linker Rand von 220 Pixeln zugewiesen (siehe folgende Abbildung):
#buttonSubmit {
margin-left: 220px;
margin-top: 4px;
}
| 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