<input type="email">

Der Eingabewert wird automatisch validiert, um sicherzustellen, dass er entweder leer oder als korrekt formatierte E-Mail-Adresse (oder Liste von Adressen) vorliegt, bevor das Formular gesendet werden kann. Die CSS-Pseudoklassen :valid und :invalid werden automatisch angewendet, um visuell anzuzeigen, ob der aktuelle Wert des Feldes eine gültige E-Mail-Adresse ist oder nicht.

Das value-Attribut des <input>-Elements enthält einen String, der automatisch auf Konformität zur E-Mail-Syntax validiert wird. Genauer gesagt gibt es drei mögliche Wertformate, die die Validierung bestehen:

1. Ein leerer String („“), der anzeigt, dass der Benutzer keinen Wert eingegeben hat oder dass der Wert entfernt wurde.
2. Eine einzelne korrekt formatierte E-Mail-Adresse. Das bedeutet nicht unbedingt, dass die E-Mail-Adresse existiert, aber sie ist zumindest korrekt formatiert. Einfach ausgedrückt bedeutet das username@domain oder [email protected]. Natürlich gibt es noch mehr dazu; siehe Validierung für einen regulären Ausdruck, der dem E-Mail-Validierungsalgorithmus entspricht.
3. Wenn und nur wenn das multiple-Attribut festgelegt ist, kann der Wert eine Liste korrekt formatierter, durch Kommas getrennter E-Mail-Adressen sein. Führende und nachfolgende Leerzeichen werden von jeder Adresse in der Liste entfernt.

Siehe Validierung für Details dazu, wie E-Mail-Adressen validiert werden, um sicherzustellen, dass sie korrekt formatiert sind.

Zusätzlich zu den globalen Attributen und den Attributen, die auf alle <input>-Elemente angewendet werden, unabhängig von ihrem Typ, unterstützen email-Eingaben die folgenden Attribute.

Der Wert des list-Attributs ist die id eines im selben Dokument befindlichen <datalist>-Elements. Die <datalist> bietet eine Liste vordefinierter Werte an, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Die maximale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in die email-Eingabe eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die email-Eingabe keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird bei der Einschränkungsvalidierung fehlschlagen, wenn die Länge des Textwerts des Feldes größer als maxlength UTF-16-Codeeinheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Die minimale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in die email-Eingabe eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert kleiner oder gleich dem durch maxlength angegebenen Wert sein. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die email-Eingabe keine minimale Länge.

Die Eingabe wird bei der Einschränkungsvalidierung fehlschlagen, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16-Codeeinheiten beträgt. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Ein boolesches Attribut, das, wenn es vorhanden ist, anzeigt, dass der Benutzer eine Liste mehrerer, durch Kommas und optional durch Leerzeichen getrennte E-Mail-Adressen eingeben kann. Siehe Mehrere E-Mail-Adressen erlauben für ein Beispiel oder HTML-Attribut: multiple für weitere Details.

Das pattern-Attribut ist ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-Regulärer-Ausdruck sein, wie er von dem RegExp-Typ verwendet wird und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als Folge von Unicode-Codepunkten statt als ASCII behandelt wird. Keine Schrägstriche sollten um den Mustertext angegeben werden.

Wenn das angegebene Muster nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert.

Siehe den Abschnitt Musterüberprüfung für Details und ein Beispiel.

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstatt eine erklärende Nachricht zu liefern. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung präsentiert werden muss, können Sie Unicode-Bidirektionale-Algorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Wie man Unicode-Steuerzeichen für bidi-Text verwendet für mehr Informationen.

Ein boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch JavaScript-Code direkt durch Setzen der value-Eigenschaft des HTMLInputElement geändert werden.

Das size-Attribut ist ein Zahlenwert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da Zeichenbreiten variieren, kann dies exakt sein oder nicht und sollte nicht darauf verlassen werden; das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und den Schriftarten (font-Einstellungen).

Dies legt nicht fest, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es spezifiziert nur ungefähr, wie viele gleichzeitig sichtbar sein können. Um ein oberes Limit für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

E-Mail-Adressen gehören zu den am häufigsten auf der Website eingegebenen Textdaten; sie werden beim Einloggen auf Websites, bei Anfragen nach Informationen, zur Bestätigung von Bestellungen, für Webmail usw. verwendet. Die Eingabeart email kann Ihnen als Webentwickler die Arbeit erheblich erleichtern, da sie die Arbeit bei der Erstellung der Benutzeroberfläche und Logik für E-Mail-Adressen erleichtert. Wenn Sie eine E-Mail-Eingabe mit dem richtigen type-Wert email erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text zumindest die richtige Form hat, um möglicherweise eine legitime E-Mail-Adresse zu sein. Dies kann helfen, Fälle zu vermeiden, in denen der Benutzer seine Adresse falsch eingibt oder eine ungültige Adresse angibt.

