Anfänger122025-01-15

HTML Formulare - Benutzereingaben erfassen

Lerne, wie du interaktive Formulare erstellst, um Daten von Nutzern zu sammeln. Von einfachen Textfeldern bis zu komplexen Formularen.

#html#formulare#forms#input

HTML Formulare - Benutzereingaben erfassen

Formulare sind das wichtigste Werkzeug, um mit deinen Nutzern zu interagieren. Egal ob Login, Kontaktformular, Suche oder Bestellung - Formulare sind überall!

Das <form> Element

Jedes Formular beginnt mit dem <form> Tag:

<form action="/submit" method="POST">
    <!-- Input-Felder hier -->
</form>

Attribute:

  • action: Wohin werden die Daten geschickt?
  • method: Wie werden sie geschickt? (GET oder POST)
Einfaches Kontaktformular
<!DOCTYPE html>
<html lang="de">
<head>
    <title>Kontaktformular</title>
</head>
<body>
    <h1>Kontaktiere uns</h1>
    
    <form action="/submit" method="POST">
        <!-- Name -->
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br><br>
        
        <!-- E-Mail -->
        <label for="email">E-Mail:</label>
        <input type="email" id="email" name="email" required>
        <br><br>
        
        <!-- Nachricht -->
        <label for="message">Nachricht:</label>
        <textarea id="message" name="message" rows="5" required></textarea>
        <br><br>
        
        <!-- Submit Button -->
        <button type="submit">Absenden</button>
    </form>
</body>
</html>

Input-Typen - Die Vielfalt

Das <input> Element hat viele verschiedene Typen:

Text Input

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

Email Input (mit Validierung!)

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

Browser prüft automatisch, ob eine gültige E-Mail eingegeben wurde!

Password Input

<input type="password" name="password">

Text wird als •••• angezeigt.

Number Input

<input type="number" name="age" min="0" max="120">

Date Input

<input type="date" name="birthday">

Browser zeigt automatisch einen Kalender!

Checkbox

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

Radio Buttons

<input type="radio" name="gender" value="male" id="male">
<label for="male">Männlich</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">Weiblich</label>
Alle Input-Typen im Überblick
<!DOCTYPE html>
<html lang="de">
<head>
    <title>Input Typen</title>
</head>
<body>
    <h1>Verschiedene Eingabefelder</h1>
    
    <form>
        <!-- Text -->
        <label for="text">Text:</label>
        <input type="text" id="text" placeholder="Gib Text ein">
        <br><br>
        
        <!-- Email -->
        <label for="email">E-Mail:</label>
        <input type="email" id="email" placeholder="email@example.com">
        <br><br>
        
        <!-- Password -->
        <label for="password">Passwort:</label>
        <input type="password" id="password">
        <br><br>
        
        <!-- Number -->
        <label for="number">Zahl (0-100):</label>
        <input type="number" id="number" min="0" max="100">
        <br><br>
        
        <!-- Date -->
        <label for="date">Datum:</label>
        <input type="date" id="date">
        <br><br>
        
        <!-- Color Picker -->
        <label for="color">Farbe:</label>
        <input type="color" id="color">
        <br><br>
        
        <!-- Range Slider -->
        <label for="range">Lautstärke:</label>
        <input type="range" id="range" min="0" max="100" value="50">
        <br><br>
        
        <!-- Checkbox -->
        <input type="checkbox" id="agree">
        <label for="agree">Ich stimme den AGB zu</label>
        <br><br>
        
        <!-- Radio Buttons -->
        <p>Größe wählen:</p>
        <input type="radio" name="size" id="small" value="S">
        <label for="small">Klein</label>
        
        <input type="radio" name="size" id="medium" value="M">
        <label for="medium">Mittel</label>
        
        <input type="radio" name="size" id="large" value="L">
        <label for="large">Groß</label>
        <br><br>
        
        <!-- Submit Button -->
        <button type="submit">Absenden</button>
    </form>
</body>
</html>

Labels - Wichtig für Zugänglichkeit

Jedes Input-Feld sollte ein <label> haben:

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

Warum?

  • Screenreader können das Feld benennen
  • Klick auf Label aktiviert das Input-Feld
  • Bessere User Experience

Das for Attribut muss mit der id des Inputs übereinstimmen!

Textarea - Mehrzeiliger Text

Für längere Texte:

<label for="bio">Über mich:</label>
<textarea id="bio" name="bio" rows="5" cols="40"></textarea>

Select - Dropdown-Menü

<label for="country">Land:</label>
<select id="country" name="country">
    <option value="">Bitte wählen...</option>
    <option value="de">Deutschland</option>
    <option value="at">Österreich</option>
    <option value="ch">Schweiz</option>
</select>

Validierung mit HTML5

HTML5 bietet eingebaute Validierung:

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

<!-- Mindestlänge -->
<input type="text" minlength="5">

<!-- Maximallänge -->
<input type="text" maxlength="20">

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

<!-- Min/Max für Zahlen -->
<input type="number" min="0" max="100">
Registrierungsformular mit Validierung
<!DOCTYPE html>
<html lang="de">
<head>
    <title>Registrierung</title>
