Wie man ein Webformular strukturiert

Das <form>-Element

Das <form>-Element definiert formal ein Formular sowie 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 Assistenztechnologien und Browser-Plugins können <form>-Elemente erkennen und spezielle Hooks implementieren, um die Nutzung zu erleichtern.

Wir haben dies bereits im vorherigen Artikel kennengelernt.

Es ist immer möglich, eine Formulareingabe außerhalb eines <form>-Elements zu verwenden. Wenn Sie dies tun, hat diese Eingabe standardmäßig nichts mit einem Formular zu tun, es sei denn, Sie verknüpfen es mit einem Formular, indem Sie das form-Attribut verwenden. Dies wurde eingeführt, um Ihnen die Möglichkeit zu geben, eine Eingabe explizit mit einem Formular zu verknüpfen, selbst wenn es nicht darin verschachtelt ist.

Gehen wir weiter und behandeln die Strukturelemente, die Sie in einem Formular finden.

Die <fieldset>- und <legend>-Elemente

Das <fieldset>-Element ist eine bequeme Möglichkeit, Gruppen von Widgets zu erstellen, die denselben Zweck haben, sowohl für stilistische als auch für semantische Zwecke. Sie können ein <fieldset> beschriften, indem Sie ein <legend>-Element direkt unter dem öffnenden <fieldset>-Tag hinzufügen. Der Textinhalt des <legend> beschreibt formell den Zweck des enthaltenen <fieldset>.

Viele Assistenztechnologien nutzen das <legend>-Element so, als wäre es ein Teil des Labels jedes Steuerelements innerhalb des entsprechenden <fieldset>-Elements. Zum Beispiel sprechen einige Bildschirmleser wie Jaws und NVDA den Inhalt der Legende, bevor sie das Label jedes Steuerelements sprechen.

Hier ist ein kleines 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>

Beim Lesen des obigen Formulars sagt ein Bildschirmleser "Fruchtjuicegröße klein" für das erste Widget, "Fruchtjuicegröße mittel" für das zweite und "Fruchtjuicegröße groß" für das dritte.

Der in diesem Beispiel gezeigte Anwendungsfall ist einer der wichtigsten. Jedes Mal, wenn Sie eine Gruppe von Optionsschaltflächen haben, sollten Sie diese innerhalb eines <fieldset>-Elements verschachteln. Es gibt andere Anwendungsfälle und im Allgemeinen kann das <fieldset>-Elemement auch verwendet werden, um ein Formular zu gliedern. Idealerweise sollten lange Formulare über mehrere Seiten verteilt sein, aber wenn ein Formular lang und auf einer einzigen Seite gehalten werden muss, verbessert das Platzieren der verschiedenen verwandten Abschnitte in verschiedenen Fieldsets die Nutzbarkeit.

Aufgrund seines Einflusses auf die Assistenztechnologie ist das <fieldset>-Element eines der Schlüsselkriterien zum Erstellen zugänglicher Formulare; jedoch liegt es in Ihrer Verantwortung, es nicht zu missbrauchen. Wenn möglich, sollten Sie jedes Mal, wenn Sie ein Formular erstellen, anhören, wie ein Bildschirmleser es interpretiert. Wenn es sich merkwürdig anhört, versuchen Sie, die Formularstruktur zu verbessern.

Das <label>-Element

Wie im vorherigen Artikel gesehen, ist das <label>-Element die formale Möglichkeit, ein Label für ein HTML-Formular-Widget zu definieren. Dies ist das wichtigste Element, wenn Sie zugängliche Formulare erstellen möchten — bei korrekter Implementierung werden Bildschirmleser das Label eines Formularelements zusammen mit allen zugehörigen Anweisungen vorlesen, was sowohl für sehende Benutzer als auch für Benutzer von Assistenztechnologien nützlich ist. 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 mit dem <input>-Element verbunden ist (das die id-Attribut des <input>-Elements enthält), wird ein Bildschirmleser etwas wie "Name, Text bearbeiten" vorlesen.

Es gibt eine andere Möglichkeit, eine Formulareingabe mit einem Label zu verknüpfen — verschachteln Sie die Formulareingabe innerhalb des <label>, wodurch es implizit verknüpft wird.

