💡 1. Formular-Grundgerüst & Barrierefreie Labels
Ein Formular wird mit dem <form>-Tag deklariert. Jedes Eingabefeld benötigt ein zugehöriges <label for="feld-id">, dessen for-Attribut exakt mit der id des Feldes übereinstimmt:
<form action="/api/register" method="POST">
<div class="form-group">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username" required minlength="3" placeholder="z.B. dev_anna">
</div>
<button type="submit">Registrieren</button>
</form>🎛️ 2. Moderne Input-Typen, Dropdowns & Textareas
HTML5 bietet spezialisierte Eingabetypen für mobile Tastaturen (z.B. email blendet auf Smartphones das @-Zeichen ein, number das Ziffernpad):
<!-- E-Mail mit Formatprüfung: -->
<label for="user-email">E-Mail-Adresse:</label>
<input type="email" id="user-email" name="email" required>
<!-- Zahlenbereich mit min & max: -->
<label for="experience">Jahre Erfahrung:</label>
<input type="number" id="experience" name="experience" min="0" max="50" value="1">
<!-- Dropdown-Auswahl: -->
<label for="course-select">Gewünschter Kurs:</label>
<select id="course-select" name="course" required>
<option value="">-- Bitte wählen --</option>
<option value="html">HTML5 & CSS3 Grundlagen</option>
<option value="js">JavaScript Masterclass</option>
</select>
<!-- Mehrzeiliges Textfeld: -->
<label for="motivation">Dein Motivationsschreiben:</label>
<textarea id="motivation" name="motivation" rows="4" placeholder="Erzähle über dich..."></textarea>🛡️ 3. Native HTML5-Validierungsattribute
Der Browser kann Eingaben vor dem Absenden vollständig ohne JavaScript prüfen:
| Attribut | Funktion | Beispiel |
|---|---|---|
required |
Pflichtfeld, darf nicht leer sein | <input type="email" required> |
minlength / maxlength |
Minimale und maximale Zeichenanzahl | <input type="password" minlength="8"> |
min / max / step |
Zahlen- und Datumsgrenzen | <input type="number" min="1" max="100"> |
pattern |
Regulärer Ausdruck (Regex) zur Validierung | <input pattern="[0-9]{5}"> (Postleitzahl) |
Das <label for="..."> ist das Schild am Schalter. Wenn du auf das Schild klickst, aktiviert der Browser sofort das zugehörige Eingabefeld (wichtig für Motorik und Screenreader!).
Die HTML5-Validierung ist die Schranke am Gate: Ist das Feld required oder das Passwort zu kurz, schlägt der Browser sofort Alarm und lässt den Nutzer gar nicht erst zum Server durch!