Formular mit Fieldsets
Größere Formulare bestehen häufig aus Gruppen von Elementen. Ein typisches Bestellformular besteht beispielsweise aus Elementgruppen für Absender, bestellte Produkte usw. Solche Elementgruppen können Sie als sogenannte Fieldsets auszeichnen. Ein Web-Browser kann Fieldsets durch Linien oder ähnliche Effekte optisch sichtbar machen.
Zur logischen 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.
<h1>Drei Wünsche frei!</h1> <form action="wunsch.php" method="post"> <fieldset><legend>Absender</legend> <p><label for="vorname">Vorname:</label><br> <input type="text" size="40" name="vorname" id="vorname"></p> <p><label for="zuname">Zuname:</label><br> <input type="text" size="40" name="zuname" id="zuname"></p> </fieldset> <fieldset><legend>Wünsche</legend> <p><label>Wunsch 1:<br> <input type="text" size="40" name="wunsch1"></label></p> <p><label>Wunsch 2:<br> <input type="text" size="40" name="wunsch2"></label></p> <p><label>Wunsch 3:<br> <input type="text" size="40" name="wunsch3"></label></p> </fieldset> <fieldset><legend>Eingaben</legend> <input type="submit" value="absenden"> </fieldset> </form>
Eine zusammengehörige Gruppe von Formularelementen können Sie durch <fieldset>…</fieldset> markieren (fieldset = Feldgruppe). Dazwischen können Sie beliebige Teile Ihres Formulars notieren.
Im Anschluss an das einleitende <fieldset>-Tags 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 <legend>…</legend> 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:
<label for="feld_id">Beschriftung:</label> <!--Formularelement mit id="feld_id"-->
Im zweiten Fieldset wird die implizite Variante gezeigt:
<label>Beschriftung: <!--Formularelement--></label>
Im 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.
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 Formularlement stehen.
Die hier beschriebenen Elemente dienen — wie auch sonst in HTML üblich — lediglich der logischen Strukturierung. Ihr Zweck besteht nicht darin, Formularelemente oder Beschriftungen und Formularelemente 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. Wie, das wird im Buchabschnitt Anordnung von Formularelementen beschrieben.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.