Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)
Dies ist ein Beispiel aus dem Buch Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.
Führungslinien in Formularen
Beim Einsatz von Vergrößerungssystemen kann ein Formular unverständlich wirken, wenn zwei Spalten genutzt werden: eine linke Spalte für einen Beschreibungstext und eine rechte Spalte für ein Eingabefeld. Beim Verschieben des Vergrößerungsausschnittes vom Text zum Eingabefeld besteht viel Leerraum, der keine Orientierung gibt. Deshalb ist die Gestaltung solcher Formulare mit Führungslinien sinnvoll.
HTML
<form action="zieladresse.html" method="post">
<table width="100%">
<tr>
<td class="links"><label for="feld1">Name</label>:</td>
<td class="rechts"><input type="text" id="feld1" /></td>
</tr>
<tr>
<td class="links"><label for="feld2">Vorname</label>:</td>
<td class="rechts"><input type="text" id="feld2" /></td>
</tr>
</table>
</form>
CSS
td.links {
width:50%;
border-bottom:1px solid #036;
}
td.rechts {
width:50%;
}
td.rechts input {
font: bold 1em Verdana,Tahoma,sans-serif;
}