Wie man ein Webformular strukturiert
Nachdem die Grundlagen geklärt sind, schauen wir uns nun genauer die Elemente an, die verwendet werden, um den verschiedenen Teilen eines Formulars Struktur und Bedeutung zu verleihen.
| Voraussetzungen: | Ein grundlegendes Verständnis von HTML. |
|---|---|
| Ziel: | Zu verstehen, wie HTML-Formulare strukturiert werden und ihnen Semantik gegeben wird, damit sie benutzbar und zugänglich sind. |
Die Flexibilität von Formularen macht sie zu einer der komplexesten Strukturen in HTML; Sie können jedes beliebige grundlegende Formular mit dedizierten Formularelementen und Attributen erstellen. Wenn Sie beim Erstellen eines HTML-Formulars die richtige Struktur verwenden, stellen Sie sicher, dass das Formular sowohl benutzbar als auch zugänglich ist.
Das <form>-Element
Das <form>-Element definiert formell 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 beginnen und alle Inhalte darin verschachteln. Viele unterstützende Technologien und Browser-Plugins können <form>-Elemente entdecken und spezielle Hooks implementieren, die sie leichter benutzbar machen.
Dies haben wir bereits im vorherigen Artikel kennengelernt.
Warnung: Es ist strengstens verboten, ein Formular innerhalb eines anderen Formulars zu verschachteln. Verschachtelungen können dazu führen, dass Formulare unvorhersehbar agieren, daher ist es eine schlechte Idee.
Es ist immer möglich, ein Formularelement außerhalb eines <form>-Elements zu verwenden. Wenn Sie dies tun, hat dieses Kontrollkästchen standardmäßig nichts mit einem Formular zu tun, es sei denn, Sie verknüpfen es über sein form-Attribut mit einem Formular. Dies wurde eingeführt, um Ihnen die Möglichkeit zu geben, ein Kontrollelement explizit mit einem Formular zu verknüpfen, auch wenn es nicht darin verschachtelt ist.
Lasst uns fortfahren und die strukturellen Elemente behandeln, die Sie innerhalb eines Formulars verschachtelt finden.
Die <fieldset>- und <legend>-Elemente
Das <fieldset>-Element ist eine bequeme Möglichkeit, Gruppen von Widgets zu erstellen, die denselben Zweck teilen, sowohl für Stil- als auch für semantische Zwecke. Sie können ein <fieldset> beschriften, indem Sie ein <legend>-Element direkt unterhalb des öffnenden <fieldset>-Tags einfügen. Der Textinhalt des <legend> beschreibt formal den Zweck des darin enthaltenen <fieldset>.
Viele unterstützende Technologien verwenden das <legend>-Element, als wäre es ein Teil der Bezeichnung jedes Steuerungselements innerhalb des entsprechenden <fieldset>-Elements. Zum Beispiel werden einige Bildschirmlesegeräte wie Jaws und NVDA den Inhalt der Legende sprechen, bevor sie die Bezeichnung jedes Steuerungselements aussprechen.
Hier ist ein Beispiel:
<form>
<fieldset>
<legend>Fruit juice size</legend>
<p>
<input type="radio" name="size" id="size_1" value="small" />
<label for="size_1">Small</label>
</p>
<p>
<input type="radio" name="size" id="size_2" value="medium" />
<label for="size_2">Medium</label>
</p>
<p>
<input type="radio" name="size" id="size_3" value="large" />
<label for="size_3">Large</label>
</p>
</fieldset>
</form>
Dies wird wie folgt dargestellt:
Wenn das obige Formular gelesen wird, wird ein Bildschirmlesegerät "Fruchtsaftgröße klein" für das erste Optionsfeld aussprechen, "Fruchtsaftgröße mittel" für das zweite und "Fruchtsaftgröße groß" für das dritte.
Jedes Mal, wenn Sie eine Gruppe von Optionsfeldern haben, sollten Sie diese innerhalb eines <fieldset>-Elements verschachteln. Es gibt andere Anwendungsfälle, und im Allgemeinen kann das <fieldset>-Element 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 Platzieren der verschiedenen verwandten Abschnitte in verschiedenen Fieldsets die Benutzerfreundlichkeit.
Aufgrund seines Einflusses auf unterstützende Technologien ist das <fieldset>-Element eines der Schlüsselelemente zum Aufbau zugänglicher Formulare; es liegt jedoch in Ihrer Verantwortung, es nicht zu missbrauchen. Wenn möglich, versuchen Sie jedes Mal, wenn Sie ein Formular erstellen, zuzuhören, wie ein Bildschirmlesegerät es interpretiert. Wenn es seltsam klingt, versuchen Sie, die Formularstruktur zu verbessern.
Das <label>-Element
Wie wir im vorherigen Artikel gesehen haben, ist das <label>-Element der formelle Weg, einen Beschriftungstext für ein HTML-Formularelement zu definieren. Dies ist das wichtigste Element, wenn Sie zugängliche Formulare erstellen möchten — wenn es richtig implementiert ist, werden Bildschirmleser den Beschriftungstext eines Formularelements zusammen mit allen zugehörigen Anweisungen sprechen, und es ist auch für sehende Benutzer nützlich. Nehmen Sie dieses Beispiel, das wir im vorherigen Artikel gesehen haben:
<label for="name">Name:</label> <input type="text" id="name" name="user_name" />
Mit dem <label>, das korrekt über sein for-Attribut (welches das id-Attribut des <input>-Elements enthält) mit dem <input> verbunden ist, wird ein Bildschirmleser etwas wie "Name, Bearbeitungstext" ausgeben.
Es gibt einen anderen Weg, um ein Formularelement mit einem Beschriftungstext zu verknüpfen — das Formularelement innerhalb des <label>-Elements zu verschachteln und es implizit zu verknüpfen.
<label for="name">
Name: <input type="text" id="name" name="user_name" />
</label>
Auch in solchen Fällen wird jedoch empfohlen, das for-Attribut zu setzen, um sicherzustellen, dass alle unterstützenden Technologien die Beziehung zwischen Beschriftung und Widget verstehen.
Wenn es keine Beschriftung gibt oder wenn das Formularelement weder implizit noch explizit mit einer Beschriftung verknüpft ist, wird ein Bildschirmleser etwas wie "Bearbeitungstext leer" ausgeben, was überhaupt nicht sehr hilfreich ist.
Beschriftungen sind ebenfalls anklickbar!
Ein weiterer Vorteil von korrekt eingerichteten Beschriftungen ist, dass Sie die Beschriftung anklicken oder antippen können, um das entsprechende Widget zu aktivieren. Dies ist nützlich für Steuerungselemente wie Texteingaben, bei denen Sie sowohl die Beschriftung als auch die Eingabe anklicken können, um sie zu fokussieren. Besonders nützlich ist dies jedoch bei Optionsfeldern und Kontrollkästchen — der Bereich eines solchen Steuerungselements kann sehr klein sein, daher ist es nützlich, es so einfach wie möglich zu aktivieren.
Wenn Sie beispielsweise auf den Text der Beschriftung "Ich mag Kirsche" im folgenden Beispiel klicken, wird der ausgewählte Zustand des Kontrollkästchens taste_cherry umgeschaltet:
<form>
<p>
<input type="checkbox" id="taste_1" name="taste_cherry" value="cherry" />
<label for="taste_1">I like cherry</label>
</p>
<p>
<input type="checkbox" id="taste_2" name="taste_banana" value="banana" />
<label for="taste_2">I like banana</label>
</p>
</form>
Probieren Sie es aus:
Mehrere Beschriftungen
Streng genommen können Sie einem einzigen Widget mehrere Beschriftungen zuweisen, aber das ist keine gute Idee, da einige unterstützende Technologien Schwierigkeiten damit haben können. Im Falle mehrerer Beschriftungen sollten Sie ein Widget und seine Beschriftungen innerhalb eines einzigen <label>-Elements verschachteln.
Betrachten Sie dieses Beispiel:
<p>Please complete all required (*) fields.</p>
<!-- So this: -->
<!--<div>
<label for="username">Name:</label>
<input id="username" type="text" name="username" required />
<label for="username">*</label>
</div>-->
<!-- would be better done like this: -->
<!--<div>
<label for="username">
<span>Name:</span>
<input id="username" type="text" name="username" required />
<span>*</span>
</label>
</div>-->
<!-- But this is probably best: -->
<div>
<label for="username">Name *:</label>
<input id="username" type="text" name="username" required />
</div>
Der Absatz oben gibt eine Regel für erforderliche Elemente an. Die Regel muss bevor sie verwendet wird enthalten sein, sodass sehende Benutzer und Benutzer von unterstützenden Technologien (AT) wie Bildschirmlesegeräten erfahren können, was sie bedeutet, bevor sie ein erforderliches Element begegnen.
Häufige HTML-Strukturen, die mit Formularen verwendet werden
Abgesehen von den für Webformulare spezifischen Strukturen ist es gut, sich daran zu erinnern, dass Formular-Markup nur HTML ist. Das bedeutet, dass Sie die gesamte Leistungsfähigkeit von HTML nutzen können, um ein Webformular zu strukturieren.
Wie Sie in den Beispielen sehen können, ist es gängige Praxis, eine Beschriftung und ihr Widget mit einem <li>-Element innerhalb einer <ul>- oder <ol>-Liste zu umschließen. Auch <p>- und <div>-Elemente werden häufig verwendet. Listen werden empfohlen, um mehrere Kontrollkästchen oder Optionsfelder zu strukturieren.
Zusätzlich zum <fieldset>-Element ist es auch gängige Praxis, HTML-Überschriften (z.B. h1, h2) und Abschnitts-Elemente (z.B. <section>) zu verwenden, um komplexe Formulare zu strukturieren.
Vor allem liegt es an Ihnen, einen komfortablen Kodierungsstil zu finden, der zu zugänglichen, benutzbaren Formularen führt. Jeder separate Funktionsbereich sollte in einem separaten <section>-Element enthalten sein, mit <fieldset>-Elementen zur Aufnahme von Optionsfeldern.
Eine Formularstruktur erstellen
Lassen Sie uns diese Ideen in die Praxis umsetzen und ein etwas komplexeres Formular erstellen — ein Zahlungsformular. Dieses Formular wird einige Steuerungstypen enthalten, die Ihnen möglicherweise noch unbekannt sind. Machen Sie sich darüber keine Gedanken; Sie werden in dem nächsten Artikel (Grundlegende native Formularelemente) erfahren, wie sie funktionieren. Für jetzt lesen Sie die Beschreibungen sorgfältig durch, während Sie den unten stehenden Anweisungen folgen, und beginnen Sie, ein Verständnis dafür zu entwickeln, welche Umgebungs-Elemente wir zur Strukturierung des Formulars verwenden und warum.
-
Erstellen Sie zunächst eine lokale Kopie unserer leeren Vorlage in einem neuen Verzeichnis auf Ihrem Computer.
-
Erstellen Sie als Nächstes Ihr Formular, indem Sie ein
<form>-Element hinzufügen:html<form> -
Fügen Sie innerhalb des
<form>-Elements eine Überschrift und einen Absatz hinzu, um die Benutzer darüber zu informieren, wie Pflichtfelder gekennzeichnet sind:html<h1>Payment form</h1> <p>Please complete all required (*) fields.</p> -
Nun fügen wir einen größeren Codeabschnitt in das Formular ein, unterhalb unseres vorherigen Eintrags. Hier sehen Sie, dass wir die Kontaktinformationen innerhalb eines eigenen
<section>-Elements umschließen. Außerdem haben wir eine Gruppe von drei Optionsfeldern, von denen jedes in einem eigenen Listen-(<li>)-Element platziert ist. Wir haben auch zwei Standard-Text-<input>s und ihre zugehörigen<label>-Elemente, die jeweils in einem<p>enthalten sind, sowie eine Passworteingabe für das Eingeben eines Passworts. Fügen Sie diesen Code Ihrem Formular hinzu:html<section> <h2>Contact information</h2> <fieldset> <legend>Title</legend> <ul> <li> <label for="title_1"> <input type="radio" id="title_1" name="title" value="A" /> Ace </label> </li> <li> <label for="title_2"> <input type="radio" id="title_2" name="title" value="K" /> King </label> </li> <li> <label for="title_3"> <input type="radio" id="title_3" name="title" value="Q" /> Queen </label> </li> </ul> </fieldset> <p> <label for="name">Name *:</label> <input type="text" id="name" name="username" required /> </p> <p> <label for="mail">Email *:</label> <input type="email" id="mail" name="user-mail" required /> </p> <p> <label for="pwd">Password *:</label> <input type="password" id="pwd" name="password" required /> </p> </section> -
Der zweite
<section>-Teil unseres Formulars beinhaltet die Zahlungsinformationen. Wir haben drei separate Steuerelemente zusammen mit ihren Beschriftungen, die jeweils in einem<p>enthalten sind. Das erste ist ein Dropdown-Menü (<select>) zur Auswahl des Kreditkartentyps. Das zweite ist ein<input>-Element des Typstel, um eine Kreditkartennummer einzugeben; obwohl wir den Typnumberverwenden könnten, wollen wir die Spinner-Oberfläche für Zahlen vermeiden. Das letzte ist ein<input>-Element des Typstext, um das Ablaufdatum der Karte einzugeben; es enthält ein placeholder-Attribut, das das korrekte Format angibt, und ein pattern, das prüft, ob das eingegebene Datum das korrekte Format hat. Diese neueren Eingabetypen werden im Artikel Die Input-Typen in HTML5 erneut vorgestellt.Geben Sie das Folgende unterhalb des vorherigen Abschnitts ein:
html<section> <h2>Payment information</h2> <p> <label for="card"> <span>Card type:</span> </label> <select id="card" name="user-card"> <option value="visa">Visa</option> <option value="mc">Mastercard</option> <option value="amex">American Express</option> </select> </p> <p> <label for="number">Card number *:</label> <input type="tel" id="number" name="card-number" required /> </p> <p> <label for="expiration">Expiration date *:</label> <input type="text" id="expiration" name="expiration" required placeholder="MM/YY" pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$" /> </p> </section> -
Der letzte Abschnitt, den wir hinzufügen, ist viel einfacher und enthält nur einen
<button>vom Typsubmit, um die Formulardaten zu übermitteln. Fügen Sie dies jetzt am Ende Ihres Formulars hinzu:html<section> <p> <button type="submit">Validate the payment</button> </p> </section> -
Schließen Sie Ihr Formular schließlich ab, indem Sie das äußere
<form>-Schlusszeichen hinzufügen:html</form>
Wir haben einige zusätzliche CSS zu dem fertigen Formular unten hinzugefügt. Wenn Sie Änderungen am Aussehen Ihres Formulars vornehmen möchten, können Sie Stile aus dem Beispiel kopieren oder Styling von Webformularen besuchen.
Zusammenfassung
Sie haben nun alles Wissen, das Sie benötigen, um Ihre Webformulare korrekt zu strukturieren. Wir werden viele der hier eingeführten Funktionen in den nächsten Artikeln behandeln, und der nächste Artikel wird sich genauer mit der Verwendung all der verschiedenen Formular-Widgets befassen, die Sie für die Erfassung von Informationen von Ihren Benutzern verwenden möchten.