<input type="email">

<label for="email">Enter your example.com email:</label>

<input type="email" id="email" pattern=".+@example\.com" size="30" required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

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

Das value-Attribut des <input> Elements enthält eine Zeichenkette, die automatisch zum Anpassen an die E-Mail-Syntax validiert wird. Genauer gesagt gibt es drei mögliche Wertformate, die die Validierung bestehen:

1. Eine leere Zeichenkette ("") die 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. Dies bedeutet username@domain oder username@domain.tld. Natürlich gibt es mehr Details; siehe Validierung für einen regulären Ausdruck, der mit dem E-Mail-Adressen-Validierungsalgorithmus übereinstimmt.
3. Und nur unter der Voraussetzung, dass das Attribut multiple angegeben ist, kann der Wert eine Liste von korrekt geformten, kommagetrennten E-Mail-Adressen sein. Eventuelle führende und nachfolgende Leerzeichen werden aus jeder Adresse in der Liste entfernt.

Details zur E-Mail-Adressvalidierung, um sicherzustellen, dass sie korrekt formatiert ist, finden Sie unter Validierung.

Neben den globalen Attributen und den Attributen, die auf alle <input> Elemente unabhängig von ihrem Typ zutreffen, unterstützen email Eingaben die folgenden Attribute.

Der Wert des list-Attributs ist die id eines im selben Dokument befindlichen <datalist> Elements. Der <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer als Vorschläge für diese Eingabe angezeigt werden. Werte, die in der Liste vorhanden sind und nicht mit dem type kompatibel sind, werden nicht in den 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 Zeichenkettenlä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 oder ein ungültiger Wert angegeben ist, hat die email Eingabe keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe schlägt bei der Einschränkungsvalidierung fehl, wenn die Länge des Textwertes 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 Zeichenkettenlänge (gemessen in UTF-16 Codeeinheiten), die der Benutzer in die email Eingabe eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben oder ein ungültiger Wert angegeben ist, hat die email Eingabe keine Mindestlänge.

Die Eingabe schlägt bei der Einschränkungsvalidierung fehl, 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 Boolean-Attribut, das, wenn es vorhanden ist, anzeigt, dass der Benutzer eine Liste mehrerer E-Mail-Adressen eingeben kann, getrennt durch Kommas und optional Leerzeichen. Sehen Sie sich das Beispiel unter Erlauben mehrerer E-Mail-Adressen oder HTML-Attribut: multiple für weitere Details an.

Das pattern Attribut, wenn es angegeben ist, ist ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-reger Ausdruck sein, wie er vom RegExp Typ verwendet wird und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist; das 'u' Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als eine Sequenz von Unicode-Codepunkten anstelle von ASCII behandelt wird. Es sollten keine Schrägstriche um den Text des Musters angegeben werden.

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

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

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

Wenn der Inhalt des Steuerelements eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung präsentiert werden muss, können Sie Unicode-Bidi-Steuerzeichen verwenden, um die Ausrichtung innerhalb des Platzhalters zu überschreiben; siehe So verwenden Sie Unicode-Steuerelemente für bidirektionalen Text für weitere Informationen.

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

Das size Attribut ist ein numerischer Wert, 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 sich Zeichenbreiten unterscheiden, kann dies genauer oder weniger genau sein und sollte nicht als solches angesehen werden; das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und der Schriftart (font Einstellungen in Verwendung).

Dies setzt keine Obergrenze für die Anzahl der Zeichen, die der Benutzer in das Feld eingeben kann. Es bestimmt nur ungefähr, wie viele auf einmal angezeigt werden 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 häufigsten Texteingabe-Daten in Formularen im Web; sie werden verwendet beim Einloggen auf Websites, beim Anfordern von Informationen, zur Auftragsbestätigung, für Webmail und so weiter. Als solches kann der Eingabetyp email Ihre Arbeit als Webentwickler erheblich erleichtern, da er helfen kann, Ihre Arbeit bei der Erstellung der Benutzeroberfläche und Logik für E-Mail-Adressen zu vereinfachen. Wenn Sie eine E-Mail-Eingabe mit dem richtigen type Wert, email, erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text zumindest in der richtigen Form vorliegt, um potenziell 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 angegebene Text eine E-Mail-Adresse ist, die tatsächlich existiert, dem Benutzer der Seite gehört oder auf irgendeine andere Weise akzeptabel ist. Es stellt 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 standardmäßigen Texteingabefeld mit grundlegenden Validierungsfunktionen. Die Spezifikation erlaubt den Browsern jedoch gewisse Freiheit in dieser Hinsicht. Zum Beispiel könnte das Element in das integrierte Adressbuch des Geräts des Benutzers integriert werden, um das Auswählen von E-Mail-Adressen aus dieser Liste zu ermöglichen. In seiner einfachsten Form kann eine email Eingabe folgendermaßen implementiert werden:

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

Beachten Sie, dass es als gültig betrachtet wird, wenn es leer ist und wenn eine einzelne korrekt formatierte E-Mail-Adresse eingegeben wurde, aber ansonsten nicht als gültig betrachtet wird. Indem man das Attribut required hinzufügt, werden nur korrekt geformte E-Mail-Adressen zugelassen; die Eingabe wird nicht mehr als gültig betrachtet, wenn sie leer ist.

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

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

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

