Hinzufügen von Extras in Formularen im HTML

Formularfelder freundlicher gestalten

Sie haben all die Formularfelder erstellt, die Benutzereingaben akzeptieren. Es ist jetzt an der Zeit, Funktionsvielfalt ins Spiel zu bringen und die Formularfelder ein bisschen freundlicher zu gestalten.

Feldbeschriftungen

Das <label>-Tag zeigt nützliche Informationen für Formularfelder im Formular an. Sie sollten das for-Attribut des Tag mit dem Formularfeld verknüpfen, das beschriftet werden soll. Um eine Beschriftung zu erstellen, beginnen Sie mit dem einleitenden <label>-Tag und fügen dann das for-Attribut hinzu. Der Wert dieses Attributs muss, falls vorhanden, an das id-Attribut für das zu beschriftende Formularfeld angepasst werden. Geben Sie als Nächstes den Text ein, der als Beschriftung dienen soll, und schließen Sie das Ganze mit dem </label>-Tag wie im folgenden Beispiel:

<label for="control4">Who is your favorite NFL Quarterback?</label> 
<input type="text" name="favqb" id="control4" />

Hinzufügen von Extras in Formularen

<label>User name: 
<input type="text" name="username" />
</label>

Gruppieren von Formularfeldern mit <fieldset> und <legend>

Das <fieldset>-Tag organisiert Formularfelder in Gruppen, die im Web-Browser erscheinen. Das <legend>-Tag zeigt eine Kopfzeile für das <fieldset> an. Um ein <fieldset>-Tag zu erstellen, beginnen Sie mit dem einleitenden <fieldset>-Tag und fügen Sie dann das <legend>-Tag, wie im folgenden Code, hinzu:

<fieldset>
	<legend>Oatmeal Varieties</legend>

Beachten Sie, dass <legend> Text enthält; es könnte jedoch ebenso Inline-HTML-Elemente für die Formatierung des Textes enthalten. Geben Sie als Nächstes Ihre Formularfelder ein und beenden Sie das Ganze mit dem abschließenden <fieldset>-Tag. In Abbildung sehen Sie das Ergebnis.

Hinzufügen von Extras in Formularen

<fieldset>
	<legend>Oatmeal Varieties</legend> <label>Apple Cinnamon
	<input type="radio" name="applecinnamon" />
	</label>
	<br />
	<label>Nutty Crunch
	<input type="radio" name="nuttycrunch" />
	</label>
	<br />
	<label>Brown Sugar
	<input type="radio" name="brownsugar" />
	</label> 
</fieldset>

Ändern der Standardtabulator – Navigation

Bei einigen Computeranwendungen erleichtert die Arbeit mit der Tastatur das Ausfüllen von Formularen. Mit Hilfe der Tabulator-Taste können Benutzer ein Formularfeld nach dem anderen in der von Ihnen angegebenen Reihenfolge anspringen.

Obwohl manche Browser es Ihnen nicht ermöglichen, mit Hilfe des Tabulators ein Formularfeld nach dem anderen anzuspringen, können Sie die Tabulator-Reihenfolge nicht mit dem tabindex-Attribut ändern.

Um die Tabulator-Navigation zu ändern, fügen Sie das tabindex-Attribut allen von Ihnen gewünschten Formularfelder hinzu. Beginnen Sie mit 1 und ordnen Sie Ihre Formularfelder vom Anfang bis zum Ende. Formularfelder, die duplizierte tabindex-Werte besitzen, erscheinen in der gleichen Reihenfolge, in der sie in HTML-Dokumenten erscheinen. Folgendes Beispiel zeigt, wie man das Attribut einem Formularfeld hinzufügt:

<p>
	Enter your name: 
	<input type="text" name="username" tabindex="1" />
</p>

Verwenden von Zugriffstasten

Zugriffstasten erleichtern die Navigation in Ihren Formularen. Sie verbinden einen Buchstaben mit einem Element. Ein Feld erhält den Fokus, sobald der Anwender die dafür definierte Tastenkombination drückt. Verwenden Sie folgenden Code, um einer Checkbox eine Zugriffstaste hinzuzufügen:

<p>
	What are your interests?
</p>
<p>
	Sports<input type="checkbox" name="sports" accesskey="S"
</p>
<p>
	Music<input type="checkbox" name="music" accesskey="M"
</p>
<p>
	Television<input type="checkbox" name="tv" accesskey="T"
</p>

Erstellen von <disabled> und <readonly> Formularfeldern

Vielleicht möchten Sie einmal ein Formularfeld anzeigen, ohne dass Ihre Besucher das Feld verwenden oder neue Informationen eingeben können. Um ein Formularfeld auszuschalten, fügen Sie der Definition des Feldes das disabled-Attribut hinzu, wie es im folgenden Beispiel gezeigt wird:

<p>
	What is the meaning of life?
	<textarea name="question42" disabled>
	Enter your answer here.
	</textarea>
</p>

Wenn die Kontrollfläche nun im Web-Browser angezeigt wird, erscheint es in hellgrauer Farbe oder matt, damit man erkennen kann, dass es ausgeschaltet ist. Zur Erstellung eines Nur-Lese-Formularfeldes verwenden Sie das readonly-Attribut, wie es im folgenden Beispiel gezeigt wird:

<p>
	This month: 
	<input type="text" name="month" value="september" readonly />
</p>

Ein Nur-Lese-Formularfeld wird normal angezeigt; wenn Besucher jedoch versuchen, neue Informationen einzugeben (oder im Falle von Schaltflächen oder Checkboxen eine Wahl treffen), werden sie bemerken, dass sie den Wert nicht verändern können. In Abbildung sehen Sie sowohl ein ausgeschaltetes Formularfeld, als auch ein Nur-Lese-Formularfeld.

Hinzufügen von Extras in Formularen