<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 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 dahingehend validiert wird, dass er der E-Mail-Syntax entspricht. Genauer gesagt gibt es drei mögliche Wertformate, die die Validierung bestehen:

1. Ein leerer String ("") zeigt an, dass der Benutzer keinen Wert eingegeben oder den Wert entfernt hat.
2. Eine einzelne korrekt geformte E-Mail-Adresse. Dies bedeutet nicht unbedingt, dass die E-Mail-Adresse existiert, aber sie ist zumindest korrekt formatiert. Das bedeutet username@domain oder username@domain.tld. Es steckt natürlich mehr dahinter; sehen Sie Validierung für einen regulären Ausdruck, der den E-Mail-Validierungsalgorithmus abbildet.
3. Nur wenn das multiple Attribut angegeben ist, kann der Wert eine Liste von korrekt geformten, durch Kommata getrennten E-Mail-Adressen sein. Jegliche vorangestellten und nachfolgenden Leerzeichen werden von jeder Adresse in der Liste entfernt.

Details zur Validierung von E-Mail-Adressen, um sicherzustellen, dass sie korrekt formatiert sind, finden Sie unter Validierung.

Neben 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 <datalist> Elements, das sich im selben Dokument befindet. Die <datalist> stellt eine Liste von vordefinierten Werten bereit, die dem Benutzer für diese Eingabe vorgeschlagen werden. Jegliche Werte in der Liste, die nicht mit dem type kompatibel sind, werden in den vorgeschlagenen Optionen nicht berücksichtigt. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

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

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

Die minimale Zeichenanzahl (gemessen in UTF-16 Codeeinheiten), die der Benutzer in das email Eingabefeld eingeben kann. Dies muss ein nichtnegativer Ganzzahlenwert sein, der kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben wird, hat das email Eingabefeld keine Mindestlänge.

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

Ein boolesches Attribut, das, wenn vorhanden, anzeigt, dass der Benutzer eine Liste mehrerer E-Mail-Adressen eingeben kann, die durch Kommata und, optional, Leerzeichen getrennt sind. Sehen Sie Mehrere E-Mail-Adressen zulassen für ein Beispiel oder HTML-Attribut: multiple für weitere Details.

Das pattern Attribut ist, wenn angegeben, 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-Regulärer Ausdruck sein, wie er von dem 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, sodass das Muster als eine Sequenz von Unicode-Codepunkten, anstatt als ASCII, behandelt wird. Keine Schrägstriche sollten um den Text des Musters 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.

Sehen Sie den Abschnitt Mustervalidierung für Details und ein Beispiel.

Das placeholder Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen in dem Feld erwartet werden. Es sollte sich um ein Wort oder eine kurze Phrase handeln, die die erwartete Art der Daten demonstriert, anstatt einer erklärenden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenwechsel enthalten.

Wenn der Inhalt der Steuerung eine Textflussrichtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Textflussrichtung präsentiert werden muss, können Sie Unicode-Bidirektionssteuerzeichen verwenden, um die Textflussrichtung innerhalb des Platzhalters zu überschreiben; sehen Sie Wie man Unicode-Steuerzeichen für bidi Text verwendet für mehr Informationen.

Ein boolesches Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch direktes Setzen der HTMLInputElement value Eigenschaft per JavaScript-Code 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 mehr oder weniger genau sein und sollte nicht darauf verlassen werden; das resultierende Eingabefeld kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und der Schriftart (font Einstellungen in Verwendung).

Dies setzt kein Limit, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr gleichzeitig gesehen werden können. Um eine Obergrenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength Attribut.

E-Mail-Adressen sind eine der häufigsten Formen von eingegebenen Textdaten im Web; sie werden beim Einloggen auf Websites verwendet, beim Anfordern von Informationen, um Bestätigungen zu erhalten, für Webmail und so weiter. Daher 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 ein E-Mail-Eingabefeld mit dem richtigen type Wert, email, erstellen, erhalten Sie automatische Validierung, dass der eingegebene Text zumindest in der korrekten Form ist, 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 angegebene Text eine E-Mail-Adresse ist, die tatsächlich existiert, dem Benutzer der Website entspricht oder in irgendeiner anderen Weise akzeptabel ist. Es wird sichergestellt, 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 standardmäßiges Texteingabefeld mit grundlegenden Validierungsfunktionen. Die Spezifikation ermöglicht es den Browsern jedoch sich diesbezüglich Freiheit zu nehmen. Zum Beispiel könnte das Element mit dem integrierten Adressbuch des Geräts des Benutzers integriert werden, um das Auswählen von E-Mail-Adressen aus dieser Liste zu ermöglichen. In seiner grundlegendsten Form kann eine email Eingabe wie folgt implementiert werden:

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

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

