Form HTML
Ein Formular, das jedes Feld benennt
Eingabefeld, Textbereich, Absenden: drei Stellen im HTML-Formular.
Vom Feld zur Anfrage
Ein Formular ist ein Datenweg
Sichtbare Beschriftung, HTML-Verknüpfung und Serverdaten müssen dieselbe Frage meinen.
for="mail"id="mail"Verbindet sichtbaren Text und Feld im Browser sowie im Accessibility Tree.
name="email"email=…Der name wird zum Schlüssel in den gesendeten Daten.
action="/anfrage"method="post"Der Browser baut daraus eine Anfrage an den vorgesehenen Server-Endpunkt.
/anfragenameAnna Bergeremailanna@example.organliegenangebotnachrichtBitte um eine Rückmeldung.Nicht im Paket:id, for und Felder ohne name.
GET und POST legen Daten an verschiedene Stellen
Die Methode beschreibt die HTTP-Anfrage. Sie ersetzt weder HTTPS noch die Prüfung auf dem Server.
/suche?q=formularDie Werte stehen in der URL. Das passt zu Suchen und Filtern, deren Ergebnis verlinkbar sein soll.
email=anna%40example.orgDie Werte stehen im Request-Body. POST macht sie nicht geheim; dafür braucht die Verbindung HTTPS.
Das vollständige Grundformular
id verbindet das Feld mit seinem Label. name benennt den Wert für den Server. type und autocomplete helfen dem Browser bei Eingabe, Prüfung und Ausfüllen.
/anfrage muss existieren, Eingaben serverseitig prüfen und eine verständliche Antwort liefern.<form action="/anfrage" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text"
autocomplete="name" required>
</p>
<p>
<label for="mail">E-Mail</label>
<input id="mail" name="email" type="email"
autocomplete="email" required>
</p>
<p>
<label for="anliegen">Anliegen</label>
<select id="anliegen" name="anliegen">
<option value="angebot">Angebot</option>
<option value="frage">Frage zum Ablauf</option>
</select>
</p>
<p>
<label for="nachricht">Nachricht</label>
<textarea id="nachricht" name="nachricht"
rows="5" required></textarea>
</p>
<button type="submit">Anfrage senden</button>
</form>So prüfen Sie es
Kontrollieren Sie die drei Verbindungen nacheinander.
- LabelAuf „E-Mail“ klickenDer Cursor springt in das E-Mail-Feld:
forundidpassen. - TabOhne Maus durchlaufenJedes Feld und der Absende-Button erhalten einen sichtbaren Fokus.
- LeerOhne Eingabe absendenDer Browser benennt die Pflichtfelder; ergänzen Sie verständliche Hinweise für komplexere Regeln.
- NetzwerkAnfrage im Browser prüfenMethode, Ziel und Payload zeigen die erwarteten
name=value-Paare.
Aus dem Prüfbericht
Zwei Regeln, zwei Befunde
Kritisch Die Felder haben nur Platzhalter Regel label
Grauer Text im Feld verschwindet beim Tippen. Ein label mit for verbindet den sichtbaren Namen dauerhaft mit dem Feld.
Kritisch Das Absenden ist ein div Regel button-name
Ein div mit Klick-Handler ist keine Schaltfläche und hat keinen Namen. Ein button mit type="submit" und Text sendet das Formular.
Zum Mitnehmen
Das HTML-Formular, korrigiert
Zwei Änderungen im HTML. Die Übermittlung bleibt gleich.
Korrektur in 2 Schritten ansehen
Feld und Beschriftung verbinden
for zeigt auf die id des Feldes. Gesendet wird weiter über name; die Beschriftung bleibt sichtbar, auch wenn schon Text im Feld steht.
KorrekturvergleichSchritt 1 · HTML Vorher
<form action="/anfrage" method="post"> <input type="text" name="name" placeholder="Ihr Name"> </form>Nachher
<form action="/anfrage" method="post"> <label for="name">Ihr Name</label> <input id="name" type="text" name="name"> </form>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Ihr Name“. Springt der Cursor ins Feld, ist der Name verbunden.
Aus dem div eine Schaltfläche machen
Ein button ist mit Tabulator und Leertaste bedienbar und meldet sich als Schaltfläche. Sein Text ist zugleich sein Name.
KorrekturvergleichSchritt 2 · HTML Vorher
<div class="senden" onclick="formular.submit()">Absenden</div>Nachher
<button type="submit" class="senden">Absenden</button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tabulatortaste auf „Absenden“ und drücken Sie die Leertaste. Das Formular wird gesendet.