Einige Beispiele für gültige Zeichenfolgen, wenn multiple angegeben ist:

• ""
• "me@example"
• "me@example.org"
• "me@example.org,you@example.org"
• "me@example.org, you@example.org"
• "me@example.org,you@example.org, us@example.org"

Einige Beispiele für ungültige Zeichenfolgen:

• ","
• "me"
• "me@example.org you@example.org"

Manchmal ist es hilfreich, einen kontextuell passenden Hinweis darauf zu geben, in welcher Form die Eingabedaten vorliegen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes <input> bietet. Hier kommen Platzhalter zum Einsatz. Ein Platzhalter ist ein Wert, der die Form zeigt, die der value annehmen sollte, indem er ein Beispiel für einen gültigen Wert präsentiert, das innerhalb des Bearbeitungsfelds angezeigt wird, wenn der value des Elements "" ist. Sobald Daten im Feld eingegeben werden, verschwindet der Platzhalter; wenn das Feld geleert wird, erscheint der Platzhalter wieder.

Hier haben wir eine email Eingabe mit dem Platzhalter sophie@example.com. Beachten Sie, wie der Platzhalter verschwindet und erneut erscheint, wenn Sie den Inhalt des Bearbeitungsfelds verändern.

<input type="email" placeholder="sophie@example.com" />

Sie können nicht nur die physische Länge der Eingabebox steuern, sondern auch die minimalen und maximalen Längen, die für den Eingabetext selbst erlaubt sind.

Physische Größe des Eingabeelements

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

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

Länge des Elementwerts

Die size ist separat von der Längenbegrenzung für die tatsächlich eingegebene E-Mail-Adresse, sodass Sie Felder in einen kleinen Raum passen können, während Sie dennoch längere E-Mail-Adresseingaben zulassen können. Sie können eine Mindestlänge in Zeichen für die eingegebene E-Mail-Adresse mithilfe des minlength Attributs festlegen; verwenden Sie ähnlich maxlength, um die maximale Länge der eingegebenen E-Mail-Adresse festzulegen.

Das folgende Beispiel erstellt ein 32 Zeichen breites Eingabefeld für E-Mail-Adressen, das erfordert, dass der Inhalt nicht kürzer als 3 Zeichen und nicht länger als 64 Zeichen ist.

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

Ein einzelner Standardwert mit dem Wertattribut bereitstellen

Wie immer können Sie einen Standardwert für eine email Eingabebox bereitstellen, indem Sie ihr value Attribut festlegen:

<input type="email" value="default@example.com" />

Vorschlagswerte anbieten

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

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

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk"></option>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>

Mit dem <datalist> Element und seinen <option>s an seinem Platz bietet der Browser die angegebenen Werte als potenzielle Werte für die E-Mail-Adresse an; dies wird normalerweise als Popup oder Dropdown-Menü mit den Vorschlägen präsentiert. Obwohl das spezifische Benutzererlebnis von einem Browser zum anderen variieren kann, zeigt das Klicken in das Bearbeitungsfeld typischerweise ein Dropdown-Menü mit den vorgeschlagenen E-Mail-Adressen an. Dann, wenn der Benutzer tippt, wird die Liste gefiltert, um nur passende Werte anzuzeigen. Jedes eingegebene Zeichen engt die Liste weiter ein, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Es stehen zwei Ebenen der Inhaltsvalidierung für email Eingaben zur Verfügung. Zunächst gibt es die standardmäßige Validierungsebene, die allen <input>s geboten wird und automatisch sicherstellt, dass die Inhalte die Anforderungen erfüllen, um eine gültige E-Mail-Adresse zu sein. Es besteht aber 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 eine Validierung, um sicherzustellen, dass nur Text, der dem Standardformat für Internet-E-Mail-Adressen entspricht, in das Eingabefeld eingegeben wird. Browser verwenden einen Algorithmus, der dem folgenden regulären Ausdruck 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])?)*$/;

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

Wenn Sie die eingegebene E-Mail-Adresse weiter einschränken müssen als nur "jede Zeichenfolge, die wie eine E-Mail-Adresse aussieht", können Sie das pattern Attribut verwenden, um einen Regulären Ausdruck anzugeben, dem der Wert entsprechen muss, damit er gültig ist. Wenn das multiple Attribut angegeben ist, muss jedes einzelne Element in der kommagetrennten Liste von Werten dem Regulären Ausdruck entsprechen.

Zum Beispiel, sagen wir, Sie erstellen eine Seite für Mitarbeiter von Best Startup Ever, Inc., die es ihnen ermöglicht, sich mit ihrer IT-Abteilung in Verbindung zu setzen, um Hilfe zu erhalten. In unserem vereinfachten Formular muss der Benutzer seine E-Mail-Adresse eingeben 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 aus Sicherheitsgründen erfordern wir, dass die Adresse eine interne Unternehmens-E-Mail-Adresse ist.

