Formulare

Formulare sind das Herz jeder Web-Anwendung. Der Browser bringt erstaunlich viel schon mit: passende Tastaturen, Datumsauswahl und Prüfung der Eingaben.

Was du am Ende kannst

• ein Formular mit den wichtigsten Feldtypen bauen
• jedes Feld korrekt beschriften
• Pflichtfelder und einfache Prüfungen ohne JavaScript umsetzen
• zusammengehörige Felder gruppieren

Live-Coding zum Mitmachen

⤓ demo-04-formulare.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: bilder/laufstrecke.svg, index.html, kontakt.html, termine.html

Der Rahmen

<form action="/anfrage" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text">
  <button type="submit">Absenden</button>
</form>

• action gibt an, wohin die Daten gehen, und method, wie. Das sind die beiden HTTP-Methoden vom Anfang des Tages: get hängt die Daten sichtbar an die URL (gut für Suchen), post schickt sie im Body der Anfrage (für alles, was etwas ändert).
• name ist der Schlüssel, unter dem der Server den Wert erhält. Ohne name wird das Feld gar nicht gesendet.
• Was der Server damit tut, gehört nicht mehr zu HTML. In dieser Schulung geht nichts wirklich ab.

Beschriftung: label

Jedes Feld braucht ein label. for verweist auf die id des Feldes, oder das Feld steht direkt im label.

Klicke auf die beiden Texte

<p><input type="checkbox"> Ohne label: Nur das winzige Kästchen ist klickbar.</p>
<p><label><input type="checkbox"> Mit label: Auch ein Klick auf den Text kreuzt an.</label></p>

Das label tut dreierlei: Es vergrößert die Klickfläche, es wird vom Screenreader vorgelesen, und es bleibt sichtbar, wenn man tippt.

Der häufigste Fehler

Ein placeholder ist kein Ersatz für ein label. Er verschwindet beim Tippen, hat oft schwachen Kontrast und wird nicht zuverlässig vorgelesen.

Feldtypen

input wechselt mit type sein Verhalten. Auf dem Handy passt sich sogar die Tastatur an.

Probiere die Felder aus und sende leer ab

<form>
  <p><label for="a">Text</label><br><input id="a" type="text"></p>
  <p><label for="b">E-Mail</label><br><input id="b" type="email" required></p>
  <p><label for="c">Zahl</label><br><input id="c" type="number" min="1" max="42"></p>
  <p><label for="d">Datum</label><br><input id="d" type="date"></p>
  <p><label for="e">Farbe</label><br><input id="e" type="color"></p>
  <p><label for="f">Tempo</label><br><input id="f" type="range" min="1" max="10"></p>
  <button>Prüfen lassen</button>
</form>

Dazu kommen textarea für längeren Text und select für eine Auswahlliste. radio heißt: genau eine Option; checkbox: beliebig viele. Radio-Buttons gehören zusammen, wenn sie denselben name haben.

Prüfung durch den Browser

Attribut	Wirkung
required	Pflichtfeld
type="email"	muss wie eine E-Mail-Adresse aussehen
min, max	Grenzen bei Zahlen und Datum
minlength, maxlength	Länge von Text
pattern="[0-9]{5}"	regulärer Ausdruck, hier fünf Ziffern

Hinweis

Diese Prüfung dient dem Komfort, nicht der Sicherheit. Der Server muss alles noch einmal prüfen, denn jede Prüfung im Browser lässt sich umgehen.

Gruppieren und Helfen

• fieldset mit legend fasst Felder zusammen und benennt die Gruppe. Bei Radio-Buttons ist das fast immer richtig.
• autocomplete="email" und Co. lassen den Browser Felder vorausfüllen.
• aria-describedby verbindet ein Feld mit einem Hilfetext, der mit vorgelesen wird.

Live-Coding: Das Kontaktformular

kontakt.html

  <main>
    <h1>Kontakt</h1>
    <p>Felder mit * sind Pflichtfelder.</p>

    <form action="#" method="post">
      <p>
        <label for="name">Name *</label><br>
        <input id="name" name="name" type="text" autocomplete="name" required>
      </p>
      <p>
        <label for="mail">E-Mail *</label><br>
        <input id="mail" name="mail" type="email" autocomplete="email" required>
      </p>
      <p>
        <label for="thema">Worum geht es?</label><br>
        <select id="thema" name="thema">
          <option>Probetraining</option>
          <option>Mitgliedschaft</option>
          <option>Sonstiges</option>
        </select>
      </p>
      <fieldset>
        <legend>Wie schnell läufst du?</legend>
        <p><label><input type="radio" name="tempo" value="gemuetlich" checked> gemütlich</label></p>
        <p><label><input type="radio" name="tempo" value="zuegig"> zügig</label></p>
      </fieldset>
      <p>
        <label for="nachricht">Deine Nachricht *</label><br>
        <textarea id="nachricht" name="nachricht" rows="5" required></textarea>
      </p>
      <p><label><input type="checkbox" name="rueckruf"> Bitte ruft mich zurück</label></p>
      <p><button type="submit">Absenden</button></p>
    </form>
  </main>

  <footer>

Übung

Starter für die Übung

⤓ uebung-04-formulare.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: anmeldung.html, bilder/laufstrecke.svg, index.html, kontakt.html, termine.html

Der Verein veranstaltet einen Stadtlauf und braucht in anmeldung.html ein Formular.

Stufe 1: Grundlage

Felder für Vorname, Nachname und E-Mail, jeweils mit label, dazu einen Button zum Absenden. Alle drei sind Pflichtfelder. Teste das Absenden mit leeren Feldern.

Stufe 2: Auswahl

Ergänze die Strecke (5 km, 10 km, Halbmarathon) als Radio-Buttons in einem fieldset und die T-Shirt-Größe (S, M, L) als select.

Stufe 3: Feinschliff

Ergänze das Geburtsjahr als Zahl von 1920 bis 2020, passende autocomplete-Werte und eine Checkbox „Ich habe die Teilnahmeregeln gelesen“, die Pflicht ist.

Für Schnelle

Ein Feld „Postleitzahl“ mit pattern und inputmode="numeric", dazu ein Hilfetext über aria-describedby. Unterteile die T-Shirt-Größen mit optgroup in „Normal“ und „Tailliert“.