Es ist jedoch wichtig zu beachten, dass dies nicht ausreicht, um sicherzustellen, dass der eingegebene Text eine tatsächlich existierende E-Mail-Adresse ist, die dem Benutzer der Website entspricht oder in irgendeiner Weise akzeptabel ist. Es stellt lediglich sicher, dass der Wert des Feldes korrekt formatiert ist, um eine E-Mail-Adresse zu sein.

Derzeit implementieren alle Browser, die dieses Element implementieren, es als ein Standard-Text-Eingabefeld mit grundlegenden Validierungsfunktionen. Die Spezifikation erlaubt es den Browsern jedoch, dies zu variieren. Beispielsweise könnte das Element in das integrierte Adressbuch des Geräts des Benutzers integriert sein, um E-Mail-Adressen aus dieser Liste auszuwählen. In seiner grundlegendsten Form kann eine email-Eingabe wie folgt implementiert werden:

<input id="emailAddress" type="email" />

Beachten Sie, dass sie als gültig angesehen wird, wenn sie leer ist und wenn eine korrekt formatierte E-Mail-Adresse eingegeben wird, ansonsten jedoch nicht als gültig angesehen wird. Durch Hinzufügen des required-Attributs sind nur korrekt formatierte E-Mail-Adressen erlaubt; die Eingabe wird nicht mehr als gültig angesehen, wenn sie leer ist.

Durch Hinzufügen des booleschen Attributs multiple kann die Eingabe so konfiguriert werden, dass sie mehrere E-Mail-Adressen akzeptiert.

<input id="emailAddress" type="email" multiple />

Die Eingabe wird nun als gültig angesehen, wenn eine einzelne E-Mail-Adresse eingegeben wird oder wenn eine beliebige Anzahl von durch Kommas getrennten E-Mail-Adressen und, optional, eine Anzahl von Leerzeichen vorhanden sind.

Einige Beispiele für gültige Zeichenketten, bei denen multiple angegeben ist:

• ""
• "me@example"
• "[email protected]"
• "[email protected],[email protected]"
• "[email protected], [email protected]"
• "[email protected],[email protected], [email protected]"

Einige Beispiele für ungültige Zeichenketten:

• ","
• "me"
• "[email protected] [email protected]"

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis auf die erwartete Form der Eingabedaten zu geben. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jede <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form des value demonstriert, indem er ein Beispiel für einen gültigen Wert innerhalb des Eingabefeldes anzeigt, wenn der value leer ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wenn das Feld geleert wird, wird der Platzhalter erneut angezeigt.

Hier haben wir ein email-Eingabefeld mit dem Platzhalter [email protected]. Beachten Sie, wie der Platzhalter verschwindet und erscheint, während Sie den Inhalt des Eingabefelds manipulieren.

<input type="email" placeholder="[email protected]" />

Sie können nicht nur die physische Länge des Eingabefeldes, sondern auch die Mindest- und Höchstlängen für den Eingabetext selbst steuern.

Physische Größe des Eingabeelements

Die physische Größe des Eingabefeldes kann mit dem size-Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel ist das email-Bearbeitungsfeld 15 Zeichen breit:

<input type="email" size="15" />

Elementwertlänge

Das size-Attribut ist von der Längenbegrenzung der eingegebenen E-Mail-Adresse selbst getrennt, sodass Sie Felder in einen kleinen Raum einfügen können, während Sie noch längere E-Mail-Adressstrings zulassen. Sie können mit dem Attribut minlength eine Mindestlänge (in Zeichen) für die eingegebene E-Mail-Adresse festlegen; verwenden Sie entsprechend maxlength, um die maximale Länge der eingegebenen E-Mail-Adresse festzulegen.

Das untenstehende Beispiel erstellt ein Eingabefeld für E-Mail-Adressen mit einer Breite von 32 Zeichen, das erfordert, dass der Inhalt mindestens 3 Zeichen lang und maximal 64 Zeichen lang ist.

<input type="email" size="32" minlength="3" maxlength="64" />

Bereitstellung eines einzelnen Standards mit dem Wertattribut

Wie immer können Sie einen Standardwert für ein email-Eingabefeld bereitstellen, indem Sie dessen value-Attribut festlegen:

<input type="email" value="[email protected]" />

Anbieten vorgeschlagener Werte

Einen Schritt weiter können Sie eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer wählen kann, indem Sie das list-Attribut angeben. Dies beschränkt den Benutzer nicht auf diese Optionen, ermöglicht ihm jedoch, häufig verwendete E-Mail-Adressen schneller auszuwählen. Dies bietet auch Hinweise auf autocomplete. Das list-Attribut gibt die ID einer <datalist> an, die wiederum ein <option>-Element pro vorgeschlagenem Wert enthält; jedes option value ist der entsprechende vorgeschlagene Wert für das E-Mail-Eingabefeld.

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
</datalist>

