HTML/Tutorials/Formulareingaben mit HTML5 validieren

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Es ist sinnvoll HTML-basierte Formulare nicht erst serverseitig, sondern zusätzlich schon vor dem Absenden clientseitig auf Validität zu überprüfen. HTML5 bietet einige Möglichkeiten, Eingaben von input-Elementen bereits während der Eingabe zu validieren. Auch wenn diese Validierungen eine spätere serverseitige Überprüfung nicht ersetzen, werden falsche Eingaben sofort durch CSS sichtbar gemacht und können ohne weitere HTTP-Requests korrigiert werden.

Für die Grundlagen zu diesem Tutorial eignet sich der Artikel Formulare erstellen und gestalten.

Beachten Sie: Eine clientseitige Validierung von Formulardaten kann eine serverseitige Validierung keinesfalls ersetzen, sondern nur den Bedienkomfort eines Nutzers erhöhen, indem das Absenden ungeeigneter Daten im Vorfeld zu vermeiden versucht wird. Diese Filterung kann jedoch umgangen werden, weshalb man sich auf der Serverseite niemals auf solche Prüfmechanismen verlassen darf.

Inhaltsverzeichnis

[Bearbeiten] Hinweise zur Eingabe

Um valide Daten zu erhalten, ist es empfehlenswert nicht nur bereits eingegebene Daten auf ihre Gültigkeit zu überprüfen, sondern dem Benutzer schon vor der Eingabe Hinweise und Hilfen zur richtigen Eingabe zu geben.

[Bearbeiten] Beschreibungen mit label

Labels (engl. Etikett) sind Beschriftungen für input-Elemente.

Beispiel: Labels beschriften Eingabefelder ansehen …
<form> <label for="bname">Benutzername</label> <input id="bname"> <label for="passwd">Passwort</label> <input id="passwd"> <button type="reset">Eingaben zurücksetzen</button> <button type="submit">Eingaben absenden</button> </form>

Dabei sollten die label-Elemente den entsprechenden input-Elementen zugeordnet werden. Das geschieht, indem jedes label-Element ein for-Attribut erhält, das denselben Wert bekommt, wie das id-Attribut des entsprechenden input-Elements. Jetzt kann man auch auf die Beschriftung des Feldes klicken und der Textcursor landet im passenden Eingabefeld.

Das input-Element kann dabei wie im Beispiel außerhalb des label-Elementes stehen, die Zuordnung erfolgt dabei durch das for-Attribut, oder auch Kind des labels sein. In diesem Fall könnte man auf die Vergabe eines for-Attributs verzichten, die Zuordnung erfolgt dabei implizit über die Struktur des Quelltextes. Dies führt jedoch bei Screenreadern zu Schwierigkeiten.

Empfehlung: Nutzen Sie auch bei einer impliziten Zuordnung der Labels zu den Eingabefeldern for-Attribute.

[Bearbeiten] Hinweise mit placeholder

Eine Möglichkeit, Hinweise zu Eingabefeldern zu geben, sind placeholder-Attribute der input-Elemente. Im Gegensatz zu einem Label, welches die Beschriftung von Eingabefeldern enthält, sind Placeholder (Platzhalter) Hinweise für das korrekte Ausfüllen der Eingabefelder.

Beispiel: placeholder geben Hinweise ansehen …
<form> <label for="bname">Benutzername</label> <input id="bname" placeholder="Benutzername oder E-Mail-Adresse"> <label for="passwd">Passwort</label> <input id="passwd" placeholder="Ihr Passwort"> <button type="reset">Eingaben zurücksetzen</button> <button type="submit">Eingaben absenden</button> </form>

[Bearbeiten] browsereigene Validierung mit HTML5

Während Daten früher ungeprüft zum Server geschickt wurden, können Eingaben heute schon vor dem Absenden des Formulars vom Browser selbst auf ihre Gültigkeit hin geprüft werden. Die Pseudoklassen :valid für gültige und :invalid für falsche Eingaben selektieren Formularelemente auf die Gültigkeit einer Eingabe hin. Das Ergebnis kann mit den Möglichkeiten von CSS entsprechend angezeigt werden.

[Bearbeiten] Eingabemuster mit pattern

Mit dem pattern-Attribut können Sie die Eingaben von input-Elemente gegen einen regulären Ausdruck hin überprüfen, ob die Eingabe den Erwartungen entspricht. Für die Eingabe von Zahlen, Telefonnummern und E-Mail-Adressen gibt es bereits eigene Typen, sodass Sie keine weiteren Einstellungen vornehmen müssen.

  • HTML5
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Eingabemuster mit pattern ansehen …
  <label for="bname">Benutzername</label>
  <input id="bname" required>
 
  <label for="passwd">Passwort</label>
  <input id="passwd" type="password" required pattern="67kgYx@3rt" 
         title="Das Passwort lautet: &quot;67kgYx@3rt&quot;ohne Anführungszeichen.">
 
  <label for="text">Leerzeichen verboten</label>
  <input id="text" pattern="^\S*$">