Durch Hinzufügen des multiple booleschen Attributs kann die Eingabe konfiguriert werden, um mehrere E-Mail-Adressen zu akzeptieren.

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

Die Eingabe wird nun als gültig angesehen, wenn eine einzelne E-Mail-Adresse eingegeben wird, oder wenn irgendeine Anzahl von E-Mail-Adressen, getrennt durch Kommata und optional durch eine Anzahl von Leerzeichen, vorhanden ist.

Einige Beispiele für gültige Strings, 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 Strings:

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

Manchmal ist es hilfreich, einen Hinweis im Kontext anzubieten, 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 ins Spiel. Ein Platzhalter ist ein Wert, der die Form der value durch das Präsentieren eines Beispiels eines gültigen Werts demonstriert, der im Bearbeitungsfeld angezeigt wird, wenn der value des Elements "". Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wird das Feld geleert, erscheint der Platzhalter wieder.

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

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

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

Physische Eingabeelementgröße

Die physische Größe des Eingabefeldes kann mit dem size Attribut gesteuert werden. Mit ihm können Sie angeben, wie viele Zeichen das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel ist das email Bearbeitungsfeld 15 Zeichen breit:

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

Elementwertlänge

Die size ist getrennt von der Längenbeschränkung der eingegebenen E-Mail-Adresse selbst, sodass Sie Felder in einem kleinen Raum unterbringen können, während Sie trotzdem längere E-Mail-Adresszeichenfolgen zulassen. Sie können eine Mindestlänge in Zeichen für die eingegebene E-Mail-Adresse mit dem minlength Attribut festlegen; verwenden Sie ebenso maxlength zur Festlegung der maximalen Länge der eingegebenen E-Mail-Adresse.

Das folgende Beispiel erstellt ein 32 Zeichen breites E-Mail-Adresseneingabefeld, welches 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" />

Bereitstellung eines einzelnen Standards durch das value Attribut

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

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

Angebot von vorgeschlagenen Werten

Einen Schritt weitergehend können Sie eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das list Attribut verwenden. Dies beschränkt den Benutzer nicht auf diese Optionen, bietet jedoch die Möglichkeit, gebräuchlichere E-Mail-Adressen schneller auszuwählen. Dies bietet auch Hinweise für autocomplete. Das list Attribut spezifiziert die ID eines <datalist>, das wiederum ein <option> Element pro vorgeschlagenem Wert enthält; der value jedes option ist der entsprechende vorgeschlagene Wert für das E-Mail-Eingabefeld.

<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 Ort und Stelle 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, präsentiert das Klicken in das Bearbeitungsfeld normalerweise ein Dropdown mit den vorgeschlagenen E-Mail-Adressen. Während der Benutzer tippt, wird die Liste gefiltert, um nur übereinstimmende 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 Standardvalidierungsebene, die allen <input>s zur Verfügung steht und automatisch sicherstellt, dass der Inhalt den Anforderungen entspricht, um eine gültige E-Mail-Adresse zu sein. Aber es gibt auch die Option, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Bedürfnisse erfüllt werden, falls Sie welche haben.

Browser stellen automatisch sicher, dass nur Text, der dem Standardformat für Internet-E-Mail-Adressen entspricht, in das Eingabefeld eingetragen wird. Browser verwenden einen Algorithmus, der einem 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])?)*$/;

Um mehr darüber zu erfahren, wie die Formularvalidierung funktioniert und wie Sie die Eigenschaften :valid und :invalid nutzen können, um die Eingabe abhängig davon zu stylen, ob der aktuelle Wert gültig ist, sehen Sie Formulardatenvalidierung.

Falls Sie die eingegebene E-Mail-Adresse weiter beschrä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, den der Wert erfüllen muss, damit er gültig ist. Wenn das multiple Attribut angegeben ist, muss jedes einzelne Element in der kommaseparierten Liste von Werten den regulären Ausdruck erfüllen.

Zum Beispiel, nehmen wir an, Sie erstellen eine Seite für Mitarbeiter von Best Startup Ever, Inc., die es ihnen ermöglicht, ihre IT-Abteilung um Hilfe zu kontaktieren. In unserem vereinfachten Formular muss der Benutzer seine E-Mail-Adresse eingeben und eine Nachricht mit der Beschreibung des Problems, 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 muss es eine interne Unternehmens-E-Mail-Adresse sein.

Da Eingaben vom Typ email sowohl gegen die Standard-E-Mail-Adressvalidierung als auch das angegebene pattern validiert werden, können Sie dies einfach implementieren. Lassen Sie uns sehen, 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>, um ihre Nachricht an die IT einzugeben und ein <input> vom Typ "submit", welches einen Button zum Absenden des Formulars erstellt. Jede Texteingabe hat ein <label>, das mit ihr verbunden ist, um dem Benutzer mitzuteilen, was von ihm erwartet wird.

