HTML Input-Elemente - Alle Typen erklärt

Input-Elemente sind die Bausteine von Formularen. Sie ermöglichen es Nutzern, Daten einzugeben, auszuwählen und zu senden.

Das <input> Tag - Grundlagen

Das <input>-Tag ist ein leeres Tag (kein Closing-Tag) und extrem vielseitig:

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

Wichtige Attribute

Die drei wichtigsten Attribute:

• type - Welche Art von Input (text, email, password, etc.)
• name - Name für Server (beim Absenden)
• value - Standardwert oder aktueller Wert

Input-Typen - Die vollständige Übersicht

1. type="text" - Einzeiliger Text

Der Standard-Input für kurzen Text:

<label for="vorname">Vorname:</label>
<input
    type="text"
    id="vorname"
    name="vorname"
    placeholder="Max"
    maxlength="50"
>

Wichtige Attribute:

• placeholder - Platzhaltertext (Hinweis)
• maxlength - Maximale Zeichenanzahl
• size - Breite in Zeichen
• required - Pflichtfeld

2. type="email" - E-Mail-Adressen

Speziell für E-Mail-Adressen mit automatischer Validierung:

<label for="email">E-Mail:</label>
<input
    type="email"
    id="email"
    name="email"
    placeholder="max@example.com"
    required
>

Vorteile:

• ✅ Automatische Validierung (muss @ enthalten)
• ✅ Mobile Tastatur zeigt @-Symbol
• ✅ Browser zeigt Fehlermeldung bei ungültiger E-Mail

3. type="password" - Passwort

Zeigt eingegebenen Text als Punkte/Sternchen:

<label for="passwort">Passwort:</label>
<input
    type="password"
    id="passwort"
    name="passwort"
    minlength="8"
    required
>

Wichtig:

• Text wird versteckt angezeigt: ••••••••
• minlength für Mindestlänge
• Niemals Passwörter im value vorausfüllen!

4. type="number" - Zahlen

Nur Zahlen erlaubt, mit Pfeiltasten zum Erhöhen/Verringern:

<label for="alter">Alter:</label>
<input
    type="number"
    id="alter"
    name="alter"
    min="0"
    max="120"
    step="1"
    value="18"
>

Attribute:

• min - Minimalwert
• max - Maximalwert
• step - Schrittweite (z.B. 0.5 für Dezimalzahlen)

5. type="tel" - Telefonnummer

Für Telefonnummern (zeigt Ziffern-Tastatur auf Mobile):

<label for="telefon">Telefon:</label>
<input
    type="tel"
    id="telefon"
    name="telefon"
    placeholder="+49 123 456789"
    pattern="[0-9+s-]+"
>

Hinweis: Keine automatische Validierung (jedes Land hat andere Formate)!

6. type="url" - Website-URL

Für URLs mit automatischer Validierung:

<label for="website">Webseite:</label>
<input
    type="url"
    id="website"
    name="website"
    placeholder="https://example.com"
>

Browser prüft: Muss mit http:// oder https:// beginnen

7. type="date" - Datum

Datums-Picker (Browser zeigt einen Kalender):

<label for="geburtstag">Geburtstag:</label>
<input
    type="date"
    id="geburtstag"
    name="geburtstag"
    min="1900-01-01"
    max="2025-12-31"
>

Format: Immer YYYY-MM-DD (2025-01-15)

8. type="time" - Uhrzeit

Uhrzeit-Picker:

<label for="termin">Uhrzeit:</label>
<input
    type="time"
    id="termin"
    name="termin"
    min="09:00"
    max="17:00"
>

Format: HH:MM (14:30)

9. type="color" - Farb-Picker

Öffnet einen Farb-Picker:

<label for="farbe">Lieblingsfarbe:</label>
<input
    type="color"
    id="farbe"
    name="farbe"
    value="#ff0000"
>