Mit dem <datalist>-Element und seinen <option>s an Ort und Stelle wird der Browser die angegebenen Werte als potenzielle Werte für die E-Mail-Adresse anbieten; dies wird normalerweise als Popup oder Dropdown-Menü mit den Vorschlägen präsentiert. Während die spezifische Benutzererfahrung von einem Browser zum anderen variieren kann, wird typischerweise durch Klicken in das Eingabefeld ein Dropdown-Menü mit den vorgeschlagenen E-Mail-Adressen präsentiert. Dann wird die Liste beim Tippen gefiltert, um nur passende Werte anzuzeigen. Jedes getippte Zeichen schränkt die Liste ein, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eintippt.

Es gibt zwei Ebenen der Inhaltsvalidierung für email-Eingaben. Erstens gibt es die Standardebene der Validierung, die alle <input>s erhalten, die automatisch sicherstellt, dass die Inhalte die Anforderungen für eine gültige E-Mail-Adresse erfüllen. Aber es besteht auch die Möglichkeit, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Bedürfnisse erfüllt werden, falls Sie welche haben.

Browser bieten automatisch Validierung, um sicherzustellen, dass nur Text eingegeben wird, der dem Standardformat für Internet-E-Mail-Adressen entspricht. Browser verwenden einen Algorithmus, der einem regulären Ausdruck wie dem folgenden entspricht:

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

Um mehr darüber zu erfahren, wie die Formularvalidierung funktioniert und wie Sie die :valid und :invalid CSS-Eigenschaften nutzen können, um die Eingabe basierend darauf zu stylen, ob der aktuelle Wert gültig ist, siehe Formulardatenvalidierung.

Wenn Sie möchten, dass die eingegebene E-Mail-Adresse weiter eingeschränkt wird als nur „jede Zeichenkette, die wie eine E-Mail-Adresse aussieht“, können Sie das Attribut pattern verwenden, um einen regulären Ausdruck anzugeben, den der Wert erfüllen muss, um gültig zu sein. Wenn das Attribut multiple angegeben ist, muss jedes einzelne Element in der durch Kommas getrennten Liste der Werte dem regulären Ausdruck entsprechen.

Angenommen, Sie erstellen eine Seite für Mitarbeiter von Best Startup Ever, Inc., die es ihnen ermöglicht, sich an ihre IT-Abteilung zu wenden, um Hilfe zu erhalten. In unserem vereinfachten Formular muss der Benutzer seine E-Mail-Adresse und eine Nachricht eingeben, die das Problem beschreibt, bei dem er Hilfe benötigt. Wir möchten sicherstellen, dass der Benutzer nicht nur eine gültige E-Mail-Adresse angibt, sondern auch aus Sicherheitsgründen, dass die Adresse eine interne Unternehmens-E-Mail-Adresse ist.

Da Eingaben vom Typ email sowohl gegen den Standard-E-Mail-Adressfilter als auch gegen das angegebene pattern validiert werden, können Sie dies leicht umsetzen. Schauen wir uns an, wie:

body {
  font: 16px sans-serif;
}

.emailBox {
  padding-bottom: 20px;
}

.messageBox {
  padding-bottom: 20px;
}

label {
  line-height: 22px;
}

label::after {
  content: ":";
}

<form>
  <div class="emailBox">
    <label for="emailAddress">Your email address</label><br />
    <input
      id="emailAddress"
      type="email"
      size="64"
      maxlength="64"
      required
      placeholder="[email protected]"
      pattern=".+@beststartupever\.com"
      title="Please provide only a Best Startup Ever corporate email address" />
  </div>

  <div class="messageBox">
    <label for="message">Request</label><br />
    <textarea
      id="message"
      cols="80"
      rows="8"
      required
      placeholder="My shoes are too tight, and I have forgotten how to dance."></textarea>
  </div>
  <input type="submit" value="Send Request" />
</form>

Unser <form> enthält ein <input> vom Typ email für die E-Mail-Adresse des Benutzers, ein <textarea>, um ihre Nachricht an die IT-Abteilung einzugeben, und ein <input> vom Typ "submit", das eine Schaltfläche zum Senden des Formulars erstellt. Jedes Texteingabefeld hat ein zugeordnetes <label>, um dem Benutzer mitzuteilen, was von ihm erwartet wird.

Schauen wir uns das E-Mail-Adresseingabefeld genauer an. Sowohl seine size- als auch maxlength-Attribute sind auf 64 gesetzt, um Raum für 64 Zeichen der E-Mail-Adresse zu zeigen und die Anzahl der tatsächlich eingegebenen Zeichen auf maximal 64 zu begrenzen. Das Attribut required ist spezifiziert, was es erforderlich macht, dass eine gültige E-Mail-Adresse angegeben wird.

Ein geeigneter placeholder wird zur Verfügung gestellt—[email protected]—um zu demonstrieren, was einen gültigen Eintrag darstellt. Diese Zeichenkette zeigt sowohl, dass eine E-Mail-Adresse eingegeben werden sollte, als auch, dass es sich um ein Unternehmens-BeststartupEver.com-Konto handeln sollte. Dies ist zusätzlich zu der Tatsache, dass die Verwendung des Typs email den Text validiert, um sicherzustellen, dass er wie eine E-Mail-Adresse formatiert ist. Wenn der Text im Eingabefeld keine E-Mail-Adresse ist, erhalten Sie eine Fehlermeldung, die ungefähr so aussieht:

Wenn wir es dabei belassen würden, würden wir zumindest auf legitime E-Mail-Adressen validieren. Aber wir wollen einen Schritt weiter gehen: wir wollen sicherstellen, dass die E-Mail-Adresse tatsächlich in der Form [username]@beststartupever.com ist. Hier verwenden wir pattern. Wir setzen pattern auf [email protected]. Dieser reguläre Ausdruck fordert eine Zeichenkette an, die aus mindestens einem Zeichen jeder Art besteht, dann ein „@“ gefolgt von der Domain „beststartupever.com“.

Beachten Sie, dass dies keineswegs ein hinreichender Filter für gültige E-Mail-Adressen ist; es würde Dinge wie " @beststartupever.com" (beachten Sie das führende Leerzeichen) oder "@@beststartupever.com" zulassen, von denen keines gültig ist. Der Browser führt jedoch sowohl den Standard-E-Mail-Adressfilter als auch unser benutzerdefiniertes Muster gegen den angegebenen Text aus. Infolgedessen erhalten wir eine Validierung, die sagt "Stellen Sie sicher, dass dies wie eine gültige E-Mail-Adresse aussieht, und wenn ja, stellen Sie sicher, dass es sich auch um eine BeststartupEver.com-Adresse handelt."

Es ist ratsam, das title-Attribut zusammen mit pattern zu verwenden. Wenn Sie dies tun, muss das title das Muster beschreiben. Das bedeutet, dass es erläutern sollte, welches Format die Daten annehmen sollten, anstelle anderer Informationen. Der Grund dafür ist, dass das title möglicherweise als Teil einer Validierungsfehlermeldung angezeigt oder gesprochen wird. Zum Beispiel könnte der Browser die Meldung "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein." gefolgt von Ihrem angegebenen title anzeigen. Wenn Ihr title so etwas wie "E-Mail-Adresse" ist, wäre das Ergebnis die Meldung "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein. E-Mail-Adresse", was nicht sehr aussagekräftig wäre.

Deshalb geben wir stattdessen die Zeichenfolge "Bitte geben Sie nur eine Unternehmense-Mail-Adresse von Best Startup Ever an". Mit dieser Angabe könnte die vollständige Fehlermeldung etwa so aussehen: "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein. Bitte geben Sie nur eine Unternehmense-Mail-Adresse von Best Startup Ever an."

Hier haben wir eine E-Mail-Eingabe mit der ID emailAddress, die bis zu maximal 256 Zeichen lang sein darf. Das Eingabefeld selbst ist physisch 64 Zeichen breit und zeigt den Text [email protected] als Platzhalter an, solange das Feld leer ist. Außerdem ist das Feld durch die Verwendung des multiple-Attributs so konfiguriert, dass der Benutzer null oder mehr E-Mail-Adressen eingeben kann, die durch Kommas getrennt sind, wie in Mehrere E-Mail-Adressen erlauben beschrieben. Als zusätzlicher Aspekt enthält das list-Attribut die ID einer <datalist>, deren <option>s einen Satz von vorgeschlagenen Werten spezifizieren, aus denen der Benutzer wählen kann.

Als zusätzliche Funktion wird das <label>-Element verwendet, um eine Bezeichnung für das E-Mail-Eingabefeld zu erstellen, wobei sein for-Attribut auf die ID emailAddress des <input>-Elements verweist. Durch das Verbinden der beiden Elemente auf diese Weise wird das Eingabeelement fokussiert, wenn auf das Label geklickt wird.

<label for="emailAddress">Email</label><br />
<input
  id="emailAddress"
  type="email"
  placeholder="[email protected]"
  list="defaultEmails"
  size="64"
  maxlength="256"
  multiple />

<datalist id="defaultEmails">
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
</datalist>

• HTML-Formularleitfaden
• <input>
• <input type="tel">
• <input type="url">
• Attribute:
  • list
  • minlength
  • maxlength
  • multiple
  • pattern
  • placeholder
  • readonly
  • size
• Kompatibilität von CSS-Eigenschaften