Eingaben prüfen und erleichtern

HTML kann Eingaben prüfen, bevor irgendetwas verschickt wird. Das kostet nur ein paar Attribute und erspart dem Nutzer den Umweg über eine Fehlerseite.

01 / 04Pflicht und Grenzen

<form>
  <label for="a">Name (Pflicht, mindestens 2 Zeichen)</label>
  <input type="text" id="a" name="a" required minlength="2">

  <label for="b">Portionen (1 bis 12)</label>
  <input type="number" id="b" name="b" min="1" max="12" step="1">

  <label for="c">E-Mail (Pflicht)</label>
  <input type="email" id="c" name="c" required>

  <button type="submit">Prüfen lassen</button>
</form>

required macht ein Feld zur Pflicht. Beim Absenden zeigt der Browser eine Meldung und springt zum ersten leeren Pflichtfeld. Probier es hier aus: Lass das Pflichtfeld leer und klick auf Absenden. Es passiert nichts, außer dass eine kleine Blase am Feld hängt und dir sagt, was fehlt. In welcher Sprache sie das tut, entscheidet die Einstellung deines Browsers, nicht die Seite.

minlength und maxlength begrenzen die Zeichenzahl bei Textfeldern.

min und max begrenzen den Wert bei Zahlen und Datumsfeldern. step legt die Schrittweite fest: step="1" lässt nur ganze Zahlen zu, step="0.5" auch halbe.

Dazu kommen die Prüfungen, die aus dem type selbst folgen: email will eine Adresse sehen, url eine Adresse mit Protokoll, number eine Zahl.

Die Meldungen dabei kommen vom Browser, sind übersetzt und lassen sich mit CSS und HTML kaum verändern. Wer eigene Fehlertexte will, braucht JavaScript. Für den Anfang ist das eingebaute Verhalten völlig ausreichend und oft besser als selbstgebaute Lösungen.

02 / 04Eigene Muster

<form>
  <label for="plz">Postleitzahl (fünf Ziffern)</label>
  <input
    type="text"
    id="plz"
    name="plz"
    pattern="[0-9]{5}"
    title="Fünf Ziffern, zum Beispiel 12345"
    required
  >

  <button type="submit">Prüfen lassen</button>
</form>

pattern prüft gegen einen regulären Ausdruck. [0-9]{5} heißt: fünf Zeichen aus dem Bereich 0 bis 9, nicht mehr und nicht weniger.

Reguläre Ausdrücke sind ein Thema für sich, und für den Anfang reichen zwei Muster: [0-9]{5} für eine feste Ziffernfolge und [A-Za-zÄÖÜäöüß]+ für Buchstaben. Das nackte [A-Za-z]+ sperrt Müller und Straße aus, und das merkt man erst, wenn sich jemand beschwert.

Wichtig dabei ist das title: Der Browser zeigt es an, wenn das Muster nicht passt. Ohne title lautet die Meldung sinngemäß „Bitte passen Sie das Format an“, und niemand weiß, welches Format gemeint ist. Ein pattern ohne title ist deshalb halbfertig.

Und beachte: Die Postleitzahl ist hier type="text", nicht number. Eine PLZ ist eine Ziffernfolge, keine Zahl, mit der man rechnet. Bei number würde eine führende Null verschwinden.

03 / 04Ausfüllen erleichtern

<form>
  <label for="vorname">Vorname</label>
  <input type="text" id="vorname" name="vorname" autocomplete="given-name">

  <label for="mail">E-Mail</label>
  <input type="email" id="mail" name="mail" autocomplete="email">

  <label for="kunde">Kundennummer (kann nicht geändert werden)</label>
  <input type="text" id="kunde" name="kunde" value="K-4711" readonly>

  <label for="gesperrt">Zurzeit nicht verfügbar</label>
  <input type="text" id="gesperrt" name="gesperrt" disabled>
</form>

autocomplete sagt dem Browser, was in ein Feld gehört, damit er gespeicherte Daten anbieten kann. Es gibt feste Werte dafür, unter anderem given-name, family-name, email, tel, street-address, postal-code, country-name.

Das ist mehr als Bequemlichkeit. Für Menschen mit motorischen Einschränkungen ist automatisches Ausfüllen der Unterschied zwischen zwei Sekunden und zwei Minuten, und in den Barrierefreiheitsrichtlinien ist es ausdrücklich gefordert. Es kostet ein Attribut.

Der Gegenwert autocomplete="off" gehört nur an Felder, bei denen Vorschläge tatsächlich schaden, etwa ein Einmalcode. An einer Adresse ist er einfach nur unhöflich.

readonly zeigt einen Wert an, der sich nicht ändern lässt. Er wird trotzdem mit abgeschickt.

disabled sperrt ein Feld ganz. Es wird ausgegraut, ist nicht anwählbar und wird nicht mit übertragen. Das ist der wichtige Unterschied zu readonly.

04 / 04Was das alles nicht ist

Zum Schluss der Satz, der über allem steht: Diese Prüfungen sind kein Schutz. Sie laufen im Browser, und der Browser gehört dem Nutzer. Mit den DevTools ist ein required in drei Sekunden entfernt, und Daten lassen sich auch ganz ohne Browser an einen Server schicken.

Die Browser-Prüfung ist Bequemlichkeit für ehrliche Nutzer: schnelle Rückmeldung, kein Seitenwechsel, weniger Frust. Der Server muss trotzdem jede Eingabe noch einmal vollständig prüfen. Immer.