Klare Formulare

Gruppierung von Formularfeldern

Optische Struktur mit FIELDSET .
Auswahllisten mit OPTGROUP strukturieren .

Optische Struktur mit `FIELDSET`

Entsprechend der BITV-Bedingung 12.3 sollten größere Informationsblöcke in handhabbare Gruppen aufgeteilt werden. Gerade sehbehinderte Surfer müssen ein erhöhtes Maß an Konzentration aufbringen, wenn komplexe Sachverhalte, die am Bildschirm zwar in einer Art Workflow erscheinen, aber mit Vergrößerungssystemen immer nur Ausschnittweise gesehen werden können. Das FIELDSET-Element hilft, logische Strukturierungen in Formularen visuell darzustellen. Das folgende Beispiel zeigt, wie Sie verschiedene Eingabefelder innerhalb eines Formulars mit dem FIELDSET-Element gruppieren und die jeweilige Gruppe mit dem LEGEND-Element benennen. Damit ist es vielen - im Übrigen auch Screen-Reader-Anwendern - möglich, einen besseren Überblick des Formulars zu erhalten.

<form> <fieldset> <legend>Anschrift</legend> <table> <tr><td><label for="strasse">Straße</label></td><td><input type="text" name="strasse" value="Straße eingeben" id="strasse" /></td><td><label for="nummer">Nr.</label></td><td><input type="text" name="nummer" value="Nr." id="nummer" /></td></tr> <tr><td><label for="plz">PLZ</label></td><td><input type="text" name="plz" value="PLZ" id="plz" /></td><td><label for="ort">Ort</label></td><td><input type="text" name="ort" value="Wohnort" id="ort" /></td></tr> </table> </fieldset> <fieldset> <legend>Persönliche Angaben</legend> <p>... weitere Abfragen ...</p> </fieldset> </form>

Auf einerWebseite könnte das dann wie folgt aussehen:

Durch die Gruppierung mit FIELDSET ist es möglich dem Benutzer zu zeigen, dass bestimmte Informationen zusammen gehören. Mit FIELDSET/LEGEND kann man kontextuelle Zusammenhänge deutlich machen. Beispielsweise könnten "Straße", "Hausnummer", "PLZ" und "Ort" eine derartige Gruppe darstellen.

Es hängt immer vom Umfang und vom Inhalt des Formulars ab, ob es in einem Formular sinnvoll ist, Gruppen zu bilden. Es ist beispielsweise denkbar, dass in einem umfangreichen Formular u.a. objektive Daten (Anschrift usw.) von subjektiven Daten (nach Themen sortiert) auf diese Weise aufbereitet werden.

Auswahllisten mit `OPTGROUP` strukturieren

Haben Sie lange Listen als Drop-Down-Menü in einem Formular integriert, sollten Sie überlegen, ob diese Liste strukturiert in Gruppen angeboten werden kann. Ruft ein Screen-Reader-Benutzer eine solche Menüliste auf, muss er sich alle Menüeinträge vorlesen lassen, um den gewünschten Eintrag zu finden. Innerhalb eines FORM-Elements wird ein solches Drop-Down-Menü mit dem SELECT-Element eingeleitet; die einzelnen Eintragungen der Auswahlliste werden mit dem OPTION-Element eingebunden.

<form> <select> <option>Frankreich</option> <option>Italien</option> <option>Malediven</option> <option>Thailand</option> </select> </form>

Der Quellcode erzeugt folgende Auswahlliste:

Die Vergabe von zusätzlichen Texten im OPTGROUP-Element erfolgt über das label-Attribut:

Es ist möglich in Auswahllisten, die mit dem SELECT-Element eingeleitet werden für Gruppen von Optionen eine besondere Auszeichnung mit dem OPTGROUP-Element zu bilden. In einigen Browsern werden diese Gruppen zwar unterschiedlich, aber besonders gekennzeichnet dargestellt. In HTML 4.01 ist es nicht vorgesehen Gruppierungen innerhalb solcher Listen zu verschachteln, so dass eine Gruppierung lediglich auf zwei Ebenen möglich ist.

<form> <select> <optgroup label="Europa"> <option>Frankreich</option> <option>Italien</option> </optgroup> <optgroup label="Rest der Welt"> <option>Malediven</option> <option>Thailand</option> </optgroup> </select> </form>

Das - wenn Ihr Browser OPTGROUP unterstützt - folgende Strukturierung ergibt: