Formulare mit HTML5 und CSS3 erstellen

Der einfache Titel dieses Beitrages täuscht. Mit den aktuellen Browsern kann man komplette Formulare validieren, Fehlermeldungen darstellen und sogar reguläre Ausdrücke in den Eingabefeldern hinterlegen, gegen die die Eingaben validiert werden. In diesem Artikel erfahrt ihr, zu was die aktuellen Browser fähig sind.

Die Eingabefelder

Mit HTML5 kamen auch neue Typen für einfache Eingabefelder. Während HTML4 sich noch mit einem simplen Text Eingabefelder zufrieden gab, gibt es unter HTML5 z.B. Typen für Color, Date, E-Mail oder URL Eingabefelder. Sogar eine Fallback Lösung für ältere Browser ist implementiert. Sollte der Browser diese Typen nicht unterstützen, wird dem Eingabefeld einfach der Typ Text zugordnet. Eine sinnvolle Eigenschaft der Browser.

Ein beispielhaftes Eingabefeld für eine E-Mail Adresse könnte wie folgt aussehen

<p>
    <label for="mmn-name">Name:</label>
    <input type="email" name="mmn-name" id="mmn-name">
</p>

Im Browser erscheinen die neuen Eingabefelder weitestgehend als Text Eingabefelder. Die wirklichen Vorteile gibt es dann aber auf mobilen Endgeräten. Das Eingabefeld für E-Mail Adressen lässt auf Mobiltelefonen z.B. die Tastatur zur Eingabe von E-Mail Adressen und nicht die normale Tastatur erscheinen. Die Usability wird durch diese Eingabefelder nochmals erhöht.

Native Platzhalter

Ich kann mich noch an Zeiten erinnern, in denen Platzhaltertexte mit Javascript in Eingabefeldern platziert wurden. Mit dem Einzug von HTML5 hat sich der Einsatz von Platzhaltertexten sehr vereinfacht. Alle aktuellen Browser unterstützen das placeholder Attribut für Eingabeelemente. Anhand unseres ersten Codebeispiels sieht der Einsatz von Platzhaltern wie folgt aus.

<p>
    <label for="mmn-name">Name:</label>
    <input type="email" name="mmn-name" id="mmn-name" placeholder="Deine E-Mail Adresse">
</p>

Durch das placeholder Attribut wird der Text „Deine E-Mail Adresse“ im Eingabefeld hinterlegt. Sobald man etwas in das Eingabefeld eingibt, verschwindet dieser Text. Ein Platzhalter sollte niemals das Label für ein Eingabefeld ersetzen. Da der Platzhalter verschwindet, sobald etwas in das Eingabefeld eingegeben wird, läuft man Gefahr, dass der User nicht mehr weiß, was er eigentlich in das Eingabefeld eingeben soll. Im Sinne der Usability wäre dies ein ziemlich schwerer Fehler.

Erforderliche Angaben mit dem required Attribut

In fast jedem Formular gibt es Pflichtangaben. Wie anfangs erwähnt, kann man mit aktuellen Browsern die Validierung von Eingabefeldern erledigen. Um dies zu ermöglichen, ist es notwendig die Eingabefelder als Pflichtfeld zu deklarieren. In unserem Beispiel sieht dies folgendermaßen aus.

<p>
    <label for="mmn-name">Name:</label>
    <input type="email" name="mmn-name" id="mmn-name" placeholder="Deine E-Mail Adresse" required>
</p>

Das required Attribut bewirkt, dass der eingegebene Wert beim Absenden des Formulares auf die Angabe einer E-Mail Adresse geprüft wird. Im Fehlerfall wird das Formular nicht abgesendet. Es wird eine Fehlermeldung eingeblendet.

Validierung mit regulären Ausdrücken

Mitunter kann so eine Überprüfung von Eingabewerten ja auch ganz schön umfangreich werden. Hin und wieder muss man die eingegebenen Werte auch anhand eines regulären Ausdrucks validieren. HTML5 liefert hierfür das pattern Attribut. Mit Hilfe des Pattern Attributes kann man einen regulären Ausdruck angeben, so wie man es auch in Javascript tun würde.

<p>
    <label for="mmn-name">Name:</label>
    <input type="email" name="mmn-name" id="mmn-name" placeholder="Deine E-Mail Adresse" required 
        pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
        title="Bitte gebe eine E-Mail Adresse an.">
</p>

Normalerweise würde das Eingabefeld vom Typ E-Mail schon als E-Mail Adresse validiert werden. Mir persönlich war das aber noch nicht genau genug. So habe ich das Eingabefeld um einen regulären Ausdruck erweitert, der die Eingabe auf alle Bestandteile einer E-Mail Adresse validiert. Erst wenn die Angaben dem regulären Ausdruck entsprechen, kann das Formular abgesendet werden. Ja, das alles ist natives HTML5. Wir verwenden kein Javascript und kein PHP zur Validierung.

In Kobination mit dem pattern Attribut kann das title Attribut zur Angabe einer individuellen Fehlermeldung angegeben werden. Dieser Text wird dann im Fehlerfall in der Error Bubble angezeigt.

Individuelle Fehlermeldungen

