Beschriftung eines Eingabefelds

In der vorigen Übung haben wir ein Textfeld erstellt. Aber der Nutzer weiß nicht, was er hineintippen soll, weil nichts es beschreibt.

Um Eingabefelder zu beschreiben, verwenden wir das Element label. Anders als input hat es ein öffnendes und ein schließendes Tag, und sein Inhalt ist der Text der Beschriftung.

Um die Beschriftung mit ihrem Eingabefeld zu verbinden, geben wir dem Eingabefeld ein Attribut id mit einem eindeutigen Wert, der es identifiziert. Dann fügen wir dem label das Attribut for mit demselben Wert wie die id des Eingabefelds hinzu.

<form action="/verarbeitung.html" method="POST">
	<label for="eingabe-spitzname">Spitzname</label>
	<input type="text" name="spitzname" id="eingabe-spitzname">
</form>

Dieser Code wird so angezeigt:

Die Verbindung zwischen Beschriftung und Eingabefeld hat zwei Vorteile:

• Ein Klick auf die Beschriftung setzt den Cursor in das Eingabefeld. Probiere es aus und klicke oben auf das Wort Spitzname.
• Screenreader, die blinden und sehbehinderten Menschen Webseiten vorlesen, lesen die Beschriftung vor, sobald der Nutzer zum Eingabefeld kommt. So weiß er, was er ausfüllen soll.