Eingabefelder mit HTML 5 überprüfen

Mit HTML 5 und dem Attribut pattern="" kann man Eingabefelder im Formular überprüfen bevor dieses abgesendet wird.

Beispiel:
Angabe: Zahlen: <input type="number" name="zahlen" pattern="[0-9]">
Info: Es werden nur Zahlenwerte angenommen.

Fehlerhafte Eingaben hervorheben

Eingabefehler werden bei einer fehlerhaften Eingabe rot markiert, mit CSS kann das angepasst werden:

<style>
input:invalid {
  color: #EE0000;
}
</style>

Minimal.- und Maximalangaben setzen

Für das Eingabefeld vom Typ: "number", können die Attribute: min="" und max="" verwendet werden. Beim Attribut min="" geben Sie den minimalen Wert ein und bei max="" den maximalen Wert.

Beispiel:
Angabe: Zahlen: <input type="number" name="zahlen" min="10" max="100">
Info: Es werden nur Zahlenwerte von 10 bis 100 angenommen.

Auf Kleinbuchstaben überprüfen

Beispiel:
Angabe: Buchstaben: <input type="text" name="buchstaben" pattern="[a-z]">
Info: Es werden nur Kleinbuchstaben angenommen (ohne Umlaute und Sonderzeichen).

Eingabefelder mit HTML 5 überprüfen
eingabefelder_mit_html_5_ueberpruefen.php
pattern
required
min / max

[a-z]
[A-Z]
[a-zA-Z] ohne Umlaute!
[0-9]
[0-9 {1}]
[0-9 {2,}]
[0-9 {2,5}]