Feinstrukturierung eines Formulars gehört es, Formularfelder und ihre Beschriftungen einander zuzuordnen. Dafür bietet HTML die Möglichkeit an, Beschriftungen als Label für bestimmte Felder auszuzeichnen.
Beispiel
    

Drei Wünsche frei!

    

    

Absender

    

Vorname:

    

    

Zuname:

    

    

    

Wünsche

    

Wunsch 1:

    

    

Wunsch 2:

    

    

Wunsch 3:

    

    

    

Eingaben

    
    

    

Erläuterung
    Eine zusammengehörige Gruppe von Formularelementen können Sie durch

…

markieren ( fieldset = Feldgruppe). Dazwischen können Sie beliebige Teile Ihres Formulars notieren. Im Anschluss an das einleitende

-Tag und vor weiteren Formularinhalten der Gruppe können Sie ferner eine Gruppenüberschrift (Legende) für die Elementgruppe vergeben. Schließen Sie den Gruppenüberschriftentext in

…

ein. Der Text innerhalb davon kann weitere HTML-Elemente enthalten, wie zum Beispiel Textauszeichnungen. Das obige Beispiel definiert ein Formular mit drei Fieldsets: eins für den Namen des Absenders, eins für seine drei Wünsche und eins zum optischen Abtrennen des Buttons, mit dem das Formular abgesendet werden kann. Die im Beispiel verwendeten Formularelemente werden im weiteren Verlauf dieses Buchkapitels noch beschrieben. Das Beispiel zeigt außerdem zwei unterschiedliche Arten, wie Sie Label für Elemente vergeben können. Im ersten Fieldset wird die explizite Variante verwendet:
    Beschriftung:
    
    Im zweiten Fieldset wird die implizite Variante gezeigt:
    Beschriftung:
    In beiden Fällen wird das
label
-Element durch Anfangs- und End-Tag markiert. Im ersten Fall besteht der Elementinhalt jedoch nur aus dem Beschriftungstext. Im impliziten Fall schließt das Element als Inhalt den Beschriftungstext sowie das zugehörige Formularelement ein. Da im expliziten Fall nicht klar ist, zu welchem Formularelement die Beschriftung gehört, wird mit dem Attribut
for
der explizite Bezug zum gewünschten Element hergestellt. Das Element muss dazu ein
id
-Attribut enthalten, bei dem ein dokumentweit eindeutiger Name vergeben wird. Mit dem gleichen Namen im
for
-Attribut stellen Sie die Verknüpfung zu diesem Element her.
    Bild 8.3: Darstellung eines Formulars mit gruppierten Feldern
Weitere Hinweise
    Beim Klick auf den Beschriftungstext eines Labels wird in neueren Browsern das zugehörige Formularelement fokussiert bzw. ausgewählt.
    Das
label
-Element ist auf alle sichtbaren Formularelemente anwendbar.
    Beim
label
-Element ist es egal, ob der Beschriftungstext vor oder hinter dem Formularelement steht, auf das er sich bezieht. Es können auch andere HTML-Elemente zwischen Beschriftungstext und Formularelement stehen.
    Die hier beschriebenen Elemente dienen – wie auch sonst in HTML üblich – lediglich der logischen Strukturierung. Ihr Zweck besteht nicht darin, Formularelemente oder Beschriftungen optisch ansprechend zu platzieren. Dazu sind CSS bzw. CSS-Eigenschaften erforderlich. Häufig werden immer noch Tabellen verwendet, um Beschriftungen und Formularfelder sauber nebeneinander anzuordnen. Es geht aber auch mit CSS.
Referenzinformationen
    Elementreferenz <
fieldset>
,
    Elementreferenz <
legend>
,
    Elementreferenz <
label>
:
    Attributreferenz
for
:

8.2        Formular-Feldtypen
    Die Formular-Feldtypen, welche HTML anbietet, decken das übliche Standardrepertoire von Dialogelementen grafischer Benutzeroberflächen ab. Dazu gehören Eingabefelder, größere Eingabebereiche, Auswahllisten auch komplexerer Natur, Menüs, Radiobuttons, Checkboxen und Schaltflächen.
    Web-Browser greifen, um solche Elemente zu visualisieren, in der Regel auf Dialog-Ressourcen des verwendeten Betriebssystems bzw. dessen Benutzeroberfläche oder Theme zurück. Das heißt: Ein Eingabefeld oder eine Auswahlliste oder eine Checkbox sieht