Formularprüfung

vorige Präsentation: Formulare | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Formular als Interaktion

HTML und CSS bieten einige möglichkeiten um die Eingabe im Formular sofort zu prüfen und Rückmeldung zu geben.

Tags für Formulare

Mit den HTML-Attributen required, minlength, maxlength, und einigen mehr kann man die Eingabe in einem Text-Eingabefehld prüfen:

<form method="get" action="bestellung.php">
  ...
  <input type="text"  name="fullname" minlength="2" maxlength="200">
  ...
  <input type="submit" value="Bestellen">
</form>

So sieht das Formular im Browser aus:

pattern

Mit dem Attribut pattern kann man ein “Muster” für den eigegebenen String vorgeben. Dieses “Muster” besteht im einfachsten fall aus einem Stück Text, im komplizierten Fall aus einer Folge von Sonderzeichen. Es handelt sich um eine eigene kleine Programmiersprache, einer sogenannten “Regular Expression”.

<form method="get" action="anmeldung.php">
  FH E-Mail Adresse:
  <input type="email"  name="email" pattern="@fh-salzburg.ac.at$">
  <input type="submit" value="Anmeldung">
</form>

CSS

Alle Eingabefelder, die die Prüfung nicht bestehen, kann man mit der Pseudo-Klasse :invalid in CSS selektieren:

:invalid {
  background-color: pink;
}

Links

• MDN: Client-side form validation
• html5pattern - bewährte Pattern für die Eingabeprüfung
• :invalid
• Attributes for Input Tags

Formularprüfung

vorige Präsentation: Formulare | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Formular als Interaktion