<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 Assistenztechnologien die Beziehung zwischen Label und Widget verstehen.

Wenn es kein Label gibt oder wenn die Formulareingabe weder implizit noch explizit mit einem Label verknüpft ist, wird ein Bildschirmleser etwas wie "Text bearbeiten leer" vorlesen, was gar nicht sehr hilfreich ist.

Labels sind ebenfalls anklickbar!

Ein weiterer Vorteil von ordentlich eingerichteten Labels ist, dass Sie das Label anklicken oder tippen können, um das entsprechende Widget zu aktivieren. Dies ist nützlich für Steuerelemente wie Texteingaben, bei denen Sie sowohl das Label als auch die Eingabe anklicken können, um es zu fokussieren, aber es ist besonders nützlich für Optionsschaltflächen und Kontrollkästchen — der Trefferbereich eines solchen Steuerelements kann sehr klein sein, daher ist es hilfreich, ihn so einfach wie möglich zu aktivieren.

Wenn Sie beispielsweise auf den "Ich mag Kirschgeschmack"-Text im Beispiel unten klicken, wird der ausgewählte Status des taste_cherry Kontrollkästchens 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>

Mehrere Labels

Streng genommen können Sie mehrere Labels auf ein einzelnes Widget anwenden, aber das ist keine gute Idee, da einige Assistenztechnologien Probleme damit haben können. Im Falle mehrerer Labels sollten Sie ein Widget und seine Labels in einem einzigen <label>-Element verschachteln.

Betrachten wir 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 vor der Verwendung enthalten sein, damit sehende Benutzer und Benutzer von Assistenztechnologien (AT) wie Bildschirmlesern verstehen, was sie bedeutet, bevor sie auf erforderliche Elemente treffen.

Gemeinsame HTML-Strukturen, die mit Formularen verwendet werden

Neben den formularspezifischen Strukturen ist es gut zu wissen, dass Formulare mit HTML nur HTML-Markup sind. Das bedeutet, dass Sie die volle Macht von HTML nutzen können, um ein Webformular zu strukturieren.

Wie Sie in den Beispielen sehen können, ist es eine gängige Praxis, ein Label und sein Widget mit einem <li>-Element innerhalb einer <ul>- oder <ol>-Liste zu umschließen. <p>- und <div>-Elemente werden ebenfalls häufig verwendet. Listen werden empfohlen, um mehrere Kontrollkästchen oder Optionsschaltflächen zu strukturieren.

Zusätzlich zum <fieldset>-Element ist es auch üblich, HTML-Titel (z.B. h1, h2) und Abschnittsunterteilung (z.B. <section>) zu verwenden, um komplexe Formulare zu strukturieren.

Vor allem liegt es an Ihnen, einen angenehmen Codierstil zu finden, der zu zugänglichen, nutzbaren Formularen führt. Jeder separate Funktionsbereich sollte in ein separates <section>-Element eingebettet werden, mit <fieldset>-Elementen, um Optionsschaltflächen zu enthalten.

Eine Formularstruktur erstellen

Lassen Sie uns diese Ideen in die Praxis umsetzen und ein etwas komplexeres Formular erstellen — ein Zahlungsformular. Dieses Formular wird einige Arten von Steuerelementen enthalten, die Sie möglicherweise noch nicht verstehen. Keine Sorge, das werden Sie im nächsten Artikel kennenlernen (Basis native Formularelemente). Für den Moment lesen Sie die Beschreibungen sorgfältig, während Sie den folgenden Anweisungen folgen und beginnen Sie ein Verständnis dafür zu entwickeln, welche Umwickelungselemente wir verwenden, um das Formular zu strukturieren und warum.

1. Erstellen Sie zunächst eine lokale Kopie unserer leeren Vorlagendatei in einem neuen Ordner auf Ihrem Computer.

2. Erstellen Sie als nächstes Ihr Formular, indem Sie ein <form>-Element hinzufügen:

   html

   <form>
   