Da Eingaben vom Typ email sowohl gegen die Standard-E-Mail-Adressvalidierung als auch gegen das angegebene pattern validieren, können Sie dies einfach implementieren. 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="username@beststartupever.com"
      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 eine <input> vom Typ email für die E-Mail-Adresse des Benutzers, ein <textarea> zur Eingabe ihrer Nachricht für die IT und ein <input> vom Typ "submit", das einen Button zum Senden des Formulars erstellt. Jede Texteingabebox hat ein zugeordnetes <label>, das dem Benutzer mitteilt, was von ihm erwartet wird.

Werfen wir einen genaueren Blick auf die Eingabebox für die E-Mail-Adresse. Ihre size und maxlength Attribute sind beide auf 64 gesetzt, um Platz für 64 Zeichen der E-Mail-Adresse anzuzeigen und die Anzahl der tatsächlich eingegebenen Zeichen auf maximal 64 zu begrenzen. Das required Attribut ist angegeben, was es erforderlich macht, eine gültige E-Mail-Adresse anzugeben.

Ein geeigneter placeholder wird bereitgestellt — username@beststartupever.com — um zu zeigen, was als gültige Eingabe betrachtet wird. Diese Zeichenfolge zeigt sowohl, dass eine E-Mail-Adresse eingegeben werden sollte, als auch, dass es sich um einen Unternehmens-Account von beststartupever.com handelt. Zusätzlich dazu, dass die Verwendung des Typs email den Text validieren wird, 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 in etwa so aussieht:

Wenn wir es dabei beließen, würden wir zumindest legitime E-Mail-Adressen validieren. Aber wir möchten einen Schritt weiter gehen: Wir möchten sicherstellen, dass die E-Mail-Adresse tatsächlich im Format [username]@beststartupever.com ist. Hier verwenden wir pattern. Wir setzen pattern auf .+@beststartupever.com. Dieser reguläre Ausdruck fordert eine Zeichenfolge an, die aus mindestens einem Zeichen jeglicher Art, dann einem "@" gefolgt von dem Domainnamen "beststartupever.com" besteht.

Beachten Sie, dass dies kein ausreichender Filter für gültige E-Mail-Adressen ist; er würde Dinge wie " @beststartupever.com" (beachten Sie das führende Leerzeichen) oder "@@beststartupever.com" zulassen, von denen keiner gültig ist. Browser führen jedoch sowohl den Standard-E-Mail-Adressenfilter als auch unser benutzerdefiniertes Muster gegen den angegebenen Text aus. Dadurch erhalten wir eine Validierung, die besagt: "Stellen Sie sicher, dass dies wie eine gültige E-Mail-Adresse aussieht, und wenn es so ist, 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 heißt, es sollte erklären, welches Format die Daten annehmen sollten, anstatt andere Informationen. Das liegt daran, dass das title möglicherweise als Teil einer Validierungsfehlermeldung angezeigt oder gesprochen wird. Zum Beispiel könnte der Browser die Nachricht "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein." anzeigen, gefolgt von Ihrem angegebenen title. Wenn Ihr title etwas wie "E-Mail-Adresse" ist, wäre das Ergebnis die Nachricht "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein. E-Mail-Adresse", was nicht sehr hilfreich ist.

Deshalb spezifizieren wir stattdessen den String "Bitte geben Sie nur eine Unternehmens-E-Mail-Adresse von Best Startup Ever ein." Indem wir dies tun, könnte die resultierende vollständige Fehlermeldung etwa so lauten: "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein. Bitte geben Sie nur eine Unternehmens-E-Mail-Adresse von Best Startup Ever ein."

Hier haben wir eine E-Mail-Eingabe mit der ID emailAddress, die auf maximal 256 Zeichen begrenzt ist. Die Eingabebox selbst ist physisch 64 Zeichen breit und zeigt den Text user@example.gov als Platzhalter an, wenn das Feld leer ist. Außerdem ist die Box durch Verwendung des multiple Attributs so konfiguriert, dass der Benutzer null oder mehr E-Mail-Adressen eingeben kann, die durch Kommas getrennt sind, wie unter Erlauben mehrerer E-Mail-Adressen beschrieben. Als letzten Schliff enthält das list Attribut die ID eines <datalist>, dessen <option>s einen Satz vorgeschlagener Werte angeben, aus denen der Benutzer wählen kann.

Ein zusätzlicher Raffinesse besteht darin, dass das <label> Element verwendet wird, um ein Label für die E-Mail-Eingabebox zu erstellen, wobei sein for Attribut auf die emailAddress ID des <input> Elements verweist. Durch das Assoziieren der beiden Elemente auf diese Weise wird durch Klicken auf das Label das Eingabeelement fokussiert.

<label for="emailAddress">Email</label><br />
<input
  id="emailAddress"
  type="email"
  placeholder="user@example.gov"
  list="defaultEmails"
  size="64"
  maxlength="256"
  multiple />

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk"></option>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>

• HTML-Formularleitfaden
• <input>
• <input type="tel">
• <input type="url">
• Attribute:
  • list
  • minlength
  • maxlength
  • multiple
  • pattern
  • placeholder
  • readonly
  • size