</head>
<body>
    <h1>Registrieren</h1>
    
    <form>
        <!-- Username -->
        <label for="username">Benutzername:</label>
        <input 
            type="text" 
            id="username" 
            name="username"
            minlength="3"
            maxlength="20"
            required
            placeholder="mind. 3 Zeichen"
        >
        <br><br>
        
        <!-- Email -->
        <label for="email">E-Mail:</label>
        <input 
            type="email" 
            id="email" 
            name="email"
            required
        >
        <br><br>
        
        <!-- Password -->
        <label for="password">Passwort:</label>
        <input 
            type="password" 
            id="password" 
            name="password"
            minlength="8"
            required
            placeholder="mind. 8 Zeichen"
        >
        <br><br>
        
        <!-- Alter -->
        <label for="age">Alter:</label>
        <input 
            type="number" 
            id="age" 
            name="age"
            min="13"
            max="120"
            required
        >
        <br><br>
        
        <!-- Land -->
        <label for="country">Land:</label>
        <select id="country" name="country" required>
            <option value="">Bitte wählen...</option>
            <option value="de">Deutschland</option>
            <option value="at">Österreich</option>
            <option value="ch">Schweiz</option>
        </select>
        <br><br>
        
        <!-- AGB -->
        <input type="checkbox" id="terms" required>
        <label for="terms">Ich akzeptiere die AGB</label>
        <br><br>
        
        <!-- Submit -->
        <button type="submit">Jetzt registrieren</button>
    </form>
</body>
</html>

Fieldset und Legend - Gruppen bilden

<form>
    <fieldset>
        <legend>Persönliche Daten</legend>
        
        <label for="name">Name:</label>
        <input type="text" id="name">
        
        <label for="email">E-Mail:</label>
        <input type="email" id="email">
    </fieldset>
    
    <fieldset>
        <legend>Adresse</legend>
        
        <label for="street">Straße:</label>
        <input type="text" id="street">
        
        <label for="city">Stadt:</label>
        <input type="text" id="city">
    </fieldset>
</form>

📝 Quiz

Welches Attribut macht ein Input-Feld zu einem Pflichtfeld?

Best Practices

  1. Immer Labels verwenden - Für Zugänglichkeit
  2. Validierung nutzen - Spart Server-Requests
  3. Placeholder für Beispiele - "max.mustermann@email.com"
  4. Hilfreiche Fehlermeldungen - "Passwort muss mind. 8 Zeichen haben"
  5. Logische Tab-Reihenfolge - Mit tabindex falls nötig
  6. Autocomplete nutzen - autocomplete="email" hilft dem Browser
⚡

Tipps & Tricks

Labels immer verknüpfen

Verbinde Labels mit Inputs über das for-Attribut. So können Nutzer auf das Label klicken, um das Feld zu fokussieren - besonders wichtig für Checkboxen und Radio-Buttons!

Autocomplete spart Zeit

Nutze autocomplete="email", autocomplete="tel" etc., damit Browser gespeicherte Werte vorschlagen können. Das verbessert die User Experience enorm!

Required vs JavaScript-Validierung

HTML5-Validierung (required, pattern) funktioniert auch ohne JavaScript und ist performanter. Nutze JavaScript nur für komplexe Validierungen!

Fieldset für Gruppierung

Gruppiere zusammengehörige Felder mit <fieldset> und <legend>. Das hilft Screenreadern und macht lange Formulare übersichtlicher.

Test mit Tastatur

Teste deine Formulare nur mit der Tastatur (Tab, Enter, Space). Wenn du alles ohne Maus ausfüllen kannst, ist es barrierefrei!

Übungsaufgaben

  1. Bestellformular:

    • Name, Adresse, Produktauswahl
    • Anzahl (number input)
    • Lieferung oder Abholung (radio)
    • AGB-Checkbox

  2. Umfrage:

    • Fragen mit Radio-Buttons
    • Optional: Kommentarfeld (textarea)
    • Submit-Button

  3. Login-Formular:

    • Email
    • Passwort
    • "Angemeldet bleiben" Checkbox
    • Submit-Button

Nächste Schritte

  • CSS Styling für Formulare
  • JavaScript Validierung
  • Formulardaten mit JavaScript verarbeiten

Viel Erfolg! 🚀

← HTML•Lektion 13 von 20
65% abgeschlossen
Lektion abgeschlossen!

Gut gemacht! 🎉

Du hast "HTML Formulare - Benutzereingaben erfassen" abgeschlossen

Vorherige Lektion
HTML Input-Elemente - Alle Typen erklärt
Nächste Lektion
HTML Tabellen - Daten strukturieren
Alle Lektionen anzeigen

Artikel bewerten

0.0 (0 Bewertungen)

Bitte einloggen um zu bewerten

Das könnte dich auch interessieren

HTML Input-Elemente - Alle Typen erklärt

Lerne alle HTML-Input-Typen kennen: text, email, password, checkbox, radio, date und mehr. Mit Beispielen und Best Practices.

Anfängerhtml

Das <a> Element - Links und Navigation

Vollständige Referenz zum HTML <a> (Anchor) Element: Attribute, Link-Typen, Sicherheit, Accessibility und Best Practices

Anfängerhtml

Das <button> Element - Interaktive Schaltflächen

Vollständige Referenz zum HTML <button> Element: Typen, Attribute, States, Accessibility, Button vs Link und Best Practices

Anfängerhtml
Zurück zu HTML