<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 ordnungsgemäß 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 visuell zu kennzeichnen, 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 als konform 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 geformte E-Mail-Adresse. Dies bedeutet nicht unbedingt, dass die E-Mail-Adresse existiert, aber zumindest ist sie korrekt formatiert. Dies bedeutet username@domain oder username@domain.tld. Natürlich gibt es noch mehr dazu; siehe Validierung für ein reguläres Ausdruck, das mit dem E-Mail-Adressvalidierungsalgorithmus übereinstimmt.
3. Nur wenn das multiple-Attribut angegeben ist, kann der Wert eine Liste von korrekt geformten, durch Kommas getrennten E-Mail-Adressen sein. Jegliche führenden und nachfolgenden Leerzeichen werden von jeder Adresse in der Liste entfernt.

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

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

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Das <datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in den vorgeschlagenen Optionen berücksichtigt. 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 das email-Eingabefeld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert angegeben ist, hat das email-Eingabefeld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird Einschränkungsvalidierung nicht bestehen, wenn die Länge des Textwerts des Feldes länger 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 das email-Eingabefeld eingeben kann. Dies muss ein nicht-negativer Ganzzahlwert sein, der kleiner oder gleich dem Wert ist, der durch maxlength angegeben wird. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben ist, hat das email-Eingabefeld keine Mindestlänge.

Die Eingabe wird Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16-Codeeinheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Ein boolesches Attribut, das, falls vorhanden, anzeigt, dass der Benutzer eine Liste von mehreren E-Mail-Adressen eingeben kann, getrennt durch Kommas und, optional, Leerzeichen. Siehe Zulassung mehrerer E-Mail-Adressen für ein Beispiel oder HTML-Attribut: multiple für mehr Details.

Das pattern-Attribut, falls angegeben, 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 vom 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 behandelt wird, anstatt als ASCII. Keine Schrägstriche sollten um den Mustertext herum 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-Validierung für Details und ein Beispiel.

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

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in entgegengesetzter Richtung angezeigt werden muss, können Sie die Unicode-Bidi-Algorithmusformatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerzeichen für Bidi-Text für weitere Informationen.

Ein boolesches Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch durch direktes Setzen der HTMLInputElement value-Eigenschaft durch JavaScript-Code geändert werden.

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein sollte. Der Wert muss eine Zahl größer als null sein und der Standardwert ist 20. Da sich Zeichenbreiten unterscheiden, kann dies möglicherweise nicht genau sein und sollte nicht darauf vertraut werden; das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und der (font) Einstellung.

Dies legt kein Limit für die Anzahl der Zeichen fest, die der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele gleichzeitig sichtbar sein können. Um das obere Limit der Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

E-Mail-Adressen gehören zu den am häufigsten eingegebenen Textformulardaten im Web; sie werden bei der Anmeldung auf Websites, bei Informationsanfragen, zur Bestellbestätigung, für Webmail und so weiter verwendet. Daher kann der email-Eingabetyp Ihre Arbeit als Webentwickler erheblich erleichtern, da er Ihnen helfen kann, Ihre Arbeit beim Aufbau der Benutzeroberfläche und der 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 korrekten 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 Site entspricht oder auf andere Weise akzeptabel ist. Es stellt sicher, dass der Wert des Feldes ordnungsgemäß formatiert ist, um eine E-Mail-Adresse zu sein.

Derzeit implementieren alle Browser, die dieses Element implementieren, es als Standard-Text-Eingabefeld mit grundlegenden Validierungsfunktionen. Die Spezifikation erlaubt den Browsern jedoch Spielraum dafür. Zum Beispiel könnte das Element mit dem integrierten Adressbuch des Benutzergeräts integriert werden, um E-Mail-Adressen aus dieser Liste auszuwählen. In seiner einfachsten Form kann ein email-Eingabefeld wie folgt implementiert werden:

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

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

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

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

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

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

• ""
• "me@example"
• "me@example.org"
• "me@example.org,Sie@example.org"
• "me@example.org, Sie@example.org"
• "me@example.org,Sie@example.org, wir@example.org"

Einige Beispiele für ungültige Strings:

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

