html-einfach.de

Semantisches HTML · Interaktive & Medien-Elemente

Formular-Semantik & Input-Typen

Von Zuletzt geändert am

Formulare sind der Ort, an dem semantisches HTML am meisten zurückgibt. Der richtige Input-Typ liefert nicht nur Bedeutung, sondern auch fertiges Verhalten: die passende Tastatur am Smartphone, eine native Prüfung, das richtige Autofill. Diese Seite betrachtet Formulare aus dem Semantik-Blick; die Bedienbarkeit im Detail – Labels, Fehlermeldungen, Validierung – behandelt der Komponenten-Bereich.

Das form-Element

<form> umschließt zusammengehörige Felder als logische Einheit. Es ermöglicht das Absenden per Enter, die native Prüfung und gibt assistiven Technologien den Kontext „hier wird etwas eingegeben“. Ein Sammelsurium aus Inputs ohne <form> verschenkt all das.

Input-Typen tragen Bedeutung

Der type eines <input> ist gelebte Semantik – er sagt, was erwartet wird, und löst passendes Verhalten aus:

type Bedeutung & Effekt
email E-Mail – Tastatur mit @, native Formatprüfung
tel Telefonnummer – Ziffern-Tastatur
url Webadresse – URL-Tastatur und -Prüfung
number Zahl – numerische Eingabe
date Datum – nativer Kalender
search Suchfeld – mit Löschen-Knopf 
<label for="mail">E-Mail</label>
<input type="email" id="mail" name="mail" autocomplete="email" />

Am Smartphone erscheint so die passende Tastatur, und der Browser prüft das Format – geschenkt, nur durch die richtige Typwahl.

Die richtigen Elemente wählen

  • <button type="submit"> zum Absenden, type="button" für reine JS-Aktionen (siehe Buttons vs. Links).
  • <select> für Auswahl aus festen Optionen, <textarea> für längeren Text.
  • <label> verknüpft Beschriftung und Feld – die Grundlage jeder Bedienbarkeit.
  • Schalter und eigene Checkboxen bauen auf dem nativen Input auf (siehe Toggles & Custom Controls).

autocomplete: Bedeutung für Autofill

Das autocomplete-Attribut benennt die Bedeutung eines Feldes maschinenlesbar (name, email, street-address …). Das hilft beim automatischen Ausfüllen und erfüllt zugleich das WCAG-Kriterium 1.3.5 („Eingabezweck erkennen“).

<input type="text" id="vorname" name="vorname" autocomplete="given-name" />

Randnotiz – Bedeutung spart Bedienarbeit. Jede dieser Angaben kostet kaum Aufwand, nimmt aber Nutzern Arbeit ab: die richtige Tastatur, ausgefüllte Felder, eine erste Prüfung ohne Server. Semantik im Formular ist damit unmittelbar spürbarer Komfort – und ein gutes Stück Barrierefreiheit gleich mit.

Häufige Fehler

  • Alles als type="text", obwohl email, tel oder date passen würden.
  • Felder ohne <form>, wodurch Enter-Absenden und Kontext fehlen.
  • <div> als Button statt <button type="submit">.
  • autocomplete ungenutzt, sodass Autofill rät.
  • Native Typen durch JS nachbauen, obwohl der native Typ gereicht hätte.

Häufige Fragen

Ersetzt der Input-Typ die Validierung?

Nein, er ergänzt sie. Die native Prüfung ist eine erste Stufe; eine vollständige, zugängliche Validierung gehört zusätzlich dazu.

Warum nicht für alles type="text"?

Weil der spezifische Typ Bedeutung und Verhalten liefert – passende Tastatur, Prüfung, Autofill. text verschenkt das alles.

Brauche ich für jedes Feld autocomplete?

Für persönliche Standarddaten (Name, E-Mail, Adresse) ja – es hilft spürbar und erfüllt 1.3.5. Für freie, einmalige Eingaben ist es nicht nötig.

Fazit

Formular-Semantik heißt: <form> als Klammer, der richtige Input-Typ für Bedeutung und Verhalten, die passenden Elemente (button, select, textarea, label) und autocomplete für Autofill. Das ist die semantische Basis – die zugängliche Bedienung darauf zeigen Labels und Validierung.