Home Einleitung Grundlagen Elemente und Attribute HTML-Dokumente strukturelles Markup Site Management Hyperlinks Bilder und Grafiken ohne Fehl und Tadel Spezialfälle Tabellen Formulare <form> Text Input eine Zeile GEHEIM ganze Romane Kontroll-Elemente Checkboxen Radio Buttons anschreiben die Qual der Wahl wähle eins oder mehrere mehr Ordnung Absenden wem wie E-Mail Heimlichkeiten fertig Formular Schlussbemerkungen

---

Schlagwortregister

---

Ãœbungs-Ãœbersicht

---

Ãœbungs-Dateien

HTML und XHTML

Formulare

anschreiben

Unser Formular hat noch einen ganz gravierenden Mangel: Es glänzt zwar mit einigen Eingabefeldern, Checkboxen und Radio Buttons, aber da steht nirgends, was für Informationen eigentlich anzugeben sind und wozu.

All diese Elemente sind praktisch wertlos ohne eine hilfreiche Beschriftung. Die Beschriftung ist grundsätzlich ganz einfach: Du hast ja die Elemente jeweils in ein <p>-Element gestellt. Stell halt den Text auch noch dazu.

Nicht ganz unerwartet gibt's allerdings in HTML ein besonderes Element für solche Beschriftungen, denn eigentlich ist ja die Beschriftung eines Eingabefeldes ganz was anderes als ein erzählender Text. Und tatsächlich ist es auch denkbar, dass sie bei der Verarbeitung des Formulars durch ein Programm zutreffender interpretiert und genutzt werden kann, wenn zweifelsfrei sichergestellt ist, dass es sich um eine Feldbeschriftung handelt.

Dieses besondere Element heisst <label>, und da wir normalen Text eigentlich bis zum Abwinken kennen, leisten wir uns hier den Extra-Aufwand und versuchen's nun mal mit <label>.

Es gibt nun drei Arten, Eingabefelder zu beschriften, und ich zeige sie hier gleich an einem Beispiel:

Normaler Text

<p>Ihr Name: <input type="text" name="von" /></p>

Wie du siehst, wurde hier der Text ganz einfach mit in den Absatz gestellt.

<label>, Variante 1

<p>
 <label>
  Ihr Name: <input type="text" name="von" />
 </label>
</p>

In dieser Variante werden Beschriftung und Eingabefeld in ein <label>-Element gepackt. Dadurch wird auch festgehalten, dass die beiden zu einander gehören. Allerdings gibt es Probleme, wenn man ein Formular in eine Tabelle packt und sich Beschriftung und Eingabefeld in verschiedenen Zellen befinden. Dann funktioniert diese Variante nicht.

<label>, Variante 2

<p>
 <label for="besucher">Ihr Name:</label>
 <input type="text" name="von" id="besucher" />
</p>

Wie du siehst, steckt nun das <input>-Element nicht mehr im <label>-Element drin. Es kann irgendwo anders im HTML-Text stehen. Dass die beiden Elemente dennoch zusammen gehören, wird über die Attribute id und for erreicht. Das mag nun zwar die aufwändigste Art der Beschriftung sein, aber es ist gleichzeitig die sicherste und flexibelste. Wie immer du deinen HTML-Text mal umbauen möchtest, die Beschriftung der Felder wird immer stimmen.

Auf den ersten Blick scheint es, dass die Attribute name und id des <input>-Elements die selbe Funktion haben. Es ist aber durchaus möglich, dass eine Seite mehr als ein Formular enthält, und dass in verschiedenen Formularen Eingabefelder auftauchen, die den selben Namen haben. Mit Ids geht das nicht. Namen sollten innerhalb eines Formulars eindeutig sein, Ids müssen innerhalb einer HTML-Seite eindeutig sein.

In meiner Version präsentiert sich das Formular nun so:

<form>
<p><label for="besucher">Ihr Name:</label></p>
<p><input type="text" name="von" id="besucher" /></p>
<p><label for="kennwort">Kennwort, mit dem Sie Ihr Rezept später noch korrigieren können:</label></p>
<p><input type="password" name="kennwort" id="kennwort" /></p>
<p><label for="rezept">Ihr Rezept:</label></p>
<p><textarea name="rezept" id="rezept" rows="15" cols="50"></textarea></p>
<p><input type="checkbox" name="originalrezept" value="ja" id="original" />
   <label for="original">Das Rezept stammt von mir selbst</label></p>
<p>Wie ist das Gericht gewürzt?</p>
<p><input type="radio" name="gewuerzt" id="w1" value="mild" /><label for="w1">mild</label></p>
<p><input type="radio" name="gewuerzt" id="w2" value="kräftig" /><label for="w2">kräftig</label></p>
<p><input type="radio" name="gewuerzt" id="w3" value="scharf" /><label for="w3">scharf</label></p>
</form>

Besieh dir nun dein Werk im Browser. Alles ist angeschrieben, die Checkbox kann aktiviert und deaktiviert werden und die Radio Buttons funktionieren ebenfalls.