Information Technology Reference
In-Depth Information
3.4 ClientseitigeFormular-Überprüfung
Ein Vorteil der neuen Elemente und Attribute bei Formularen ist, dass die Ein-
gabe für Benutzer erleichtert wird (zum Beispiel wird ein Kalender zum Einge-
ben eines Datums angeboten). Ein weiterer großer Vorteil ist die Möglichkeit,
den Formular-Inhalt bereits vor dem Abschicken überprüfen zu können und
den Benutzer auf mögliche Fehler hinzuweisen. Jetzt werden Sie vielleicht sa-
gen, dass das ein alter Hut ist, denn diese Form der Überprüfung kennt man
bereits seit vielen Jahren. Das stimmt, aber bisher musste dieser Schritt im-
mer mithilfe von selbst programmiertem JavaScript-Code erledigt werden.
Durch jQuery und ähnliche Bibliotheken wurde diese Aufgabe zwar deutlich
erleichtert und der Code wartbarer, aber es bleibt die Abhängigkeit von einer
externen Bibliothek.
Mit HTML5 ändert sich das grundlegend: Sie definieren die Vorgaben für die
Eingabefelder in HTML, und der Browser überprüft, ob die Felder korrekt aus-
gefüllt wurden. Das ist ein großer Schritt vorwärts, der viele redundante Zeilen
JavaScript-Code unnötig macht. Ein Minimalbeispiel wird Sie überzeugen:
<form method=get action=required.html>
<p><label>Ihre E-Mail-Adresse:
<input type=email name=email required></label>
<p><input type=submit>
</form>
Was passiert, wenn Sie das Formular in dem oben abgedruckten Listing ohne
die Angabe einer E-Mail-Adresse abschicken, sehen Sie in Abbildung 3.12.
Opera zeigt die Fehlermeldung:
Sie müssen einen Wert eingeben
. Wenn Sie die
Opera-Benutzeroberfläche auf eine andere Sprache eingestellt haben, so er-
scheint diese Meldung in der entsprechenden Sprache. Natürlich kann man
diese Fehlermeldungen auch noch mit JavaScript anpassen, mehr dazu erfah-
ren Sie etwas später.
Damit aber noch nicht genug: Da das Feld vom Typ
email
definiert ist, meldet
Opera auch einen Fehler, wenn keine gültige E-Mail-Adresse eingegeben wur-
de (vergleiche Abbildung 3.13).
