HTML-Formulare: input, select, textarea
Formulare sind die Brücke zwischen Benutzer und Server. Sobald deine Webseite irgendetwas vom Nutzer wissen will – Login-Daten, Suchanfragen, Kontaktnachrichten, Bestellungen – brauchst du ein Formular. Das HTML-Formular ist das, was den User antworten lässt. Die eigentliche Verarbeitung der Daten findet dann auf dem Server statt (siehe L1 HTTP) – HTML kümmert sich nur um Anzeige und Sammlung.
HTML hat eine Vielzahl von Formular-Elementen, die sich seit Jahrzehnten kaum verändert haben. Mit HTML5 kamen viele neue Input-Typen dazu (Datumsfeld, Email-Feld mit eingebauter Validierung, Farbwähler), die das Leben sehr erleichtern – wenn du sie kennst.
1) Das <form>-Element – der Container
Alle Formularfelder gehören in ein <form>-Element. Das form-Tag hat zwei zentrale Attribute: action (wohin werden die Daten geschickt) und method (welche HTTP-Methode):
<!-- Eingabefelder hier -->
<button type="submit">Absenden</button>
</form>
post für Daten die etwas verändern (Login, Bestellung) und get für Daten die nur abfragen (Suchformular). Bei GET landen die Werte in der URL als Query-Parameter (?name=Anna&alter=25), bei POST im Request-Body. Mehr zum HTTP-Protokoll in L1.2) Das <input>-Element und seine vielen Typen
<input> ist das Mädchen für alles. Über das type-Attribut entscheidet sich was für ein Feld es wird. Probier alle Varianten aus:
text, password, checkbox, radio, hidden und file. Alles andere ist erst seit HTML5 dazugekommen – und der riesige Vorteil: auf Mobile passt sich die Tastatur automatisch an. Bei type="email" zeigt das Smartphone eine Tastatur mit @-Taste, bei type="tel" einen Nummern-Block. Außerdem validieren Browser typabhängig: email erzwingt @, number nur Zahlen, url ein gültiges URL-Format.3) Labels: das oft vergessene Pflicht-Element
Jedes Eingabefeld sollte ein zugehöriges <label> haben. Das ist nicht nur „schöner" – es ist eine Pflicht für Barrierefreiheit und hat handfeste Vorteile: man kann auf den Label klicken um das Feld zu fokussieren, Screenreader sagen das Feld richtig an, und der Klickbereich für Checkboxes wird viel größer.
<label for="email">E-Mail</label>
<input type="email" id="email" name="email">
<!-- Variante 2: input INNERHALB des label -->
<label>
<input type="email" name="email">
</label>
Beide Varianten sind erlaubt. Bei Variante 1 muss das for mit der id des Felds übereinstimmen. Variante 2 ist kompakter, weil man kein id braucht – aber das Layout ist starrer.
4) Dropdown-Menüs mit <select>
Für „wähle eins aus vielen" gibt es das <select>-Element. Die Auswahl-Optionen kommen als <option> rein. Mit Gruppen lassen sich Optionen logisch zusammenfassen:
<select id="land" name="land">
<optgroup label="DACH">
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
</optgroup>
<option value="other">Anderes</option>
</select>
Der value einer Option ist was der Server bekommt (z.B. "de"), der Text dazwischen ist was der Nutzer sieht ("Deutschland"). Mit multiple als Attribut am select wird Mehrfach-Auswahl möglich (Strg/Cmd-Klick). Mit selected bei einer option ist diese vorausgewählt.
5) Mehrzeiliger Text mit <textarea>
Für längeren Text (Kommentare, Nachrichten, Beschreibungen) gibt es <textarea>. Anders als <input> hat es einen schließenden Tag und der Default-Inhalt steht dazwischen:
<textarea id="msg" name="msg"
rows="5" cols="40"
placeholder="Deine Nachricht...">Hallo!</textarea>
rows und cols bestimmen die Default-Größe in Zeichen. Mit CSS lassen sich Größen besser kontrollieren. Mit maxlength="500" begrenzt du die Eingabe-Länge.
6) Komplettes Kontaktformular zusammenbauen
Jetzt setzen wir alles zusammen zu einem echten Kontaktformular. Links der Code, rechts die Live-Vorschau:
<label for="name">Name *</label>
<input type="text" id="name" name="name" required>
<label for="email">E-Mail *</label>
<input type="email" id="email" name="email" required>
<label for="thema">Thema</label>
<select id="thema" name="thema">
<option value="frage">Allgemeine Frage</option>
<option value="bug">Bug melden</option>
<option value="feature">Feature-Wunsch</option>
</select>
<label>Antwortwunsch:</label>
<input type="radio" name="ant" value="mail" checked> Mail
<input type="radio" name="ant" value="tel"> Telefon
<label for="msg">Nachricht *</label>
<textarea id="msg" name="msg" rows="4" required></textarea>
<input type="checkbox" id="ds" required>
<label for="ds">DSGVO akzeptiert</label>
<button type="submit">Senden</button>
</form>
name (für die Server-Seite) und id (für den Label-Bezug). Pflichtfelder bekommen required – Browser prüft das beim Submit. Die DSGVO-Checkbox ist wichtig: ohne explizite Einwilligung darfst du personenbezogene Daten nicht verarbeiten (siehe K05 DSGVO).7) HTML5-Validierung – mehr als nur required
Browser können vor dem Absenden viele Prüfungen übernehmen. Das schützt zwar nicht vor manipulierten Requests (immer auf dem Server nochmal prüfen!), gibt dem Nutzer aber sofort Feedback ohne den Server zu belasten. Die wichtigsten Validierungs-Attribute:
8) Buttons im Formular
Es gibt drei Button-Typen, die du im Formular brauchst:
<button type="submit">– sendet das Formular ab.type="submit"ist der Default wenn du es weglässt.<button type="reset">– setzt alle Felder auf ihre Default-Werte zurück. Heute selten genutzt – meist verwirrend für User.<button type="button">– tut nichts automatisch. Nur sinnvoll wenn du per JavaScript ein Event-Handling dran hängst.
Alternative Schreibweise: <input type="submit" value="Senden"> – funktioniert genauso, aber <button> ist flexibler weil man HTML drin haben kann (z.B. <button><img src="icon.svg"> Senden</button>).
9) Sicherheit und DSGVO bei Formularen
Drei Punkte musst du beim Erstellen von Formularen immer im Blick haben:
- HTTPS verwenden: Passwörter, Mails und persönliche Daten gehören niemals unverschlüsselt durchs Netz (siehe L1).
- Server-Validierung: NIEMALS dem Client vertrauen. Alles nochmal prüfen, sanitizen, escapen.
- DSGVO: Bei jedem Formular das personenbezogene Daten sammelt brauchst du eine Einwilligung (Checkbox), Datenschutzerklärung verlinken, Datensparsamkeit beachten (siehe K05).
Außerdem: Schütze dich vor Bot-Spam. Klassische Lösungen: CAPTCHA, Honeypot-Feld (ein verstecktes Feld das nur Bots ausfüllen), Rate-Limiting auf dem Server.
Zusammenfassung
Formulare in <form action="..." method="post">. Input-Typen für alles Mögliche: text, password, email, number, tel, url, search, date, time, color, range, file, checkbox, radio. Jedes Feld braucht ein <label> mit for="id". Dropdowns mit <select>+<option>, optional <optgroup>. Mehrzeilig: <textarea rows cols>. Validierung mit required, min/max, pattern – aber Server muss IMMER nochmal prüfen! Buttons: type="submit" (Default), "reset", "button". Bei personenbezogenen Daten: HTTPS, DSGVO-Einwilligung, Server-Validierung, Bot-Schutz.