HTML-Formularvorlagen

Eine HTML-Formularvorlage ist ein fertiger, wiederverwendbarer Block aus Formular-Markup, den man in ein Projekt kopieren und anpassen kann. Die meisten Web-Applikationen benötigen immer wieder dieselben Formulare — Kontakt, Login, Registrierung, Feedback — daher beginnt man statt einer kompletten Neuentwicklung mit einer sauberen, korrekten Vorlage und ändert nur die Beschriftungen, Felder und den Submit-Endpunkt.

Das Arbeiten mit einer Vorlage hat echte Vorteile:

• Konsistenz — jedes Formular verwendet dieselbe Struktur, sodass Styling und Validierung auf der gesamten Website vorhersehbar funktionieren.
• Geschwindigkeit — man überspringt den Boilerplate-Code und konzentriert sich auf die Felder, die tatsächlich spezifisch für das jeweilige Formular sind.
• Barrierefreiheit von Anfang an — eine gute Vorlage verknüpft bereits jedes <label> mit seinem Steuerelement, gruppiert verwandte Felder in einem <fieldset> und verwendet die richtigen <input>-Typen, damit Screenreader und Tastaturnutzer eine korrekte Erfahrung erhalten.
• Weniger Fehler — häufige Fehler (ein Label, das auf nichts zeigt, ein fehlender name, der falsche Input-Typ) sind bereits behoben.

Dieses Kapitel bietet drei saubere, valide, kopierfertige Vorlagen — ein Kontaktformular, ein Anmeldeformular und ein Registrierungsformular — sowie eine Kurzreferenz zu den Attributen, die sie zum Funktionieren bringen.

Wichtige Formularattribute

Vor den Vorlagen hier die Attribute, die in jeder von ihnen vorkommen:

Die wichtigste Regel: Jedes Input-Feld benötigt ein Label, und das for-Attribut des Labels muss der id des Inputs entsprechen. Das ist auch der Grund, warum <p for="..."> ungültig ist — nur <label> trägt das for-Attribut.

Vorlage für ein Kontaktformular

Ein minimales Kontaktformular: ein Name, eine E-Mail-Adresse, eine Nachricht und ein Absende-Button. Beachtenswert ist das Feld type="email", das im Browser eine kostenlose Formatvalidierung bietet.

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact us</legend>

    <p>
      <label for="contact-name">Name</label>
      <input type="text" id="contact-name" name="name" required>
    </p>

    <p>
      <label for="contact-email">Email</label>
      <input type="email" id="contact-email" name="email" required>
    </p>

    <p>
      <label for="contact-subject">Subject</label>
      <input type="text" id="contact-subject" name="subject">
    </p>

    <p>
      <label for="contact-message">Message</label>
      <textarea id="contact-message" name="message" rows="5" required></textarea>
    </p>

    <button type="submit">Send message</button>
  </fieldset>
</form>

Das <textarea>-Element wird für mehrzeilige Eingaben verwendet. Im Unterschied zu <input> besitzt es kein value-Attribut — sein Inhalt steht zwischen dem öffnenden und schließenden Tag, und rows legt die sichtbare Höhe fest.

Vorlage für ein Anmeldeformular

Ein Anmeldeformular ist kurz gehalten: eine Kennung (E-Mail oder Benutzername), ein Passwort und eine optionale „Angemeldet bleiben"-Checkbox. Das Passwortfeld verwendet type="password", damit die Zeichen verdeckt werden.

<form action="/login" method="post">
  <fieldset>
    <legend>Sign in</legend>

    <p>
      <label for="login-email">Email</label>
      <input type="email" id="login-email" name="email" autocomplete="username" required>
    </p>

    <p>
      <label for="login-password">Password</label>
      <input type="password" id="login-password" name="password" autocomplete="current-password" required>
    </p>

    <p>
      <label>
        <input type="checkbox" name="remember" value="yes"> Remember me
      </label>
    </p>

    <button type="submit">Log in</button>
  </fieldset>
</form>

Bei einer einzelnen Checkbox ist es ein gängiges, valides Muster, den Text innerhalb des <label> einzuwickeln — das Label ist dann implizit mit dem enthaltenen Steuerelement verknüpft, sodass kein for/id-Paar benötigt wird. Die autocomplete-Hinweise helfen dem Browser und Passwort-Managern, Anmeldedaten korrekt auszufüllen.

Vorlage für ein Registrierungsformular

Ein Registrierungsformular ist länger und zeigt zwei weitere Steuerelemente: ein <select>-Dropdown und eine Gruppe von Radio-Buttons. Radio-Buttons, die denselben name teilen, bilden eine Gruppe, sodass nur einer gleichzeitig ausgewählt werden kann.

<form action="/register" method="post">
  <fieldset>
    <legend>Create an account</legend>

    <p>
      <label for="reg-name">Full name</label>
      <input type="text" id="reg-name" name="fullname" required>
    </p>

    <p>
      <label for="reg-email">Email</label>
      <input type="email" id="reg-email" name="email" required>
    </p>

    <p>
      <label for="reg-password">Password</label>
      <input type="password" id="reg-password" name="password" autocomplete="new-password" minlength="8" required>
    </p>

    <p>
      <label for="reg-country">Country</label>
      <select id="reg-country" name="country" required>
        <option value="">Choose…</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="de">Germany</option>
        <option value="other">Other</option>
      </select>
    </p>

    <fieldset>
      <legend>Account type</legend>
      <p>
        <label>
          <input type="radio" name="account" value="personal" checked> Personal
        </label>
        <label>
          <input type="radio" name="account" value="business"> Business
        </label>
      </p>
    </fieldset>

    <p>
      <label>
        <input type="checkbox" name="terms" value="agreed" required> I agree to the terms
      </label>
    </p>

    <button type="submit">Register</button>
  </fieldset>
</form>

Einige bemerkenswerte Punkte:

• Die erste <option value=""> ist ein nicht auswählbarer Platzhalter. Da das <select> als required markiert ist, blockiert der Browser die Übermittlung, solange diese leere Option ausgewählt ist.
• minlength="8" beim Passwortfeld erzwingt eine Mindestlänge ohne JavaScript.
• Das innere <fieldset> gruppiert die Radio-Buttons, und sein <legend> dient als Label für die gesamte Gruppe — wichtig für Screenreader-Nutzer.

Verwandte Kapitel

Für eine vertiefte Betrachtung der oben verwendeten Elemente:

• Das <form>-Tag — der Container und seine action/method-Attribute.
• Das <input>-Tag — jeder Input-type und seine Attribute.
• Das <label>-Tag — Labels mit Steuerelementen verknüpfen.
• Das <fieldset>-Tag — verwandte Felder mit einem <legend> gruppieren.
• Das <textarea>-Tag — mehrzeilige Texteingabe.
• Das <select>-Tag — Dropdown-Menüs und Optionen.
• Das <button>-Tag — Absende- und Reset-Buttons.

Eine umfassendere Einführung in die Funktionsweise von Formularen findet sich unter HTML-Formulare.

Übungen