<input type="email">

Probieren Sie es aus

<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 richtig formatierte E-Mail-Adresse (oder Liste von Adressen) ist, bevor das Formular gesendet werden kann. Die :valid und :invalid CSS-Pseudoklassen werden automatisch angewendet, um visuell anzuzeigen, ob der aktuelle Wert des Feldes eine gültige E-Mail-Adresse ist oder nicht.

Wert

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

1. Ein leerer String (""), der angibt, dass der Benutzer keinen Wert eingegeben hat oder dass der Wert entfernt wurde.
2. Eine einzelne korrekt geformte E-Mail-Adresse. Das bedeutet nicht unbedingt, dass die E-Mail-Adresse existiert, aber sie ist zumindest richtig formatiert. Dies bedeutet benutzername@domain oder benutzername@domain.tld. Natürlich gibt es noch mehr dazu; siehe Validierung für einen regulären Ausdruck, der den Algorithmus zur E-Mail-Adressen-Validierung beschreibt.
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 aus jeder Adresse in der Liste entfernt.

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

Zusätzliche Attribute

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.

list

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 als Vorschläge für diese Eingabe angezeigt werden. Jede im list enthaltene Option, die nicht mit dem type kompatibel ist, wird nicht in den vorgeschlagenen Optionen angezeigt. Die bereitgestellten Werte sind Vorschläge und keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

maxlength

Die maximale Länge des Strings (gemessen in UTF-16-Code-Einheiten), 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 festgelegt ist, hat die email-Eingabe 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-Code-Einheiten lang. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

Die minimale Länge des Strings (gemessen in UTF-16-Code-Einheiten), die der Benutzer in das email-Eingabefeld eingeben kann. Dies muss ein nicht-negativer Ganzzahlwert kleiner oder gleich dem durch maxlength angegebenen Wert sein. Wenn kein minlength angegeben ist oder ein ungültiger Wert festgelegt ist, hat die email-Eingabe keine Mindestlänge.

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

multiple

Ein boolesches Attribut, das bei Anwesenheit anzeigt, dass der Benutzer eine Liste mehrerer E-Mail-Adressen eingeben kann, die durch Kommas und optional durch Leerzeichen getrennt sind. Siehe Mehrfache E-Mail-Adressen zulassen für ein Beispiel oder HTML-Attribut: multiple für weitere Details.

pattern

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Er 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, anstelle von ASCII. 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 komplett ignoriert.

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

placeholder

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 eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstelle einer erläuternden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Kontrolle eine Richtung (LTR oder RTL) aufweist, aber der Platzhalter in der entgegengesetzten Richtung dargestellt werden muss, können Sie Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerelemente für Bidirektionalen Text verwendet für mehr Informationen.

readonly

Ein boolesches Attribut, das bei Anwesenheit bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin geändert werden, indem JavaScript direkt die HTMLInputElement-value-Eigenschaft setzt.

size

Das size-Attribut ist ein numerischer Wert, der angibt, wie breit das Eingabefeld in Zeichen sein soll. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da Zeichenbreiten variieren, kann dies genau zutreffen oder auch nicht; darauf sollte nicht gesetzt werden. Das resultierende Eingabefeld kann je nach Zeichen und Schriftart (font-Einstellungen in Verwendung) schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies setzt kein Limit für die Anzahl der Zeichen, die der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, wie viele Zeichen gleichzeitig sichtbar sein können. Um ein oberes Limit für die Länge der Eingabedaten zu setzen, verwenden Sie das maxlength-Attribut.

Verwendung von email-Eingaben

E-Mail-Adressen sind eine der am häufigsten eingegebenen Textdatenformen im Web; sie werden beim Anmelden auf Websites, bei Informationsanfragen, zur Auftragsbestätigung, für Webmail usw. verwendet. Daher kann der email-Eingabetyp Ihre Arbeit als Webentwickler erheblich erleichtern, da er helfen kann, Ihre Arbeit beim Erstellen der Benutzeroberfläche und -logik für E-Mail-Adressen zu vereinfachen. Wenn Sie eine Eingabe mit dem richtigen type-Wert email erstellen, erhalten Sie automatisch eine Validierung, dass der eingegebene Text zumindest in der richtigen 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 stellt sicher, dass der Wert des Feldes korrekt formatiert ist, um eine E-Mail-Adresse zu sein.

Eine grundlegende email-Eingabe

Derzeit implementieren alle Browser, die dieses Element unterstützen, es als ein Standardtext-Eingabefeld mit grundlegenden Validierungsmerkmalen. Die Spezifikation erlaubt den Browsern jedoch Flexibilität. Das Element könnte beispielsweise 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 grundlegendsten Form könnte eine email-Eingabe wie folgt implementiert werden:

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

Beachten Sie, dass es als gültig betrachtet wird, wenn es leer ist und wenn eine einzelne richtig formatierte E-Mail-Adresse eingegeben wird, aber ansonsten 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.

Mehrfache E-Mail-Adressen zulassen

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

<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 E-Mail-Adressen, die durch Kommas und optional durch Leerzeichen getrennt sind, 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"

Platzhalter

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis darauf anzubieten, welche Form die Eingabedaten annehmen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Beschriftungen für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form zeigt, die der value annehmen sollte, indem er ein Beispiel für einen gültigen Wert anzeigt, das in das Bearbeitungsfeld eingefügt wird, wenn der value des Elements leer ist. Sobald Daten in das 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 wieder erscheint, während Sie den Inhalt des Bearbeitungsfeldes manipulieren.

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

Steuerung der Eingabegröße

Sie können nicht nur die physische Länge des Eingabefelds steuern, sondern auch die minimal und maximal zulässigen Längen für den Eingabetext selbst.

Physische Größe des Eingabeelements

Die physische Größe des Eingabefelds 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" />

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, während Sie dennoch längere E-Mail-Adress-Strings zulassen können. Sie können eine Mindestlänge in Zeichen für die eingegebene E-Mail-Adresse mit dem minlength-Attribut angeben; verwenden Sie ähnlicherweise maxlength, um die maximale Länge der eingegebenen E-Mail-Adresse festzulegen.

Das nachfolgende Beispiel erstellt ein E-Mail-Adressen-Eingabefeld, das 32 Zeichen breit ist, wobei die Inhalte nicht kürzer als 3 Zeichen und nicht länger als 64 Zeichen sein dürfen.

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

Vorgaben bereitstellen

Eine einzelne Vorgabe mit dem value-Attribut bereitstellen

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

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

Vorgeschlagene Werte anbieten

Noch 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 beschränkt den Benutzer nicht auf diese Optionen, ermöglicht es ihm jedoch, häufig verwendete E-Mail-Adressen schneller auszuwählen. Dies bietet auch Hinweise für autocomplete. Das list-Attribut gibt die ID eines <datalist> an, das wiederum ein <option>-Element für jeden vorgeschlagenen 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 angezeigt. Während die spezifische Benutzererfahrung von einem Browser zum anderen variieren kann, werden typischerweise durch Klicken in das Bearbeitungsfeld die vorgeschlagenen E-Mail-Adressen als Dropdown angezeigt. Dann, während der Benutzer tippt, wird die Liste gefiltert, um nur übereinstimmende Werte anzuzeigen. Jedes eingegebene Zeichen verengt die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Validierung

Es gibt zwei Stufen der Inhaltsvalidierung für email-Eingaben. Zuerst gibt es die Standard-Ebene der Validierung, die für alle <input>s bereitgestellt wird, welche automatisch sicherstellt, dass die Inhalte den Anforderungen entsprechen, um eine gültige E-Mail-Adresse zu sein. Aber es gibt auch die Möglichkeit, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Anforderungen erfüllt werden, wenn Sie welche haben.

Grundlegende Validierung

Browser bieten automatisch eine 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:

/^[\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 nutzen können, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist, sehen Sie Formdatenvalidierung.

Muster-Validierung

Wenn Sie möchten, dass die eingegebene E-Mail-Adresse weiter beschränkt wird als nur "jede Zeichenkette, 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, um gültig zu sein. Wenn das multiple-Attribut angegeben ist, muss jedes einzelne Element in der durch Kommas getrennten Liste von Werten dem regulären Ausdruck entsprechen.

Zum Beispiel sagen wir, dass Sie eine Seite für Mitarbeiter von Best Startup Ever, Inc. erstellen, auf der sie ihre IT-Abteilung um Hilfe bitten können. In unserem vereinfachten Formular muss der Nutzer seine E-Mail-Adresse und eine Nachricht zu dem Problem angeben, bei dem er Hilfe benötigt. Wir wollen sicherstellen, dass der Nutzer nicht nur eine gültige E-Mail-Adresse angibt, sondern aus Sicherheitsgründen auch eine interne Unternehmens-E-Mail-Adresse.

Da Eingaben vom Typ email sowohl gegen die Standard-E-Mail-Adress-Validierung als auch gegen das angegebene pattern validieren, können Sie dies einfach umsetzen. So geht das:

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 Nutzers, ein <textarea>, um seine Nachricht an die IT einzugeben, und ein <input> vom Typ "submit", das eine Schaltfläche zum Abschicken des Formulars erstellt. Jedes Text-Eingabefeld hat ein <label>, das mit ihm verknüpft ist, um den Nutzer wissen zu lassen, was von ihm erwartet wird.

Schauen wir uns das E-Mail-Adress-Eingabefeld genauer an. Seine size- und maxlength-Attribute sind beide auf 64 gesetzt, um Platz für 64 Zeichen der E-Mail-Adresse anzuzeigen und um die Anzahl der tatsächlich eingegebenen Zeichen auf maximal 64 zu begrenzen. Das required-Attribut ist angegeben, wodurch es erforderlich ist, dass eine gültige E-Mail-Adresse angegeben wird.

Ein geeignetes placeholder wird angegeben – username@beststartupever.com – um zu zeigen, was als gültige Eingabe erwartet wird. Dieser String zeigt sowohl, dass eine E-Mail-Adresse eingegeben werden sollte, als auch dass es ein Unternehmens-Konto von beststartupever.com sein sollte. Dies ergänzt die Tatsache, dass die Verwendung von Typ email den Text validieren wird, um sicherzustellen, dass er im Format einer E-Mail-Adresse 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 möchten sicherstellen, dass die E-Mail-Adresse tatsächlich in der Form [benutzername]@beststartupever.com ist. Hier werden wir das pattern verwenden. Wir setzen pattern auf .+@beststartupever.com. Dieser reguläre Ausdruck fordert eine Zeichenfolge an, die mindestens aus einem beliebigen Zeichen besteht, dann ein "@" gefolgt vom Domain-Namen "beststartupever.com".

Beachten Sie, dass dies nicht einmal annähernd ein ausreichender Filter für gültige E-Mail-Adressen ist; es würde Dinge wie " @beststartupever.com" (BeachsmartyTokenist den führenden Leerraum) oder "@@beststartupever.com" zulassen, die beide nicht gültig sind. Jedoch führt der Browser sowohl den Standardfilter für E-Mail-Adressen als auch unser benutzerdefiniertes Muster gegen den angegebenen Text durch. Daher enden wir mit einer 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 der title das Muster beschreiben. Das heißt, es sollte erklären, welches Format die Daten haben sollten, anstatt jede andere Information. Das liegt daran, dass der title möglicherweise als Teil einer Validierungsfehlermeldung angezeigt oder gesprochen wird. Zum Beispiel könnte der Browser die Nachricht "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.

Deshalb geben wir stattdessen den String "Bitte geben Sie nur eine Best Startup Ever Firmen-E-Mail-Adresse" an. Indem wir das tun, könnte die resultierende Fehlermeldung so aussehen: "Der eingegebene Text entspricht nicht dem erforderlichen Muster. Bitte geben Sie nur eine Best Startup Ever Firmen-E-Mail-Adresse."

Beispiele

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. Darüber hinaus 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 Mehrfache E-Mail-Adressen zulassen beschrieben. Als zusätzlichen Schliff enthält das list-Attribut die ID eines <datalist>, dessen <option>s eine Reihe von vorgeschlagenen Werten angeben, aus denen der Benutzer wählen kann.

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

<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>

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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