3. Fügen Sie innerhalb des <form>-Elements eine Überschrift und einen Absatz hinzu, um die Benutzer darüber zu informieren, wie erforderliche Felder gekennzeichnet sind:

   html

   <h1>Payment form</h1>
   <p>Please complete all required (*) fields.</p>
   

4. Als nächstes fügen wir einen größeren Codeabschnitt in das Formular ein, unterhalb unseres vorherigen Eintrags. Hier sehen Sie, dass wir die Kontaktinformationsfelder innerhalb eines eigenen <section>-Elements einbetten. Zudem haben wir eine Gruppe von drei Optionsschaltflächen, die wir jeweils in ein eigenes Listen-(<li>)-Element setzen. Wir haben auch zwei Standardtext-<input>s und deren zugehörige <label>-Elemente, die jeweils in einem <p> enthalten sind, und eine Passworteingabe für das Eingeben eines Passworts. Fügen Sie diesen Code zu 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>
   

5. Der zweite <section> unseres Formulars ist die Zahlungsinformation. Wir haben drei verschiedene Steuerelemente zusammen mit ihren Labels, die jeweils in einem <p> enthalten sind. Das erste ist ein Drop-Down-Menü (<select>) zur Auswahl des Kreditkartentyps. Das zweite ist ein <input>-Element vom Typ tel, um eine Kreditkartennummer einzugeben; während wir den number-Typ hätten verwenden können, möchten wir nicht die Nummer-Spinning-Benutzeroberfläche. Das letzte ist ein <input>-Element vom Typ text, um das Ablaufdatum der Karte einzugeben; dies enthält ein placeholder-Attribut, das das korrekte Format angibt, und ein pattern, das testet, ob das eingegebene Datum das richtige Format hat. Diese neueren Eingabetypen werden in Die HTML5-Eingabetypen erneut eingeführt.

   Geben Sie folgendes unter dem vorherigen Abschnitt 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>
   

6. Der letzte Abschnitt, den wir hinzufügen, ist viel einfacher und enthält nur einen <button> vom Typ submit, um die Formulardaten zu senden. Fügen Sie dies nun unten in Ihr Formular ein:

   html

   <section>
     <p>
       <button type="submit">Validate the payment</button>
     </p>
   </section>
   

7. Zum Abschluss fügen Sie Ihrem Formular das schließende <form>-Tag hinzu:

   html

   </form>
   

   h1 {
     margin-top: 0;
   }
   
   ul {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   
   form {
     margin: 0 auto;
     width: 400px;
     padding: 1em;
     border: 1px solid #cccccc;
     border-radius: 1em;
   }
   
   div + div {
     margin-top: 1em;
   }
   
   label span {
     display: inline-block;
     text-align: right;
   }
   
   input,
   textarea {
     font: 1em sans-serif;
     width: 250px;
     box-sizing: border-box;
     border: 1px solid #999999;
   }
   
   input[type="checkbox"],
   input[type="radio"] {
     width: auto;
     border: none;
   }
   
   input:focus,
   textarea:focus {
     border-color: black;
   }
   
   textarea {
     vertical-align: top;
     height: 5em;
     resize: vertical;
   }
   
   fieldset {
     width: 250px;
     box-sizing: border-box;
     border: 1px solid #999999;
   }
   
   button {
     margin-top: 20px;
   }
   
   label {
     display: inline-block;
   }
   
   p label {
     width: 100%;
   }
   

Wir haben dem fertigen Formular unten einige zusätzliche CSS hinzugefügt. Wenn Sie Änderungen an der Darstellung Ihres Formulars vornehmen möchten, können Sie Stile aus dem Beispiel kopieren oder Styling von Webformularen besuchen.

Zusammenfassung

Sie verfügen nun über das Wissen, das Sie benötigen, um Ihre Webformulare richtig zu strukturieren. Wir werden viele der hier eingeführten Funktionen in den nächsten Artikeln behandeln. Der nächste Artikel wirft einen genaueren Blick darauf, wie Sie alle verschiedenen Arten von Formular-Widgets verwenden können, die Sie benötigen, um Informationen von Ihren Benutzern zu sammeln.

Siehe auch

• A List Apart: Sensible Forms: A Form Usability Checklist

• Zurück
• Übersicht: Webformulare
• Weiter