Natürlich muss dem User auch angezeigt werden, was der User falsch gemacht hat. Dies geschieht in modernen Browsern voll automatisch. Jeder aktuelle Browser verfügt über standardisierte Fehlermeldungen. Die einfache Fehlermeldung bei einem nicht ausgefüllten Eingabefeld lautet zum Beispiel „Bitte füllen Sie dieses Feld aus“. Diese Meldung passt sich der auf der Website festgelegten Sprache automatisch an.

Glücklicherweise gibt es mit der HTML5 Validierung auch neue Javascript Events, mit denen man auch die Fehlermeldungen individualisieren kann. Hierzu ein kleines Beispiel, wie wir die Standard Meldung „Bitte geben Sie eine E-Mail Adresse ein“ ändern können. Ja, das alles ist noch nativ.

var email = document.querySelector('input[type="email"]');
email.oninvalid = function(e) {
    e.target.setCustomValidity('');
    if (!e.target.validity.valid) {
        if (e.target.value.length == 0) {
            e.target.setCustomValidity('Füll mich aus! Los! Tu es! Lohoooos!');
        } else {
            e.target.setCustomValidity('Gib endlich eine richtige E-Mail Adresse an man!');
        }
    }
}

Komischerweise besteht Javascript darauf, dass man die Fehlermeldung erst zurücksetzt. Aber dann stehen einem eigentlich alle Wege offen. In diesem Beispiel unterscheiden wir dann noch mal zwischen zwei Zuständen. Einmal werten wir ein leeres Eingabefeld aus. Sobald etwas eingegeben wurde und dies nicht unserem E-Mail Pattern entspricht, zeigen wir die andere Fehlermeldung an. Das ist eine native Funktion. Kaum zu glauben, oder?

CSS Eigenschaften

Mit dieser Art der Validierung von Formularen kommen auch einige CSS3 Pseudo Elemente, mit denen man die validen und invaliden Zustände der Eingabefelder nach seinen eigenen Wünschen gestalten kann. Ebenfalls ist die Error Bubble, in der die Fehlermeldung dargestellt wird, über CSS3 frei gestaltbar.

/* Eigenschaften für invalide Input Felder */
input:focus:invalid {}

/* Eigenschaften für valide Input Felder */
input:required:valid {}

Es gibt noch einige Pseudo Elemente mehr. Aber dafür reicht der Platz hier nicht aus. Einige sind im Beispiel-Formular am Ende dieses Artikels angewendet worden.

Einschränkungen

Die hier gezeigten Möglichkeiten beziehen sich auf moderene Browser.  Ältere Browser ohne HTML5 Unterstützung können diese einfache Art der Formularvalidierung nicht umsetzen. Für ältere Browser müsste in diesem Fall eine Fallback Lösung herhalten. Wir sollten den Grundsatz niemals Benutzereingaben zu vertrauen auch weiterhin strikt verfolgen und in diesem Sinne parallel eine Server-seitige Validierung mittels PHP hinterlegen, die die Daten nochmals validiert und dann verarbeitet.

Safari und Chrome stellen mit ihren aktuellen Versionen ebenfalls Sonderfälle dar. Diese Webkit Browser besitzen zwar vollen nativen HTML5 Support für die Validierung von Eingabeelementen, feuern sie aber nicht beim Absenden der Formulare automatisch ab. Aus meiner Sicht ein eher fragwürdiges Verhalten der Webkit Browser. Hierzu ein kleines Workaround, um dieses Verhalten in modernen Webkit Browsern dennoch zu aktivieren.

var form = document.getElementById('mein-formular');
form.addEventListener('submit', function(event) {
    if (!event.target.checkValidity()) {
        event.preventDefault();
        /* error handling */
    }
}, false);

Fakt bleibt aber, dass Webkit Browser, im speziellen Safari, keine Error Bubbles unterstützen, so dass die Fehlermeldungen nicht dargestellt werden. Alternativ könnte man hier mit Javascript gegenwirken, da alle Form Validation Events vorhanden sind. Ich hoffe aber, dass Apple mit seiner aktuellen HTML5 Kampagne in diesem Bereich aufholen wird.

Es ist in diesem Zusammenhang immer ratsam einen Blick auf die Unterstützung der verschiedenen Browser werfen.

Das Beispielformular

Das Beispielformular findet ihr hier. Da der Safari keine Error Bubbles unterstützt, werden in diesem Beispiel die Fehlermeldungen überhalb der Eingabefelder dargestellt. Dies soll nur verdeutlichen, dass die Javascript Eigenschaften auch im Safari vorhanden sind. Es spricht also nichts dagegen die HTML5 Validierung auch im Safari zu nutzen.

Das Beispielformular unterscheidet sich in den verschiedenen Browsern zu Anschauungszwecken. Jeder aktuelle Browser hat so seine Eigenheiten. Sehr deutlich wird dies im direkten Vergleich zwischen Firefox und Internet Explorer 10. Theoretisch könnte man ein User Interface so anpassen, dass es in allen Browsern gleich erscheint. Das gezeigte beispielhafte Formular hat keinen Anspruch auf Vollständigkeit und kann Fehler enthalten.

Haben wir also wieder etwas gelernt. 😉

1 Gedanke zu „Formulare mit HTML5 und CSS3 erstellen“

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.