Format: Hex-Code (#ff0000 für Rot)

10. type="range" - Schieberegler

Slider für Wertauswahl:

<label for="lautstaerke">Lautstärke: <span id="value">50</span></label>
<input
    type="range"
    id="lautstaerke"
    name="lautstaerke"
    min="0"
    max="100"
    value="50"
    step="5"
>

Perfekt für: Lautstärke, Helligkeit, Zoom, Preisbereich

11. type="checkbox" - Checkbox

An/Aus-Schalter:

<input
    type="checkbox"
    id="newsletter"
    name="newsletter"
    value="ja"
>
<label for="newsletter">Newsletter abonnieren</label>

Mehrere Checkboxen:

<p>Welche Sprachen kannst du?</p>

<input type="checkbox" id="html" name="sprachen" value="html">
<label for="html">HTML</label><br>

<input type="checkbox" id="css" name="sprachen" value="css">
<label for="css">CSS</label><br>

<input type="checkbox" id="js" name="sprachen" value="js">
<label for="js">JavaScript</label>

Wichtig: value ist das, was zum Server gesendet wird!

12. type="radio" - Radio-Button

Nur eine Auswahl aus mehreren Optionen:

<p>Geschlecht:</p>

<input type="radio" id="maennlich" name="geschlecht" value="m">
<label for="maennlich">Männlich</label><br>

<input type="radio" id="weiblich" name="geschlecht" value="w">
<label for="weiblich">Weiblich</label><br>

<input type="radio" id="divers" name="geschlecht" value="d">
<label for="divers">Divers</label>

Wichtig: Alle Radio-Buttons einer Gruppe brauchen den gleichen name!

13. type="file" - Datei-Upload

Datei vom Computer auswählen:

<label for="profilbild">Profilbild hochladen:</label>
<input
    type="file"
    id="profilbild"
    name="profilbild"
    accept="image/png, image/jpeg"
>

Attribute:

• accept - Erlaubte Dateitypen
• multiple - Mehrere Dateien erlauben

14. type="search" - Suchfeld

Spezielles Input für Suchfelder:

<label for="suche">Suche:</label>
<input
    type="search"
    id="suche"
    name="suche"
    placeholder="Artikel durchsuchen..."
>

Unterschied zu text: Browser zeigt oft ein X zum Löschen

15. type="hidden" - Verstecktes Feld

Unsichtbar für Nutzer, aber wird mitgesendet:

<input type="hidden" name="userId" value="12345">

Verwendung: IDs, Tokens, Daten die der Nutzer nicht ändern soll

Wichtige Attribute für alle Input-Typen

required - Pflichtfeld

Feld muss ausgefüllt werden:

<input type="text" name="name" required>

readonly - Nur lesbar

Nutzer kann Wert sehen, aber nicht ändern:

<input type="text" value="Nur lesbar" readonly>

disabled - Deaktiviert

Input ist ausgegraut und kann nicht bearbeitet werden:

<input type="text" value="Deaktiviert" disabled>

Unterschied readonly/disabled:

• readonly: Wert wird beim Submit mitgesendet
• disabled: Wert wird NICHT mitgesendet

placeholder - Platzhalter

Hilfstext, der verschwindet beim Tippen:

<input type="email" placeholder="max@example.com">

autofocus - Automatischer Fokus

Cursor springt automatisch in dieses Feld:

<input type="text" autofocus>

Wichtig: Nur ein Input pro Seite sollte autofocus haben!

autocomplete - Auto-Vervollständigung

Browser schlägt gespeicherte Werte vor:

<input type="email" name="email" autocomplete="email">
<input type="tel" name="tel" autocomplete="tel">
<input type="text" name="name" autocomplete="name">

Deaktivieren:

<input type="text" autocomplete="off">

Labels - IMMER verwenden!

Jedes Input braucht ein Label!

<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">

Benutzername:
<input type="text" name="username">

Warum Labels wichtig sind:

• ✅ Barrierefreiheit (Screenreader)
• ✅ Klicken auf Label fokussiert Input
• ✅ Bessere UX

Label-Varianten

Methode 1: for und id

<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">

Methode 2: Input in Label wrappen

<label>
    E-Mail:
    <input type="email" name="email">
</label>

Vollständiges Formular-Beispiel

<form>
    <h2>Registrierung</h2>

    <!-- Name -->
    <label for="name">Name:</label>
    <input
        type="text"
        id="name"
        name="name"
        required
        maxlength="100"
    >

    <!-- E-Mail -->
    <label for="email">E-Mail:</label>
    <input
        type="email"
        id="email"
        name="email"
        required
        placeholder="max@example.com"
    >

    <!-- Passwort -->
    <label for="password">Passwort:</label>
    <input
        type="password"
        id="password"
        name="password"
        required
        minlength="8"
    >

    <!-- Geburtsdatum -->
    <label for="birthday">Geburtstag:</label>
    <input
        type="date"
        id="birthday"
        name="birthday"
        required
    >

    <!-- Geschlecht -->
    <p>Geschlecht:</p>
    <input type="radio" id="m" name="gender" value="m">
    <label for="m">Männlich</label>

    <input type="radio" id="w" name="gender" value="w">
    <label for="w">Weiblich</label>

    <!-- Newsletter -->
    <input type="checkbox" id="newsletter" name="newsletter" value="ja">
    <label for="newsletter">Newsletter abonnieren</label>

    <!-- Submit -->
    <button type="submit">Registrieren</button>
</form>

Validierung mit HTML5

HTML5 bietet eingebaute Validierung:

<!-- Pflichtfeld -->
<input type="text" required>

<!-- Mindestlänge -->
<input type="password" minlength="8">

<!-- Maximal-Länge -->
<input type="text" maxlength="50">

<!-- Min/Max Wert -->
<input type="number" min="0" max="100">

<!-- Pattern (Regex) -->
<input type="text" pattern="[A-Za-z]{3,}" title="Mindestens 3 Buchstaben">

<!-- E-Mail -->
<input type="email">  <!-- Prüft automatisch auf @ -->

Best Practices

✅ DO:

1. Immer Labels verwenden (Barrierefreiheit!)
2. type richtig wählen (email für E-Mails, nicht text)
3. Placeholder als Hinweis, nicht als Label-Ersatz
4. Validierung nutzen (required, minlength, pattern)
5. Sinnvolle name-Attribute (für Server)
6. Autocomplete nutzen (bessere UX)

❌ DON'T:

1. Keine Labels weglassen
2. Nicht type="text" für alles verwenden
3. Kein autofocus auf nervige Popups
4. Keine Passwörter im value vorausfüllen
5. Nicht zu viele Pflichtfelder (nervt Nutzer)

Häufige Anfängerfehler

Fehler 1: Label vergessen

❌ FALSCH:

Name: <input type="text" name="name">

✅ RICHTIG:

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Fehler 2: Falscher Input-Typ

❌ FALSCH:

<input type="text" placeholder="Email">

✅ RICHTIG:

<input type="email" placeholder="Email">

Fehler 3: Radio-Buttons ohne gleichen Namen

❌ FALSCH:

<input type="radio" name="opt1" value="ja">
<input type="radio" name="opt2" value="nein">

✅ RICHTIG:

<input type="radio" name="antwort" value="ja">
<input type="radio" name="antwort" value="nein">

Übungsaufgaben

Aufgabe 1: Kontaktformular

Erstelle ein Formular mit:

• Name (text, required)
• E-Mail (email, required)
• Telefon (tel)
• Nachricht (textarea)
• Submit-Button

Aufgabe 2: Umfrage

Erstelle eine Umfrage:

• Alter (number, 0-120)
• Lieblingsfarbe (color)
• Zufriedenheit (range, 0-10)
• 3 Radio-Buttons für Erfahrung (Anfänger/Fortgeschritten/Experte)
• Submit-Button

Aufgabe 3: Login-Formular

Erstelle ein Login-Formular:

• E-Mail (required)
• Passwort (required, minlength 8)
• "Angemeldet bleiben" Checkbox
• "Passwort vergessen?" Link
• Login-Button

Nächste Schritte

Du kennst jetzt:

• ✅ Alle wichtigen Input-Typen
• ✅ Labels richtig nutzen
• ✅ Validierung mit HTML5
• ✅ Best Practices für Formulare

Als Nächstes lernst du:

• Textarea für mehrzeiligen Text
• Select-Dropdowns
• Button-Typen
• Komplette Formulare mit action/method

<input type="text" autofocus>

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

<div class="input-with-icon">
  <span class="icon">🔍</span>
  <input type="text" placeholder="Suchen...">
</div>

.input-with-icon {
  position: relative;
}
.icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
input {
  padding-left: 35px;
}

<input type="text" pattern="[A-Za-z]{3,}" title="Mind. 3 Buchstaben">

Weiter so! 🚀