Manchmal ist es hilfreich, einen kontextuellen Hinweis darauf zu geben, welche Form die Eingabedaten haben sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form des value demonstriert, indem ein Beispiel für einen gültigen Wert präsentiert wird, der innerhalb des Bearbeitungsfelds angezeigt wird, wenn der Wert des Elements "" ist. Sobald Daten in das Feld eingegeben wurden, verschwindet der Platzhalter; wenn das Feld geleert wird, erscheint der Platzhalter erneut.

Hier haben wir ein email-Eingabefeld mit dem Platzhalter sophie@example.com. Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, während Sie den Inhalt des Bearbeitungsfelds manipulieren.

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

Sie können nicht nur die physische Länge des Eingabefeldes 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 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-Feld 15 Zeichen breit:

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

Wertelänge des Elements

Die size ist getrennt von der Längsbeschränkung für die eingegebene E-Mail-Adresse selbst, sodass Sie Felder in einen kleinen Raum passen lassen können, während Sie dennoch längere E-Mail-Adressstrings eingeben dürfen. Sie können eine Mindestlänge in Zeichen für die eingegebene E-Mail-Adresse mit dem minlength-Attribut angeben; ebenso verwenden Sie maxlength, um die maximale Länge der eingegebenen E-Mail-Adresse festzulegen.

Das folgende Beispiel erstellt ein 32 Zeichen breites E-Mail-Adress-Eingabefeld, das verlangt, 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" />

Bereitstellung eines einzelnen Standardwerts mithilfe des Wertattributs

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

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

Vorschlagen von Werten

Einen Schritt weiter können Sie eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das list-Attribut angeben. Dies schränkt den Benutzer nicht auf diese Optionen ein, ermöglicht ihm jedoch, gängige E-Mail-Adressen schneller auszuwählen. Dies bietet auch Hinweise zu autocomplete. Das list-Attribut gibt die ID eines <datalist> an, das wiederum ein <option>-Element für jeden vorgeschlagenen Wert enthält; jedes option-value ist der entsprechende Vorschlagswert 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 wird der Browser die angegebenen Werte als mögliche Werte für die E-Mail-Adresse vorschlagen; dies wird typischerweise als Popup oder Dropdown-Menü mit den Vorschlägen präsentiert. Während die spezifische Benutzererfahrung von Browser zu Browser variieren kann, wird typischerweise ein Klick in das Bearbeitungsfeld ein Dropdown mit den vorgeschlagenen E-Mail-Adressen präsentieren. Dann wird, während der Benutzer tippt, die Liste gefiltert, um nur passende Werte anzuzeigen. Jedes getippte Zeichen verengt die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Es gibt zwei Ebenen der Inhaltsvalidierung für email-Eingaben. Erstens gibt es die standardmäßige Validierungsstufe, die allen <input>s angeboten wird und die automatisch sicherstellt, dass der Inhalt den Anforderungen entspricht, um eine gültige E-Mail-Adresse zu sein. Es gibt jedoch auch die Möglichkeit, zusätzliche Filterung hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Anforderungen 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:

