Das HTML-Element <input> ist die grundlegende Komponente zur Erfassung von Benutzerdaten in Webformularen.
Input-Typen
Textuelle und semantische Typen
| Typ | Beschreibung |
|---|---|
text |
Einzeiliger Klartext |
password |
Verdeckte Passworteingabe |
email |
E-Mail-Adresse mit browserseitiger Validierung |
url |
Eingabe absoluter URLs |
tel |
Telefonnummerneingabe (oeffnet Ziffernblock auf Mobilgeraeten) |
search |
Suchfeldeingabe mit Loeschschaltflaeche |
Numerische und quantitative Typen
| Typ | Beschreibung |
|---|---|
number |
Zahleneingabefeld mit Schrittweite (min, max, step) |
range |
Schieberegler fuer annaehernde Werte |
Datums- und Zeit-Typen
| Typ | Beschreibung |
|---|---|
date |
Kalender-Datumsauswahl (Jahr, Monat, Tag) |
time |
Uhrzeitauswahl (Stunden, Minuten) |
datetime-local |
Datum und Uhrzeit ohne Zeitzone |
month |
Auswahl von Jahr und Monat |
week |
Auswahl von Jahr und ISO-Kalenderwoche |
Auswahl und Aktionen
| Typ | Beschreibung |
|---|---|
checkbox |
Boolescher Umschalter oder Mehrfachauswahl |
radio |
Einzelauswahl innerhalb einer Optionsgruppe |
color |
Farbauswahl-Palette |
file |
Dateiupload (accept, multiple) |
hidden |
Unsichtbarer Wert, der mit dem Formular uebertragen wird |
submit |
Schaltflaeche zum Absenden des Formulars |
reset |
Setzt alle Formulardaten zurueck |
button |
Klickbare Schaltflaeche ohne Standardverhalten |
Wichtige Validierungsattribute
| Attribut | Verhalten |
|---|---|
required |
Verhindert das Absenden, wenn das Feld leer ist |
pattern="[A-Za-z0-9]+" |
Regulaerer Ausdruck, dem die Eingabe entsprechen muss |
min="1" max="100" |
Mindest- und Hoechstwerte fuer Zahlen oder Datumsangaben |
step="0.5" |
Gueltiges Schrittintervall fuer Zahlen |
minlength="5" maxlength="20" |
Minimale und maximale Zeichenlaenge |
placeholder="..." |
Hinweistext, der bei Eingabe verschwindet |
readonly |
Verhindert Bearbeitung, Wert wird dennoch uebertragen |
disabled |
Deaktiviert das Feld, Wert wird nicht uebertragen |
autofocus |
Fokussiert das Feld automatisch beim Laden der Seite |
Vollstaendiges Formularbeispiel
<form action="/api/submit" method="POST">
<label for="user-email">E-Mail-Adresse:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Passwort (mind. 8 Zeichen):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Alter:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Ich akzeptiere die Nutzungsbedingungen
</label>
<input type="submit" value="Registrieren" />
</form>