HTML Input Typen im Überblick

Text, E-Mail, Passwort, Datum, Farbe – HTML Input Typen gibt's für fast alles! In diesem Tutorial lernst du die wichtigsten Typen kennen und wann du welchen verwendest. Spoiler: Es gibt mehr als nur type="text"!

Einführung in das HTML Input Typen Tutorial

Das <input>-Element ist der Star jedes Formulars. Über 20 verschiedene Typen stehen dir zur Verfügung – jeder optimiert für einen bestimmten Zweck.

Was du in diesem Tutorial lernst

Nach diesem Tutorial kennst du:

• Text-Typen (text, email, password, search)
• Zahlen-Typen (number, range, tel)
• Datum-Typen (date, time, datetime-local)
• Spezial-Typen (url, color, hidden)

Warum Input Typen wichtig sind

Die Vorteile des richtigen Typs:

• Mobile Tastatur: Bei type="email" erscheint das @-Symbol automatisch
• Validierung: Browser prüfen das Format
• Barrierefreiheit: Screenreader verstehen den Kontext

Voraussetzungen

Benötigte HTML Grundkenntnisse

Du solltest HTML-Formulare verstehen. Falls nicht, hol das kurz nach!

Dein Arbeitsplatz Setup

Texteditor plus Browser reichen. Oder nutze CodePen zum schnellen Testen.

Schritt-für-Schritt-Anleitung

Schritt 1: Grundlegende Input Syntax

Jedes Input braucht mindestens type und name:

<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">

Das name-Attribut identifiziert das Feld beim Absenden!

Schritt 2: Text Input Typen

<input type="text" name="vorname" placeholder="Dein Vorname">
<input type="email" name="email" placeholder="deine@email.de">
<input type="password" name="passwort" placeholder="Sicheres Passwort">
<input type="search" name="suche" placeholder="Suche...">

Was passiert:

• email: Mobile Tastatur zeigt @-Symbol, Browser prüft Format
• password: Eingabe wird versteckt (•••••)
• search: Browser kann ein X zum Löschen anzeigen

Schritt 3: Numerische Input Typen

<input type="number" name="alter" min="1" max="120">
<input type="range" name="lautstaerke" min="0" max="100" value="50">
<input type="tel" name="telefon" placeholder="+49 123 456789">

min und max begrenzen die erlaubten Werte. range zeigt einen Schieberegler!

[bildapi id="001" prompt="A clean illustration showing different HTML number input types including number field, range slider, and telephone input on a modern web form interface" name="html-input-number-types" alt="HTML Zahlen Input Typen Darstellung"]

Schritt 4: Datum und Zeit Input Typen

<input type="date" name="geburtsdatum">
<input type="time" name="termin_zeit">
<input type="datetime-local" name="meeting">
<input type="month" name="urlaub_monat">
<input type="week" name="kalenderwoche">

Browser zeigen native Datums- und Zeitpicker – keine JavaScript-Bibliothek nötig!

Schritt 5: Spezielle Input Typen

<input type="url" name="webseite" placeholder="https://example.com">
<input type="color" name="lieblingsfarbe" value="#3366cc">
<input type="hidden" name="session_id" value="abc123">

• url: Prüft auf gültiges URL-Format
• color: Öffnet einen Farbwähler
• hidden: Unsichtbar, für technische Daten

Code-Beispiele zu HTML Input Typen

Praxisnahes Formular

<form>
  <input type="text" name="name" placeholder="Vollständiger Name" required>
  <input type="email" name="email" placeholder="E-Mail-Adresse" required>
  <input type="tel" name="telefon" placeholder="Telefon">
  <input type="number" name="alter" placeholder="Alter" min="1" max="120">
  <input type="date" name="geburtsdatum">
  <input type="url" name="webseite" placeholder="Website">
</form>

required macht Felder zu Pflichtfeldern!

Input mit vielen Attributen

<input type="email" 
       name="newsletter_email" 
       placeholder="deine@email.de" 
       required 
       maxlength="254"
       autocomplete="email">

autocomplete hilft Browsern beim automatischen Ausfüllen.

Häufige Fehler & Troubleshooting

Fehler 1: Immer nur type="text"

Nutze die spezifischen Typen! Mobile Nutzer bekommen bessere Tastaturen, Browser validieren automatisch.

Fehler 2: name-Attribut vergessen

Ohne name werden die Daten nicht übertragen!

FALSCH: <input type="text">
RICHTIG: <input type="text" name="vorname">

Fehler 3: Unrealistische min/max Werte

Ein Alter von 0-9999? Unsinnig! Nutze realistische Grenzen wie 1-120.

[bildapi id="002" prompt="A side-by-side comparison showing correct vs incorrect HTML input type usage, with visual indicators of good and bad practices in web form design" name="html-input-types-mistakes" alt="HTML Input Typen Fehler vermeiden Vergleich"]

HTML: Best Practices & Tipps

Semantisch korrekte Input Wahl

• E-Mail → type="email"
• Telefon → type="tel"
• Suche → type="search"
• Passwort → type="password"

Benutzerfreundlichkeit

• Placeholder mit Beispielen: "TT.MM.JJJJ" oder "+49 123 456789"
• autocomplete für schnelleres Ausfüllen
• Sinnvolle min/max bei Zahlen

Mobile first

Bei type="email" erscheint auf dem Handy automatisch das @-Symbol. Bei type="tel" die Telefontastatur. Nutze das!

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt die wichtigsten Input Typen:

• Text-Typen: text, email, password, search
• Zahlen: number, range, tel
• Datum/Zeit: date, time, datetime-local
• Spezial: url, color, hidden

Mit dem richtigen Typ verbesserst du Validierung, mobile Usability und Barrierefreiheit!

Bereit für mehr? Lerne als Nächstes, wie du mit HTML Textarea mehrzeilige Texteingaben ermöglichst!