/^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?(?:\.[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?)*$/i;

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

Wenn Sie die eingegebene E-Mail-Adresse weiter einschränken müssen als nur "irgendein String, der 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 jeder einzelne Eintrag in der kommaseparierten Liste von Werten dem regulären Ausdruck entsprechen.

Angenommen, Sie entwickeln eine Seite für Mitarbeiter der "Best Startup Ever, Inc."-Firma, mit der sie ihre IT-Abteilung um Hilfe bitten können. In unserem vereinfachten Formular muss der Benutzer seine E-Mail-Adresse und eine Nachricht eingeben, in der das Problem beschrieben wird, 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 auch die Adresse eine interne Firmenadresse ist.

Da Eingaben vom Typ email sowohl gegen die Standard-E-Mail-Validierung als auch gegen das angegebene pattern validieren, können Sie dies einfach implementieren. Sehen 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 ein <input> vom Typ email für die E-Mail-Adresse des Benutzers, ein <textarea> zum Eingeben ihrer Nachricht an die IT und ein <input> vom Typ "submit", das einen Button erstellt, um das Formular abzusenden. Jedes Texteingabefeld hat ein zugeordnetes <label>, um dem Benutzer mitzuteilen, 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 E-Mail-Adresse zu bieten und die Anzahl der tatsächlich eingegebenen Zeichen auf maximal 64 zu begrenzen. Das required-Attribut ist angegeben, was bedeutet, dass eine gültige E-Mail-Adresse obligatorisch angegeben werden muss.

Ein passender placeholder wird bereitgestellt—username@beststartupever.com—um zu demonstrieren, was einen gültigen Eintrag ausmacht. Dieser String demonstriert sowohl, dass eine E-Mail-Adresse eingegeben werden sollte, als auch, dass es sich um einen Firmenaccount von beststartupever.com handeln sollte. Dies zusätzlich zum Fakt, dass bei Verwendung des Typs email der Text validiert wird, um sicherzustellen, dass er im E-Mail-Format vorliegt. Ist der Text im Eingabefeld keine E-Mail-Adresse, wird Ihnen eine Fehlermeldung angezeigt, die etwa so aussieht:

Wenn wir es dabei belassen würden, würden wir zumindest auf legitime E-Mail-Adressen validieren. Aber wir möchten einen Schritt weiter gehen: Wir möchten sicherstellen, dass die E-Mail-Adresse tatsächlich die Form [username]@beststartupever.com hat. Hier verwenden wir pattern. Wir setzen pattern auf .+@beststartupever.com. Dieser reguläre Ausdruck fordert einen String, der aus mindestens einem Zeichen irgendeiner Art besteht, dann einem "@" gefolgt vom Domainnamen "beststartupever.com".

Beachten Sie, dass dies bei weitem kein adäquater 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" erlauben, von denen keines gültig ist. Der Browser führt jedoch sowohl den Standard-E-Mail-Filter als auch unser benutzerdefiniertes Muster gegen den angegebenen Text aus. Daher erhalten wir am Ende eine Validierung, die sagt: "Stellen Sie sicher, dass dies einer gültigen E-Mail-Adresse ähnelt, und wenn das der Fall ist, vergewissern Sie sich auch, dass es eine beststartupever.com-Adresse ist."

Es wird empfohlen, das title-Attribut zusammen mit pattern zu verwenden. Wenn Sie das tun, muss der title das Muster beschreiben. Das heißt, es sollte das Format der Daten erklären, anstatt andere Informationen. Das liegt daran, dass title möglicherweise als Teil einer Validierungsfehlermeldung angezeigt oder gesprochen werden kann. Zum Beispiel könnte der Browser die Meldung "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein." zusammen mit Ihrem angegebenen title anzeigen. Wenn Ihr title so etwas wie "E-Mail-Adresse" ist, würde die resultierende Meldung "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein. E-Mail-Adresse" lauten, was nicht sehr hilfreich ist.

Stattdessen geben wir daher den String "Bitte geben Sie nur eine Firmen-E-Mail-Adresse von Best Startup Ever an" an. Dadurch könnte die vollständige Fehlermeldung etwa wie folgt lauten: "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein. Bitte geben Sie nur eine Firmen-E-Mail-Adresse von Best Startup Ever an."

Hier haben wir ein E-Mail-Eingabefeld mit der ID emailAddress, das bis zu eine maximale Länge von 256 Zeichen erlaubt ist. Das Eingabefeld selbst ist physisch 64 Zeichen breit und zeigt den Text user@example.gov als Platzhalter an, wenn das Feld leer ist. Darüber hinaus kann durch Verwendung des multiple-Attributs der Benutzer null oder mehr E-Mail-Adressen eingeben, die durch Kommas getrennt sind, wie im Abschnitt Zulassung mehrerer E-Mail-Adressen beschrieben. Als letzten Schliff enthält das list-Attribut die ID einer <datalist>, deren <option>s eine Reihe von vorgeschlagenen Werten spezifizieren, aus denen der Benutzer wählen kann.

Als zusätzliche Note wird das <label>-Element verwendet, um eine Bezeichnung für die E-Mail-Eingabebox zu erstellen, wobei sein for-Attribut auf die emailAddress-ID des <input>-Elements verweist. Durch eine solche Assoziation der beiden Elemente wird durch Klicken auf das Label das Fokussieren des Eingabeelements initiiert.

<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