Ein Eingabefeld mit dem Typ „email“ ist speziell dafür gedacht, E-Mail-Adressen von Benutzern zu erfassen. Es ist ein einfaches Textfeld, das jedoch der Webseite helfen kann, sicherzustellen, dass die eingegebene Information tatsächlich wie eine E-Mail-Adresse aussieht. So wird verhindert, dass jemand versehentlich etwas Falsches eingibt.

Zum Beispiel könnte ein Benutzer statt einer E-Mail-Adresse einen normalen Text wie „Hallo Welt“ eintippen. Mit einem „email“-Eingabefeld achtet der Browser darauf, dass die Eingabe wie eine echte E-Mail-Adresse aussieht, zum Beispiel „info@example.org“.

Warum benötigt man ein „email“-Eingabefeld?

Das „email“-Eingabefeld ist besonders praktisch, wenn eine Webseite mit Nutzern über ihre E-Mail-Adresse in Kontakt treten möchte. Es hat zwei große Vorteile:

1. Prüfung der Eingabe: Der Browser hilft dabei, zu überprüfen, ob die Eingabe wie eine E-Mail-Adresse aussieht. Wenn der Nutzer etwas Falsches eingibt, wird er darauf hingewiesen. Das bedeutet, es müssen Zeichen wie ein @ und ein Punkt . vorhanden sein.
2. Benutzerfreundlich auf mobilen Geräten: Wenn jemand mit einem Smartphone oder Tablet ein solches Feld ausfüllt, blendet die Tastatur automatisch praktische Tasten wie das @-Zeichen ein. Das macht die Eingabe schneller und einfacher.

Verwendungsbeispiele für E-Mail-Felder

Das Eingabefeld für E-Mails wird überall dort genutzt, wo man die E-Mail-Adresse des Benutzers benötigt. Hier sind zwei typische Beispiele:

1. Anmeldung oder Registrierung

Wenn jemand sich auf einer Webseite registrieren möchte, ist fast immer eine E-Mail-Adresse erforderlich. Die Webseite nutzt diese, um dem Nutzer wichtige Informationen zu schicken – etwa einen Link zur Bestätigung der Registrierung oder zum Zurücksetzen des Passworts.

2. Kontaktformulare

Viele Webseiten nutzen Kontaktformulare, um Fragen oder Nachrichten von Nutzern zu empfangen. Ein E-Mail-Feld erlaubt es den Website-Betreibern, später auf diese Nachrichten zu antworten.

Ein einfaches Beispiel

So könnte ein Eingabefeld für eine E-Mail-Adresse aussehen:

<form>
  <label for="email">E-Mail-Adresse:</label>
  <input type="email" id="email" placeholder="info@example.org">
</form>

In diesem Fall sieht der Nutzer sofort den Platzhalter „info@example.org“ im Feld. Das zeigt ihm, in welchem Format die Eingabe erwartet wird.

Worauf sollte man achten?

Auch wenn ein „email“-Eingabefeld überprüft, ob die Eingabe wie eine E-Mail-Adresse aussieht, garantiert es nicht, dass die Adresse tatsächlich existiert. Ein Browser kann nur das Format prüfen, aber nicht, ob die Adresse echt ist. Deshalb senden viele Webseiten eine Bestätigungsnachricht an die angegebene E-Mail-Adresse, um sicherzustellen, dass sie funktioniert.

Kurze Zusammenfassung:

Ein Eingabefeld vom Typ email in HTML5 erleichtert es, korrekt formatierte E-Mail-Adressen von Nutzern zu sammeln. Es sorgt für eine bessere Benutzererfahrung und reduziert Tippfehler. Dabei solltest du immer daran denken, dass zusätzliche Sicherheitsmaßnahmen – wie die Bestätigung der Adresse – nötig sind, um sicherzustellen, dass alles richtig funktioniert.