Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Gruppierung von Elementen und Label für Elemente

Informationsseite

nach unten Elemente gruppieren
nach unten Label für Elemente
nach unten Weitere Informationen

 nach unten 

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite 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>Absender</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>Wunsch</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.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite 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" Kapitel 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 Kapitel 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.

nach obennach unten

Weitere Informationen

In der Kapitel 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:
Seite Element-Referenz für Elementgruppierung (<fieldset>...</fieldset>)
Seite Attribut-Referenz für Elementgruppierung (<fieldset>...</fieldset>)
Seite Element-Referenz für Gruppenüberschriften (<legend>...</legend>)
Seite Attribut-Referenz für Gruppenüberschriften (<legend>...</legend>)
Seite Element-Referenz für Label (<label>...</label>)
Seite Attribut-Referenz für Label (<label>...</label>)

 nach oben
weiter Seite Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
zurück Seite Versteckte Elemente
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/html/formulare/strukturieren.htm