Vor dem Aufkommen von HTML5 erforderte die Handhabung von E-Mail-Adressen mehr Arbeit, um die E-Mail-Adressen mit Javascript zu validieren. Nun, all das ist mit dem neuen HTML5-Eingabetyp Email nicht mehr nötig.
Das Email-Eingabeelement wurde speziell für die Handhabung und Validierung von Email-Adressen entwickelt. Je nach Browser weist es den Benutzer darauf hin, dass die eingegebenen Informationen nicht korrekt sind, und das Formular wird nicht abgeschickt, bis der Benutzer Korrekturen vornimmt.
Beispielcode:
<label for="email_input">Enter your email address:</label><input type="email" name="email" placeholder="Your Email">Allgemeine Verwendung
Speichern Sie den folgenden Code in ein Textdokument und öffnen Sie es mit einem Webbrowser.
<!DOCTYPE html><html><head> <style> body { padding-top: 200px; padding-left: 300px } </style></head><body> <p>Please Provide Your Current E-Mail Address <form> <input type="email"> </form></body>So sollte die Seite aussehen:
Wenn Sie mehrere Adressen auf einmal sammeln wollen, können Sie das multiple Attribut hinzufügen:
<input type="email" multiple>Der Benutzer kann nun eine oder mehrere Adressen getrennt durch ein Komma eingeben.
Validierung
Browser, die den Eingabetyp E-Mail unterstützen, stellen die Validierung auf unterschiedliche Weise zur Verfügung. Alle Browser verwenden jedoch einen gemeinsamen Validierungsalgorithmus nach folgendem Muster:
Die Mindestanforderungen sind die Symbole @ und . und das Fehlen von Leerzeichen zwischen den Zeichen. Bitte beachten Sie, dass es nicht möglich ist, zu überprüfen, ob die angegebene Adresse tatsächlich existiert. Dies ist ein Problem, das von Ihrem serverseitigen Skript behandelt werden muss. Ein guter Weg, um auf gültige E-Mail-Adressen zu testen, ist es, einen Link an die E-Mail-Adresse zu senden, der, wenn er angeklickt wird, bestätigt, dass die E-Mail gültig ist.
Mozilla Firefox
Sobald der Benutzer mit der Eingabe fertig ist und zu einem anderen Element wechselt, überprüft Firefox die eingegebenen Daten. Wenn es sich nicht um eine gültige E-Mail-Adresse handelt, erscheint die Eingabe mit einem roten Rahmen, wie unten gezeigt:
Wenn der Benutzer fortfährt, auf die Schaltfläche „Submit“ zu klicken, ohne die angegebene E-Mail-Adresse zu ändern, wird das Formular nicht abgeschickt und ein Tooltip erscheint, der die Fehlermeldung auf der Eingabe zeigt.
Google Chrome
Google Chrome bietet keine visuelle Unterstützung, wenn der Benutzer ungültige Daten eingibt.
Beim Absenden erscheint jedoch eine Fehlermeldung mit einem Tooltip, der einen Hinweis darauf gibt, was der Benutzer eingeben soll.
Wenn Sie dem Benutzer eine benutzerdefinierte Fehlermeldung geben wollen, können Sie das title-Attribut verwenden:
<input type="email" title="Please Provide A Valid Email Address !">Browserunterstützung
Der Eingabetyp E-Mail wird in allen modernen Browsern weitgehend unterstützt. In der folgenden Tabelle finden Sie die unterstützten Mindestversionen. IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0
Details zur Browserunterstützung finden Sie unter: Kann ich den Eingabetyp E-Mail verwenden
Wenn die verwendete Browserversion diesen Eingabetyp nicht unterstützt, wird stattdessen ein Eingabetext angezeigt. Wenn Sie Daten verarbeiten, die auf der Serverseite übermittelt werden, stellen Sie sicher, dass Sie die Daten selbst validieren, bevor Sie sie akzeptieren.
Auf Android- und IOS-Plattformen enthält die Tastatur automatisch die Tasten @ und ., wenn der Eingabetyp E-Mail ist.
Warum diesen neuen Eingabetyp verwenden
- Der Eingabetyp E-Mail erleichtert die Webentwicklung, da die Validierungsarbeit vom Browser übernommen wird. Wenn das Attribut „erforderlich“ angegeben wurde, akzeptiert der Browser nicht, dass das Formular abgeschickt wird.
- Sie können alle Eingabetyp-E-Mails in Ihrer Website in einem bestimmten Stil gestalten, so dass sie durchgängig in einem Standardstil erscheinen.
- Mobile Geräte können die Soft-Tastatur an die E-Mail-Eingabe anpassen (mit den @ und . leicht zugänglich
Angewandtes CSS
Um einen bestimmten Stil nur auf E-Mail-Eingabefelder anzuwenden, verwenden Sie den Attributselektor wie folgt:
input{ background-color:#ccc;}Demo
Siehe auch
- Wie man ein Telefon-Eingabefeld in HTML5 erstellt
- Wie man den Wert eines Kontrollkästchens bei der Formularübermittlung erhält