Schauen wir genauer auf die E-Mail-Adresseneingabe. Ihre size und maxlength Attribute sind beide auf 64 gesetzt, um Platz für 64 Zeichen der E-Mail-Adresse zu zeigen und die Anzahl der tatsächlich eingegebenen Zeichen auf maximal 64 zu begrenzen. Das required Attribut ist angegeben und macht es obligatorisch, dass eine gültige E-Mail-Adresse bereitgestellt wird.

Ein entsprechender placeholder ist vorhanden — username@beststartupever.com — um zu demonstrieren, was eine gültige Eingabe ausmacht. Dieser String demonstriert sowohl, dass eine E-Mail-Adresse eingegeben werden sollte, als auch wird angedeutet, dass es sich um ein Unternehmens-Beststartupever.com-Konto handeln sollte. Dies ist zusätzlich zu der Tatsache, dass die Verwendung von Typ email den Text so validiert, dass er sicherstellt, dass er im E-Mail-Adressformat vorliegt. Wenn der Text im Eingabefeld keine E-Mail-Adresse ist, erhalten Sie eine Fehlermeldung, die etwa wie folgt aussieht:

Wenn wir die Dinge dabei belassen, würden wir zumindest auf legitime E-Mail-Adressen validieren. Aber wir möchten noch einen Schritt weiter gehen: Wir möchten sicherstellen, dass die E-Mail-Adresse tatsächlich in der Form [username]@beststartupever.com vorliegt. Hier verwenden wir pattern. Wir setzen pattern auf .+@beststartupever.com. Dieser reguläre Ausdruck verlangt eine Zeichenfolge, die aus mindestens einem beliebigen Zeichen, dann einem "@" gefolgt von dem Domänennamen "beststartupever.com" besteht.

Beachten Sie, dass dies nicht einmal ansatzweise ein 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", die beide ungültig sind, zulassen. Der Browser führt jedoch sowohl den Standard-E-Mail-Adressfilter als auch unser benutzerdefiniertes Muster an dem angegebenen Text aus. Dadurch erhalten wir eine Validierung, die besagt: "Stellen Sie sicher, dass dies einer gültigen E-Mail-Adresse ähnelt und wenn ja, stellen Sie sicher, dass es sich um eine beststartupever.com Adresse handelt."

Es wird empfohlen, das title Attribut zusammen mit pattern zu verwenden. Sollte dies der Fall sein, muss title das Muster beschreiben. Das heißt, es sollte erklären, welches Format die Daten annehmen sollten, anstatt irgendwelche anderen Informationen. Denn title könnte als Teil einer Validierungsfehlermeldung angezeigt oder gesprochen werden. Zum Beispiel könnte der Browser die Meldung "Der eingegebene Text entspricht nicht dem erforderlichen Muster." gefolgt von Ihrem angegebenen title präsentieren. Wenn Ihr title etwas wie "E-Mail-Adresse" ist, wäre das Ergebnis die Nachricht "Der eingegebene Text entspricht nicht dem erforderlichen Muster. E-Mail-Adresse", was nicht sehr gut ist.

Aus diesem Grund geben wir stattdessen den String "Bitte nur eine Best Startup Ever Firmen-E-Mail-Adresse angeben" an. Dadurch könnte die resultierende vollständige Fehlermeldung etwa so lauten: "Der eingegebene Text entspricht nicht dem erforderlichen Muster. Bitte nur eine Best Startup Ever Firmen-E-Mail-Adresse angeben."

Hier haben wir eine E-Mail-Eingabe mit der ID emailAddress, die bis zu einer maximalen 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, wann immer das Feld leer ist. Zusätzlich ist durch die Verwendung des multiple Attributs das Feld so konfiguriert, dass es dem Benutzer erlaubt ist, null oder mehr E-Mail-Adressen einzugeben, die durch Kommata getrennt sind, wie in Mehrere E-Mail-Adressen zulassen beschrieben. Als letzte Ergänzung enthält das list Attribut die ID einer <datalist>, deren <option>s eine Reihe von vorgeschlagenen Werten angeben, aus denen der Benutzer wählen kann.

Als zusätzliche Note wird das <label> Element verwendet, um ein Label für das E-Mail-Eingabefeld zu erstellen, wobei sein for Attribut die emailAddress ID des <input> Elements referenziert. Indem die beiden Elemente auf diese Weise verbunden werden, fokussiert ein Klick auf das Label das Eingabelement.

<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-Formular Leitfaden
• <input>
• <input type="tel">
• <input type="url">
• Attribute:
  • list
  • minlength
  • maxlength
  • multiple
  • pattern
  • placeholder
  • readonly
  • size