Fork me on GitHub

Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

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:

Html Code Einfaches Formular

<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”.

Html Code Formular mit pattern

<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;
}