HTML und XHTML
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, eine semantische Gruppierung für zueinander in Beziehung stehende Formular-Steuerelemente zur Verfügung zu stellen. Dies erlaubt es Benutzern, die Beziehung der Steuerelemente untereinander zu verstehen und mit dem Formular schneller und effizienter zu interagieren.
Formular-Steuerelemente können gruppiert werden, indem man sie mit dem fieldset-Element umschließt. Alle Steuerelemente innerhalb eines vorgegebenen fieldset stehen dann zueinander in Beziehung. Das erste Element innerhalb des fieldset sollte ein legend-Element sein, das eine Beschriftung oder eine Anweisung für die Gruppe bereitstellt. Fieldsets können verschachtelt werden, wenn dies gewünscht ist, obwohl dies zur Verwirrungen führen kann, wenn es übertrieben wird.
Die Gruppierung von Steuerelementen ist bei zueinander in Beziehung stehende Radiobuttons und Kontrollkästchen am wichtigsten. Ein Satz Radiobuttons oder Kontrollkästchen steht zueinander in Beziehung, wenn sie alle Werte für ein einziges, benanntes Feld versenden. Sie funktionieren so wie Auswahllisten und erlauben es dem Benutzer, aus einer Reihe an Optionen auszuwählen, mit der Ausnahme, dass Auswahllisten einzelne Steuerelemente sind während Radiobuttons und Kontrollkästchen multiple Steuerelemente sind. Da es multiple Steuerelemente sind, ist es besonders wichtig, dass sie semantisch gruppiert werden, so dass sie leichter als einzelnes Steuerelement behandelt werden können. Benutzeragenten zeigen häufig den Wert von legend vor der Beschriftung jedes Steuerelements an, um Benutzer daran zu erinnern, dass sie Teil der selben Gruppe sind.
Es kann auch nützlich sein, andere Reihen von Steuerelementen, die keine so enge Beziehung zueinander haben, als Reihen von Radiobuttons und Kontrollkästchen zu gruppieren. Zum Beispiel können verschiedene Felder, welche die Adresse des Benutzers sammeln, zusammen gruppiert werden mit der Legende „Adresse“.
Autoren vermeiden es manchmal, das fieldset-Element zu benutzen wegen der standardmäßigen Anzeige im Browser, die einen Rahmen um die gruppierten Steuerelemente zieht. Die visuelle Gruppierung ist ebenfalls nützlich und Autoren sollten es ernsthaft in Betracht ziehen, es beizubehalten (oder irgendeine andere Form der visuellen Gruppierung). Der visuelle Effekt kann im CSS verändert werden, indem die „border“-Eigenschaft des fieldset und die „position“-Eigenschaft von legend außer Kraft gesetzt werden.
Wenn eine kleine Gruppe von zueinander in Beziehung stehenden Radiobuttons klare Anweisungen und deutliche Auswahlmöglichkeiten beinhaltet, ist es möglicherweise nicht notwendig, fieldsets und legends zu benutzen; H44: Benutzung von Label-Elementen, um Text-Label mit den Steuerelementen eines Formulars zu assoziieren kann auch ausreichend sein.
Dieses Beispiel zeigt einen Posten eines Tests mit einer Frage und fünf möglichen Antworten. Jede Antwort wird durch einen Radiobutton (input type="radio") dargestellt. Die Radiobuttons sind innerhalb eines fieldset enthalten. Die Testfrage ist mit dem legend-Element ausgezeichnet.
Code-Beispiel:
<fieldset>
<legend>The play <cite>Hamlet</cite> was written by:</legend>
<input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">William Shakespeare</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label for="kipling">Rudyard Kipling</label><br />
<input type="radio" id="gbshaw" name="hamlet" value="c">
<label for="gbshaw">George Bernard Shaw</label><br />
<input type="radio" id="hem" name="hamlet" value="d">
<label for="hem">Ernest Hemingway</label><br />
<input type="radio" id="dickens" name="hamlet" value="e">
<label for="dickens">Charles Dickens</label>
</fieldset> Die Seite mit dem Benutzerprofil für eine Website erlaubt es Benutzern, ihre Interessen anzugeben, indem sie mehrere Kontrollkästchen auswählen. Jedes Kontrollkästchen (input type="checkbox") hat ein label. Die Kontrollkästchen sind innerhalb eines fieldset enthalten und das legend-Element enthält die Eingabeaufforderung für die gesamte Gruppe an Kontrollkästchen.
Code-Beispiel:
<fieldset>
<legend>I am interested in the following (check all that apply):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label><br />
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label><br />
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset> Dieses Beispiel fordert den Benutzer auf, einen einzigen Philosophen auszuwählen. Beachten Sie, dass jedes Feld das gleiche „name“-Attribut hat, was darauf hinweist, dass diese Radiobuttons zueinander in Beziehung stehen (die alle schicken das gleiche Feld ab) und sie wie angezeigt gruppiert werden sollten. Beachten Sie außerdem, dass, obwohl die „name“-Attribute gleich sind, die "id"-Attribute einmalig sein müssen.
Code-Beispiel:
<form action="http://example.com/vote" method="post">
<fieldset>
<legend>Your preferred philosopher</legend>
<input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
<label for="philosopher_socrates">Socrates</label>
<input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
<label for="philosopher_plato">Plato</label>
<input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
<label for="philosopher_aristotle">Aristotle</label>
</fieldset>
</form> Anmerkung: Gruppen mit zueinander in Beziehung stehenden Kontrollkästchen funktionieren auf die gleiche Art und Weise mit der Ausnahme, dass Benutzer mehr als eine Präferenz für das Feld ausdrücken dürfen.
In diesem Beispiel werden die Formularfelder für Wohn- und Postanschrift durch den Wert von legend in jeder fieldset-Gruppierung unterschieden.
Code-Beispiel:
<form action="http://example.com/adduser" method="post">
<fieldset>
<legend>Residential Address</legend>
<label for="raddress">Address: </label>
<input type="text" id="raddress" name="raddress" />
<label for="rzip">Postal/Zip Code: </label>
<input type="text" id="rzip" name="rzip" />
...more residential address information...
</fieldset>
<fieldset>
<legend>Postal Address</legend>
<label for="paddress">Address: </label>
<input type="text" id="paddress" name="paddress" />
<label for="pzip">Postal/Zip Code: </label>
<input type="text" id="pzip" name="pzip" />
...more postal address information...
</fieldset>
</form>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
HTML 4.01 Checkboxes
Prüfen Sie, ob Gruppen von logisch zueinander in Beziehung stehende Eingabe-Elemente innerhalb eines fieldset-Elements enthalten sind.
Prüfen Sie, ob jede Gruppe von input-Elementen des Typs type="radio" oder type="checkbox" mit dem gleichen name-Attribut innerhalb eines fieldset-Elements enthalten ist
Prüfen Sie, ob jedes fieldset ein legend-Element hat, das eine Beschreibung dieser Gruppe enthält.
Alle oben genannten Tests sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.