Emzett Digital

Formulare sammeln Eingaben von Besucherinnen und Besuchern: Anmeldung, Suche, Kontakt, Bestellung.

Probier es selbst

Dein Code

Ergebnis

<form> umschließt alles. action ist die Adresse, an die gesendet wird, method ist get (Daten in der Adresse, für Suchen) oder post (Daten im Anfragekörper, für alles Sensible).
<label> ist Pflicht für jedes Feld. Über for und id gehört er zum Feld; ein Klick auf den Text fokussiert das Feld, und Screenreader lesen ihn vor.
name bestimmt den Namen, unter dem der Wert an den Server geht. Felder ohne name werden nicht gesendet.

Eingabetypen

Probier es selbst

Dein Code

Ergebnis

Der richtige type bringt auf Handys die passende Tastatur, prüft Eingaben und liefert Bedienelemente wie Datumswähler.

Auswahlfelder

Probier es selbst

Dein Code

<form>
  <fieldset>
    <legend>Versand</legend>
    <label><input type="radio" name="versand" value="post" checked> Post</label>
    <label><input type="radio" name="versand" value="abholung"> Abholung</label>
  </fieldset>

<fieldset>
    <legend>Extras</legend>
    <label><input type="checkbox" name="extras" value="geschenk"> Geschenkverpackung</label>
    <label><input type="checkbox" name="extras" value="eil" checked> Eilversand</label>
  </fieldset>

<p>
    <label for="land">Land</label>
    <select id="land" name="land">
      <option value="">Bitte wählen</option>
      <optgroup label="DACH">
        <option value="de" selected>Deutschland</option>
        <option value="at">Österreich</option>
        <option value="ch">Schweiz</option>
      </optgroup>
    </select>
  </p>

<p>
    <label for="stadt">Stadt (mit Vorschlägen)</label>
    <input id="stadt" list="staedte">
    <datalist id="staedte"><option value="Berlin"><option value="Bonn"><option value="Bremen"></datalist>
  </p>
</form>

Ergebnis

Radio-Buttons mit gleichem name bilden eine Gruppe (nur eine Auswahl)
Checkboxen erlauben mehrere
<fieldset> mit <legend> fasst zusammengehörige Felder zusammen, wichtig für Screenreader

Validierung im Browser

Probier es selbst

Dein Code

Ergebnis

Attribut	Bedeutung
`required`	Pflichtfeld
`minlength`, `maxlength`	Textlänge
`min`, `max`, `step`	Zahlen und Datum
`pattern`	regulärer Ausdruck
`placeholder`	Hinweis im leeren Feld (kein Ersatz für `label`)
`readonly`, `disabled`	nur lesbar / deaktiviert (wird nicht gesendet)
`autocomplete`	Vorschläge: `name`, `email`, `current-password`, `postal-code`
`autofocus`	Fokus beim Laden

Weitere Elemente

Probier es selbst

Dein Code

Ergebnis

Der type eines Buttons: submit (senden, Standard in Formularen), reset, button (tut nichts, nur für JavaScript).

Formulare zugänglich machen

Jedes Feld hat ein sichtbares <label>
Pflichtfelder sind im Text gekennzeichnet (nicht nur mit Sternchen oder Farbe)
Fehlermeldungen stehen als Text neben dem Feld und werden per aria-describedby verknüpft
Die Tab-Reihenfolge entspricht der Lesereihenfolge
Genug Abstand und Größe für Touch (mindestens 44 × 44 Pixel)

Probier es selbst

Dein Code

Ergebnis

Merke

<form action method> mit Feldern, jedes mit <label for> und name
Passende types (email, number, date, ...) helfen bei Tastatur und Prüfung
Radio-Gruppen über gleichen name; fieldset/legend für Gruppen
required, pattern, min/max prüfen im Browser; der Server prüft trotzdem
placeholder ersetzt kein label

Aufgabe

Baue ein Anmeldeformular mit Name, E-Mail, Passwort, Land (Auswahl), Newsletter (Checkbox) und Absenden-Button, mit sinnvoller Validierung.

Formulare sammeln Eingaben von Besucherinnen und Besuchern: Anmeldung, Suche, Kontakt, Bestellung.

Probier es selbst

Dein Code

Ergebnis

<form> umschließt alles. action ist die Adresse, an die gesendet wird, method ist get (Daten in der Adresse, für Suchen) oder post (Daten im Anfragekörper, für alles Sensible).
<label> ist Pflicht für jedes Feld. Über for und id gehört er zum Feld; ein Klick auf den Text fokussiert das Feld, und Screenreader lesen ihn vor.
name bestimmt den Namen, unter dem der Wert an den Server geht. Felder ohne name werden nicht gesendet.

Eingabetypen

Probier es selbst

Dein Code

Ergebnis

Der richtige type bringt auf Handys die passende Tastatur, prüft Eingaben und liefert Bedienelemente wie Datumswähler.

Auswahlfelder

Probier es selbst

Dein Code

Ergebnis

Radio-Buttons mit gleichem name bilden eine Gruppe (nur eine Auswahl)
Checkboxen erlauben mehrere
<fieldset> mit <legend> fasst zusammengehörige Felder zusammen, wichtig für Screenreader

Validierung im Browser

Probier es selbst

Dein Code

Ergebnis

Attribut	Bedeutung
`required`	Pflichtfeld
`minlength`, `maxlength`	Textlänge
`min`, `max`, `step`	Zahlen und Datum
`pattern`	regulärer Ausdruck
`placeholder`	Hinweis im leeren Feld (kein Ersatz für `label`)
`readonly`, `disabled`	nur lesbar / deaktiviert (wird nicht gesendet)
`autocomplete`	Vorschläge: `name`, `email`, `current-password`, `postal-code`
`autofocus`	Fokus beim Laden

Weitere Elemente

Probier es selbst

Dein Code

Ergebnis

Der type eines Buttons: submit (senden, Standard in Formularen), reset, button (tut nichts, nur für JavaScript).

Formulare zugänglich machen

Jedes Feld hat ein sichtbares <label>
Pflichtfelder sind im Text gekennzeichnet (nicht nur mit Sternchen oder Farbe)
Fehlermeldungen stehen als Text neben dem Feld und werden per aria-describedby verknüpft
Die Tab-Reihenfolge entspricht der Lesereihenfolge
Genug Abstand und Größe für Touch (mindestens 44 × 44 Pixel)

Probier es selbst

Dein Code

Ergebnis

Merke

<form action method> mit Feldern, jedes mit <label for> und name
Passende types (email, number, date, ...) helfen bei Tastatur und Prüfung
Radio-Gruppen über gleichen name; fieldset/legend für Gruppen
required, pattern, min/max prüfen im Browser; der Server prüft trotzdem
placeholder ersetzt kein label

Aufgabe

Baue ein Anmeldeformular mit Name, E-Mail, Passwort, Land (Auswahl), Newsletter (Checkbox) und Absenden-Button, mit sinnvoller Validierung.

Formulare

Eingabetypen

Auswahlfelder

Validierung im Browser

Weitere Elemente

Formulare zugänglich machen

Merke

Aufgabe

Deine Notizen

Formulare

Eingabetypen

Auswahlfelder

Validierung im Browser

Weitere Elemente

Formulare zugänglich machen

Merke

Aufgabe

Deine Notizen