Formulare sind auf vielen Webseiten wichtiger Bestandteil der Bedienung und Interaktion. Bei WebApplikationen ist es häufig noch viel wichtiger besonderes Augenmerk auf Formulare zu haben. Gerade wenn diese sehr lang sind, in mehreren Teilschritt ausgefüllt oder sich über mehrere Seiten erstrecken.
Früher hat man versucht einem Formular mit Hilfe einer teilweise monströsen Tabelle ein aussehen zu geben. Dies gehört der Vergangenheit an.
xHTML im Zusammenspiel mit CSS, bietet eine menge Möglichkeiten ein Formular schlanker und semantisch richtig zu programmieren.
Ein Formular leiten man wie schon immer mit <form> ein und beendet es mit </form>. Ein Input- Feld ist natürlich weiterhin ein Input-Feld. Da hat sich nichts geändert.
<input type=“text“ name=“inputText“ /><input type=“password“ name=“inputPassword“ /><input type=“checkbox“ name=“inputCheckbox“ /><input type=“radio“ name=“inputRadio“ /><input type=“reset“ name=“inputReset“ /><input type=“submit“ name=“inputSubmit“ /><input type=“file“ name=“inputFile“ /><input type=“images“ name=“inputImages“ /><input type=“hidden“ name=“inputHidden“ />
Nun sollte auch jedes Formularfeld beschriftet werden damit der User weiß was es mit dem Feld auf sich hat.
Dafür gibt es den Element <label>. Mit <label> hat man ein eindeutig zum Element gehörende Beschriftung.
<p><label for=“vorname“>Vorname</label><input type=“text“ name=“vorname“ id=“vorname“ /></p>
Mithilfe des Attributs for, lässt sich eine Beziehung zum Formularfeld mit der gleichnamigen ID herstellen.
Bei größeren Formularen bietet es sich häufig an einzelne Teile eines Formulars logisch zu trennen. Bei einem Kontaktformular könnte man zwischen persönlichen Angaben, Kontaktdaten und der eigentlichen Nachricht unterscheiden.
Auch zu diesem Thema gibt es eine Lösung ganz ohne Tabellen oder DIV- Elemente.
Und zwar gibt es den fieldset und legend Element. Das fieldset umrandet den betreffenden Formularbereich und legend nennt den Title oder die Überschrift.
<form action="kontaktformular.php" method="post"><fieldset><legend>Ihre persoenlichen Daten</legend><p><label for="vorname">Vorname:</label><input type="text" name="Vorname" id="vorname" /></p><p><label for="name">Name:</label><input type="text" name="Name" id="name" /></p></fieldset><fieldset><legend>Ihre Kontaktdaten</legend><p><label for="email">eMail:</label><input type="text" name="eMail" id="email" /></p><p><label for="telefon">Telefon</label><input type="text" name="Telefon" id="telefon" /></p></fieldset><fieldset><legend>Ihre Nachricht</legend><p><label for="nachricht">Nachricht:</label>textarea name="Nachricht" rows="10" cols="40" id="nachricht"></textarea></p></fieldset><fieldset><input type="submit" name="senden" value="Senden" /></fieldset></form>
Standardmäßig werden die Formularbereiche mit normalen Linien umrandet. Dies kann man nach belieben natürlich mit CSS verändern.
Nun sollte das ganze noch ein wenig mit CSS gestaltet werden.
Ein nicht sehr geläufiges Element ist sicherlich das <label> Element. Hier gibt es in erster Linie zwei unterschiedliche Ansätze der Darstellung. Die eine ist das die Beschriftung mit einem bestimmten Abstand zum Feld steht. Die andere Variante ist, dass die Beschriftung des Feldes über dem Feld steht.
Für die erste Variante:
lable {-
display: block; -
width: 150px; -
float: left; }
oder für die Darstellung oberhalb des Eingabefeldes
label {-
display: block; }
