HTML-Kurs / Formulare prüfen: required, Textlänge und Wertebereiche

Die in HTML integrierte Formularvalidierung kann fehlende Werte, Textlänge, Zahlenbereiche und bestimmte Eingabeformate vor dem Absenden überprüfen. Attribute wie required, minlength und max helfen dem Browser, die Benutzer zu führen. Sie ersetzen jedoch nicht die Validierung auf der Serverseite.

Einen Wert verlangen und seine Länge begrenzen

<form method="get">
  <label for="nickname">Pseudonym (2 bis 20 Zeichen)</label>
  <input id="nickname" name="nickname" type="text"
         required minlength="2" maxlength="20">
  <button type="submit">Überprüfen</button>
</form>

Versuchen Sie, ein leeres Feld einzureichen, dann ein Zeichen und dann zwei Zeichen. required prüft das Vorhandensein eines Wertes, während minlength die Länge des vom Benutzer eingegebenen Textes überprüft; keines von beiden impliziert das andere. Die genaue Meldung des Browsers variiert je nach Browser, Betriebssystem und Sprache. Informieren Sie die Benutzer über die Regel, bevor sie etwas einreichen, anstatt sich nur auf eine Fehlermeldung zu verlassen. Längenbeschränkungen können sich anders verhalten, wenn die Werte per Skript gefüllt werden, daher testen Sie programmierte Eingaben separat, wenn Ihr Formular diese verwendet.

maxlength="20" verhindert in der Regel, dass Benutzer mehr als seine Begrenzung eingeben. HTML misst diese Begrenzung in Codeeinheiten der Unicode-Kodierung UTF-16, die nicht immer der Anzahl sichtbarer Zeichen entsprechen – zum Beispiel bei bestimmten Emoji. Wenn Sie solche Zeichen zulassen, testen Sie die tatsächliche Eingabe zusammen mit der Server-Längenregel. Siehe die Referenz MDN maxlength.

Überprüfen Sie einen Bereich oder ein Basisformat

<form method="get">
  <label for="people">Teilnehmer (1–10)</label>
  <input id="people" name="people" type="number"
         min="1" max="10" step="1" required>

  <label for="email">E-Mail-Adresse</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Überprüfen</button>
</form>

min und max definieren den Bereich; step definiert den erlaubten Inkrementwert. Geben Sie manuell 0, 11 und 2,5 ein und vergleichen Sie dies mit den Inkrement-Schaltflächen. Das Dezimaltrennzeichen hängt von der Sprache des Browsers ab: Verwenden Sie 2.5, wenn 2,5 nicht akzeptiert wird. Dass ein Wert im Eingabefeld sichtbar ist, bedeutet nicht, dass er für die Übermittlung gültig ist. type="email" überprüft ein Grundformat der Adresse, nicht, ob das Postfach tatsächlich existiert. Wählen Sie die Eingabetypen basierend auf der Bedeutung des Wertes in Auswahl der Eingabetypen für E-Mail, Zahlen, Daten und Auswahl.

Dies ist ein GET-Formular, das an die aktuelle URL gesendet wird, um zu üben. Verwenden Sie einen Testwert wie name@example.com und keine echte persönliche Adresse. Sobald die Werte die Browser-Validierung bestehen, können Sie people und email in der Abfragezeichenfolge der URL prüfen. Dieses Beispiel enthält keinen Server, der die Daten empfängt oder speichert.

Geben Sie hilfreiche Hinweise zur Fehlerbehebung

Beschränken Sie sich nicht darauf, Fehler nur durch die Farbe zu kennzeichnen. „Geben Sie eine ganze Zahl von 1 bis 10 ein“ liefert mehr Informationen für die Benutzer als „Ungültige Eingabe“. Wenn Sie benutzerdefinierte Meldungen erstellen, verknüpfen Sie jede Meldung mit dem entsprechenden Steuerelement und stellen Sie sicher, dass Benutzer mit der Tastatur darauf zurückkehren können. Das Attribut novalidate auf form ignoriert die integrierte interaktive Validierung beim Absenden; fügen Sie es nicht einfach hinzu, um ein Problem zu verbergen. Halten Sie die Bedingungen sichtbar und verknüpfen Sie sie mit dem Steuerelement unter Verwendung der Anweisungen von Fügen Sie Hinweistexte zu den Formularfeldern hinzu.

Eine Person kann die Browserüberprüfungen mit den Entwicklertools oder einer direkten Anfrage umgehen. Validieren Sie immer die wichtigen Daten auf dem Server, insbesondere die Werte, die für Konten, Zahlungen oder gespeicherte Einträge verwendet werden. Browserseitige Überprüfungen helfen den Benutzern, ihre Fehler zu korrigieren; serverseitige Überprüfungen schützen die Anwendung. Konsultieren Sie den MDN-Leitfaden zur Validierung von Einschränkungen.

Bevor Sie eine benutzerdefinierte Fehleroberfläche hinzufügen, wenden Sie auch die Barrierefreiheitsüberprüfungen für die Tastaturnutzung, den Fokus und die Namen an.

Vergleichen Sie die Grenzwerte mit den erwarteten Validierungsfehlern

Das Teilnehmerfeld verwendet min="1" max="10" step="1" required. Geben Sie jeden Wert ein und versuchen Sie, zu senden, wobei Sie eine korrekt formatierte Test-E-Mail beibehalten, damit der Fehler eines anderen Feldes das Ergebnis nicht verdeckt.

Die genaue Formulierung der eingebauten Fehler variiert. Die Tabelle unterscheidet fehlgeschlagene Einschränkungen, anstatt eine Nachricht vorzugeben. Eine gültige Menge von 2 macht das gesamte Formular nicht gültig, wenn ein anderes Feld weiterhin fehlschlägt.

Die eingebauten Hinweise folgen den HTML-Einschränkungen. Eine benutzerdefinierte Fehleroberfläche muss die Nachrichten mit ihren Steuerelementen verknüpfen und Zustandsänderungen sowie den Fokus verwalten. Dies erfordert zusätzliche Implementierung und Tests; aria-describedby allein erstellt keine Validierung.

Testen Sie selbst die Regeln

1. Lassen Sie jeweils ein Pflichtfeld leer und versuchen Sie, das Formular abzusenden.
2. Versuchen Sie Werte knapp außerhalb und innerhalb jeder angegebenen Grenze.
3. Verwenden Sie nur die Tastatur, um die Felder zu erreichen, die Fehler zu lesen, zu korrigieren und erneut einzureichen.