Mit HTML5 ist es möglich dem Nutzer erkenntlich zu machen, welche Felder Pflichtfelder sind, bzw. ob das Feld richtig ausgefüllt wurde. Dies wird allerdings noch nicht von allen Browsern unterstützt. Um sicher zu gehen, dass Sie aus dem Formular die richtigen Daten erhalten und alle Pflichtfelder gefüllt sind, sollten die Angaben weiterhin serverseitig mit beispielsweise PHP überprüft werden.
Um ein Formularfeld mittels HTML5 als Pflichtfeld zu deklarieren muss dem Input-Tag nur ein „required„-Attribut hinzugefügt werden. Dies könnte beispielsweise so aussehen:
<input type=“text“ name=“Vorname“ required=“required“ />
Und sobald das Feld ausgefüllt wurde:
Die Formatierungen der Input-Felder, wie z.B. die Daumen, die in den Bildern zu sehen sind, können per CSS angepasst bzw. eingebaut werden:
input:required:invalid, input:focus:invalid {
background-image: url(/images/invalid.png);
background-position: right top;
background-repeat: no-repeat;
}
input:required:valid {
background-image: url(/images/valid.png);
background-position: right top;
background-repeat: no-repeat;
}
Auch, wenn die Formularfelder nur mit bestimmten Inhalten gefüllt werden sollen, kann dies mit HTML5 realisiert werden. Dazu muss das „pattern„-Attribut in den Input-Tag eingefügt werden:
<input type="url" name="website" required="required" pattern="https?://.+" />
In diesem Beispiel wird geprüft, ob das Feld mit „http://“ bzw. mit „https://“ beginnt.
Das „pattern„-Attribut erhält als Wert einen regulären Ausdruck. Die Eingabe des Benutzers muss, damit das Formular abgesendet werden kann, diesem Ausdruck entsprechen.