So strukturieren Sie ein Webformular

Nachdem die Grundlagen geklärt sind, werden wir uns nun die Elemente genauer ansehen, die verwendet werden, um den verschiedenen Teilen eines Formulars Struktur und Bedeutung zu verleihen.

Voraussetzungen: Grundlegende Computerkenntnisse und ein grundlegendes Verständnis von HTML.

Ziel: Verstehen, wie man HTML-Formulare strukturiert und ihnen Semantik gibt, damit sie verwendbar und zugänglich sind. Die Flexibilität von Formularen macht sie zu einer der komplexesten Strukturen in HTML; Sie können jede Art von Basisformular erstellen, indem Sie dedizierte Formularelemente und -attribute verwenden. Die Verwendung der richtigen Struktur beim Erstellen eines HTML-Formulars trägt dazu bei, dass das Formular sowohl verwendbar als auch zugänglich ist.

Das <form>-Element

Das Element <form> definiert formal ein Formular und Attribute, die das Verhalten des Formulars bestimmen. Jedes Mal, wenn Sie ein HTML-Formular erstellen möchten, müssen Sie es mit diesem Element starten und den gesamten Inhalt darin verschachteln. Viele Hilfstechnologien und Browser-Plugins können <form>-Elemente erkennen und spezielle Hooks implementieren, um deren Verwendung zu vereinfachen. Das haben wir bereits im vorherigen Artikel kennengelernt.

Die Elemente <fieldset> und <legend> Das Element <fieldset> ist eine bequeme Möglichkeit, Gruppen von Widgets zu erstellen, die den gleichen Zweck haben, für Stil- und Semantikzwecke. Sie können ein <fieldset> beschriften, indem Sie ein <legend>-Element direkt unter dem öffnenden <fieldset>-Tag einfügen. Der Textinhalt von <legend> beschreibt formal den Zweck des darin enthaltenen <fieldset>. Viele Hilfstechnologien verwenden das <legend>-Element, als ob es ein Teil des Labels jedes Steuerelements innerhalb des entsprechenden <fieldset>-Elements wäre. Einige Bildschirmleseprogramme wie Jaws und NVDA sprechen beispielsweise den Inhalt der Legende, bevor sie die Beschriftung jedes Steuerelements sprechen.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>fieldset and legend example</title>
</head>

<body>
    <form>
        <fieldset>
            <legend>Fruchtsaft Größe</legend>
            <p> <input type="radio" name="size" id="size_1" value="small"> <label for="size_1">Klein</label> </p>
            <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">Mittel</label> </p>
            <p> <input type="radio" name="size" id="size_3" value="large"> <label for="size_3">Groß</label> </p>
        </fieldset>
    </form>
</body>

</html>

Der Anwendungsfall in diesem Beispiel ist einer der wichtigsten. Jedes Mal, wenn Sie über eine Reihe von Optionsfeldern verfügen, sollten Sie diese in einem <fieldset>-Element verschachteln. Es gibt andere Anwendungsfälle, und im Allgemeinen kann das Element <fieldset> auch verwendet werden, um ein Formular zu unterteilen. Idealerweise sollten lange Formulare über mehrere Seiten verteilt werden, aber wenn ein Formular lang wird und sich auf einer einzigen Seite befinden muss, verbessert das Einfügen der verschiedenen verwandten Abschnitte in verschiedene Fieldsets die Benutzerfreundlichkeit.

Das Label-Element

Labels sind auch anklickbar! Ein weiterer Vorteil von richtig eingerichteten Labels besteht darin, dass Sie auf das Label klicken oder tippen können, um das entsprechende Widget zu aktivieren. Dies ist nützlich für Steuerelemente wie Texteingaben, bei denen Sie sowohl auf die Beschriftung als auch auf die Eingabe klicken können, um sie zu fokussieren, aber es ist besonders nützlich für Optionsfelder und Kontrollkästchen – der Trefferbereich eines solchen Steuerelements kann sehr klein sein, daher ist es nützlich, um die Aktivierung so einfach wie möglich zu machen. Wenn Sie beispielsweise im folgenden Beispiel auf den Beschriftungstext „Ich mag Kirsche“ klicken, wird der ausgewählte Status des Kontrollkästchens taste_cherry umgeschaltet.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    </head>
<body>
    <form>
        <p>
          <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
          <label for="taste_1">Ich mag Kirschen</label>
        </p>
        <p>
          <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
          <label for="taste_2">I mag Bananen</label>
        </p>
      </form>
</body>
</html>