SELFHTML: HTML/XHTML / Formulare / Gruppierung von Elementen und Label für Elemente

SELFHTML/Navigationshilfen HTML/XHTML Formulare
	Gruppierung von Elementen und Label für Elemente
	Elemente gruppieren Label für Elemente Weitere Informationen

Elemente gruppieren

Größere Formulare bestehen häufig aus Gruppen von Elementen. Ein typisches Bestellformular besteht beispielsweise aus Elementgruppen wie "Absender", "bestellte Produkte" und "Formular absenden/abbrechen". Solche Elementgruppen können Sie ab HTML 4.0 eigens auszeichnen. Ein Web-Browser kann Elementgruppen durch Linien oder ähnliche Effekte optisch sichtbar machen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Elemente gruppieren</title>
</head>
<body>

<h1>W&uuml;nschen Sie sich was!</h1>

<form action="fieldset_legend.htm">
  <fieldset>
    <legend><b>Absender</b></legend>
    <table>
      <tr>
        <td>Ihr Vorname:</td>
        <td><input type="text" size="40" maxlength="40" name="Vorname"></td>
      </tr><tr>
        <td>Ihr Zuname:</td>
        <td><input type="text" size="40" maxlength="40" name="Zuname"></td>
      </tr>
    </table>
  </fieldset>
  <fieldset>
    <legend><b>Wunsch</b></legend>
    <table>
      <tr>
        <td>Ihr Hauptwunsch:</td>
        <td><input type="text" size="40" maxlength="40" name="Hauptwunsch"></td>
      </tr><tr>
        <td>Ihr Zusatzwunsch:</td>
        <td><input type="text" size="40" maxlength="40" name="Zusatzwunsch"></td>
      </tr>
    </table>
  </fieldset>
</form>

</body>
</html>

Erläuterung:

Eine zusammengehörige Gruppe von Formularelementen schließen Sie in die Tags <fieldset>...</fieldset> ein (fieldset = Feldgruppe). Dazwischen können Sie beliebige Teile Ihres Formulars definieren.

Unterhalb des einleitenden <fieldset>-Tags und vor den ersten Formularinhalten der Gruppe sollten Sie ferner eine Gruppenüberschrift (Legende) für die Elementgruppe vergeben. Schließen Sie den Gruppenüberschriftentext in die Tags <legend>...</legend> ein. Den Text innerhalb davon können Sie mit Hilfe von HTML/CSS nach Wunsch formatieren.

Label für Elemente

Für Formularelemente wie Eingabefelder oder Auswahllisten gibt es normalerweise keine logische Beschriftungsmöglichkeit. Sie können zwar Text vor ein solches Element setzen wie "E-Mail-Adresse:", aber ein solcher Text ist normaler HTML-Text, der keinen definierten Bezug zu dem Element hat, für das er als Beschriftung dient. Mit Hilfe von Labels können Sie jedoch einen solchen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Label für Elemente</title>
<style type="text/css">
label { cursor:pointer; }
</style>
</head>
<body>

<h1>Meine Beschriftung geh&ouml;rt zu mir wie mein Name an der T&uuml;r!</h1>

<form action="label.htm">
  <fieldset>
    <legend>Formular</legend>
    <table>
      <tr>
        <td><label for="vorname">Vorname:</label></td>
        <td><input type="text" id="vorname" name="Vorname" value="Ihr Vorname"></td>
      </tr>
      <tr>
        <td><label for="nachname">Zuname:</label></td>
        <td><input type="text" id="nachname" name="Zuname" value="Ihr Nachname"></td>
      </tr>
      <tr>
        <td><label for="auswahl">Auswahl:</label></td>
        <td><input type="checkbox" id="auswahl" name="Auswahl"></td>
      </tr>
    </table>
  </fieldset>
</form>

</body>
</html>

Erläuterung:

Das Beispiel zeigt, wie Sie mit Hilfe einer "blinden" Tabelle Beschriftung und Eingabefelder eines Formulars ordentlich formatieren können. Das Besondere dabei ist, dass ein logischer Bezug zwischen Beschriftung und Eingabefeld hergestellt wird.

Dazu muss das Formularelement selbst, im obigen Beispiel zwei Eingabefelder, mit Hilfe des Universalattributs id einen eindeutigen Namen erhalten. Vergeben Sie keine zu langen Namen. Die Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).

Den Beschriftungstext, den Sie einem solchen Formularelement zuordnen, notieren Sie als Inhalt zwischen <label> und</label>. Der Beschriftungstext kann auch jede Art von HTML/CSS-Formatierung enthalten. Das label-Element selbst hat keine sichtbare Wirkung am Bildschirm, es dient lediglich dem Zweck, den logischen Bezug zum Formularelement herzustellen. Diesen Bezug definieren Sie innerhalb des einleitenden <label>-Tags mit dem Attribut for (for = für). Dahinter geben Sie, in Anführungszeichen, exakt den id-Namen des Formularelements an, auf das sich das Label beziehen soll.

Beim Klick auf den Inhalt eines Labels (im Beispiel Vorname, Zuname, Auswahl) wird in aktuellen Browsern das Formularelement fokussiert bzw. ausgewählt, auf das sich das Label bezieht. Diese Funktion erleichtert unter anderem die Auswahl von Checkboxen.

Beachten Sie:

Das label-Element ist auch auf andere Formularelemente, zum Beispiel auf textarea oder select, anwendbar.

Weitere Informationen

In der HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für Elementgruppierung (<fieldset>...</fieldset>)
Attribut-Referenz für Elementgruppierung (<fieldset>...</fieldset>)
Element-Referenz für Gruppenüberschriften (<legend>...</legend>)
Attribut-Referenz für Gruppenüberschriften (<legend>...</legend>)
Element-Referenz für Label (<label>...</label>)
Attribut-Referenz für Label (<label>...</label>)


	Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
	Versteckte Elemente

SELFHTML/Navigationshilfen HTML/XHTML Formulare