Es muss ein Benutzername angegeben werden.

Das Passwort wird vor dem Absenden des Formulars Korrektheit überprüft (pattern = …).

Die Eingabe des letzten Feldes darf kein Leerzeichen enthalten.

[Bearbeiten] Ober- und Untergrenzen

Mit den Attributen min, max und maxlength können Sie Ober- und Untergrenzen festlegen.

Beispiel ansehen …
input {
    border: 1px solid black;
}
input:in-range {
    background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
    background-color: rgba(255, 0, 0, 0.25);
    border: 2px solid red;
}
input:in-range + ::after {
    content:' ✔';
}
input:out-of-range + ::after {
    content:' außerhalb des Bereichs!';
}
<form action="" id="form1">
  <label for="alter">Ihr Alter ist: </label>
  <input id="alter" name="altersangabe" type="number" placeholder="6 bis 99" min="6" max="99">
  <span></span>
</form>
Im vorliegenden Beispiel ändert sich die Hintergrundfarbe des Eingabefelds von grün auf rot, sobald etwas außerhalb des Gültigkeitsbereichs eingegeben wurde. Die Hintergrundfarbe ist in den Pseudoklassen :in-range und :out-of-range festgelegt. Sobald der eingegebene Wert wieder im Gültigkeitsbereich der Bereichsbegrenzung liegt, wird der Hintergrund wieder grün.


[Bearbeiten] Pflichtfelder

Pflichtfelder erhalten das required-Attribut (engl. für erforderlich). Solange die Eingaben nicht valide sind, wird ein Absenden des Formulars verhindert und eine Fehlermeldung ausgegeben.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Pflichtangaben ansehen …
<form> <label for="bname">Benutzername</label> <input id="bname" required> <label for="passwd">Passwort</label> <input type="password" id="passwd" required> <input type="submit" value="anmelden"> </form>
Beachten Sie: Safari zeigt zwar die entsprechende Fehlermeldung an, schickt das Formular aber trotzdem ab.


Screenshot von Fehlermeldungen bei Pflichtangaben

Beachten Sie: Diese Meldungen sind sehr allgemein gehalten und können unter ungünstigen Umständen in der im Browser eingestellten, und nicht in der in der Webseite verwendeten Sprache sein.
Es könnte empfehlenswert sein, die browsereigene Gültigkeitsüberprüfung abzuschalten und durch eigene JavaScripte zu ersetzen.

[Bearbeiten] Anwendungsbeispiel

[Bearbeiten] Validierung der Eingabe

Es ist sinnvoll, Pflichtfelder zu kennzeichen. Häufig geschieht das durch einen Asterisk *. In diesem Beispiel ändert sich die Kennzeichnung zu einem Haken ✔, sobald die Eingabe valide ist. Durch Verwendung der Pseudoklassen :valid, :invalid können Sie die Eingabe überprüfen:

Beispiel ansehen …
form {
  width: 30em;
  padding-top: 3em;
  position: relative;
}
input {
  margin: 0 0 1em 31%;
  padding: .2em .5em;
  width: 60%;
  background-color: #fffbf0; 
  border: 1px solid #e7c157;  
}
label { 
  text-align: right;
  line-height: 1.5;
  width: 30%;
  position: absolute;
  left: 0;
}
label::after {
  content: ": ";
}
button {
  margin-left: 31%;
}
input:required + label::before {
  position: absolute;
  left: 300%;
  content: "★";
  color: red;
}
input:required:valid + label::before {
  content: "✔";
  color: green;
}
    <form>
         <input id="bname" required><label for="bname">Benutzername</label>
         <input id="passwd" type="password" required><label for="passwd">Passwort</label>      
         <button type="submit">anmelden</button>
    </form>
Die Kennzeichnung ( bzw. ) erfolgt durch ::before-Pseudoelemente der label-Elemente, die ::after-Pseudoelemente stellen wie in den anderen Beispielen dieser Seite auch bereits die abschließenden Doppelpunkte dar.

Die Reihenfolge im Markup ist ungewöhnlich, aber notwendig:

  • input darf als replaced element keinen, auch keinen generierten Inhalt erhalten,
  • CSS kann nur vorwärts selektieren

[Bearbeiten] Weblinks

deutsch

englisch

[Bearbeiten] Siehe auch


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML