<input> Elemente des Typsemail werden verwendet, um dem Benutzer das Eingeben und Bearbeiten einer E-Mail-Adresse zu ermöglichen, oder, wenn dasmultiple Attribut angegeben ist, eine Liste von E-Mail-Adressen.

Probieren Sie es aus

<label for="email">Enter your example.com email:</label><input type="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 eine Liste von Adressen) ist, bevor das Formular abgeschickt werden kann. Die:valid und:invalid CSS-Pseudoklassen werden je nach Bedarf automatisch angewendet, um visuell anzuzeigen, ob der aktuelle Wert des Feldes eine gültige E-Mail-Adresse ist oder nicht.

Wert

Dasvalue Attribut des<input> Elements enthält eine Zeichenkette, die automatisch dahingehend validiert wird, dass sie der Syntax einer E-Mail entspricht. Genauer gesagt gibt es drei mögliche Wertformate, die die Validierung bestehen:

1. Eine leere Zeichenkette ("") zeigt an, dass der Benutzer keinen Wert eingegeben hat oder dass der Wert entfernt wurde.
2. Eine einzelne korrekt gebildete E-Mail-Adresse. Dies bedeutet nicht unbedingt, dass die E-Mail-Adresse existiert, aber sie ist zumindest korrekt formatiert. Dies bedeutetusername@domain oderusername@domain.tld. Natürlich gibt es noch mehr dazu; sieheValidierung für einenregulären Ausdruck, der dem E-Mail-Adressvalidierungsalgorithmus entspricht.
3. Nur wenn dasmultiple Attribut angegeben ist, kann der Wert eine Liste von korrekt formatierten, kommagetrennten E-Mail-Adressen sein. Jedes führende und nachfolgende Leerzeichen wird von jeder Adresse in der Liste entfernt.

SieheValidierung für Einzelheiten zur Validierung von E-Mail-Adressen, um sicherzustellen, dass sie korrekt formatiert sind.

Zusätzliche Attribute

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

list

Der Wert des list-Attributs ist dieid eines<datalist> Elements, das sich im selben Dokument befindet. Der<datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer als Eingabevorschläge angeboten werden. Alle Werte in der Liste, die nicht mit demtype kompatibel sind, werden nicht in den vorgeschlagenen Optionen enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Zeichenlänge (gemessen inUTF-16 Codeeinheiten), die der Benutzer in dasemail Eingabefeld eingeben kann. Dieser Wert muss eine Ganzzahl von 0 oder höher sein. Wenn keinmaxlength angegeben ist oder ein ungültiger Wert angegeben ist, hat dasemail Eingabefeld keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert vonminlength sein.

Bei derEinschränkung der Validierung schlägt die Eingabe fehl, wenn die Länge des Textwertes des Feldes größer ist alsmaxlengthUTF-16 Codeeinheiten. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

Die minimale Zeichenlänge (gemessen inUTF-16 Codeeinheiten), die der Benutzer in dasemail Eingabefeld eingeben kann. Dieser Wert muss eine nicht negative Ganzzahl sein, die kleiner oder gleich dem durchmaxlength angegebenen Wert ist. Wenn keinminlength angegeben ist oder ein ungültiger Wert angegeben ist, hat dasemail Eingabefeld keine minimale Länge.

Die Eingabe schlägt bei derEinschränkung der Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes kürzer ist alsminlengthUTF-16 Codeeinheiten. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

multiple

Ein boolesches Attribut, das, wenn es vorhanden ist, anzeigt, dass der Benutzer eine Liste von mehreren E-Mail-Adressen eingeben kann, die durch Kommas und optional durch Leerzeichen getrennt sind. SieheErlauben mehrerer E-Mail-Adressen für ein Beispiel oderHTML Attribut: multiple für weitere Details.

pattern

Daspattern Attribut, wenn angegeben, ist ein regulärer Ausdruck, den dervalue der Eingabe erfüllen muss, um dieEinschränkung der Validierung zu bestehen. Es muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er vomRegExp Typ verwendet wird und wie in unseremLeitfaden für reguläre Ausdrücke dokumentiert; das'u' Flag wird beim Kompilieren des regulären Ausdrucks angegeben, sodass das Muster als eine Folge von Unicode-Codepunkten behandelt wird, anstelle vonASCII. Es sollten keine Schrägstriche 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 AbschnittMuster-Validierung für Details und ein Beispiel.

placeholder

Dasplaceholder Attribut ist eine Zeichenkette, die 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 erklärenden Nachricht. Der Textdarf keine Zeilen- oder Seitenumbrüche enthalten.

Wenn die Richtung des Inhalts des Steuerungselements (LTR oderRTL) entgegengesetzt zur Richtung des Platzhalters sein muss, können Sie Unicode-Bidi-Algorithmusformatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; sieheAnleitung zur Verwendung von Unicode-Steuerelementen für bidi-Text für weitere Informationen.

readonly

Ein boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Seinvalue kann jedoch immer noch durch direktes Setzen derHTMLInputElementvalue Eigenschaft in JavaScript-Code geändert werden.

size

Dassize 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 sich die Zeichenbreiten unterscheiden, kann dies genau sein oder nicht und sollte nicht als solches angenommen werden; die resultierende Eingabe kann je nach Zeichen und den verwendeten Schriftarten (font Einstellungen) schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies legtkeine Begrenzung fest, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt lediglich an, wie viele Zeichen ungefähr gleichzeitig sichtbar sein können. Um eine Obergrenze für die Länge der Eingabedaten festzulegen, verwenden Sie dasmaxlength Attribut.

Verwendung von E-Mail-Eingaben

E-Mail-Adressen gehören zu den am häufigsten eingegebenen Textformularen im Web; sie werden beim Anmelden auf Websites, beim Anfordern von Informationen, zur Bestätigung von Bestellungen, für Webmail usw. verwendet. Daher kann deremail Eingabetyp Ihre Arbeit als Webentwickler erheblich vereinfachen, da er Ihre Arbeit bei der Erstellung der Benutzeroberfläche und der Logik für E-Mail-Adressen vereinfachen kann. Wenn Sie eine E-Mail-Eingabe mit dem richtigentype Wert, alsoemail, erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text zumindest in der korrekten Form vorliegt, um möglicherweise eine legitime E-Mail-Adresse zu sein. Dies kann helfen, Fälle zu vermeiden, in denen der Benutzer seine Adresse vertippt oder eine ungültige Adresse angibt.

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

Eine einfache E-Mail-Eingabe

Derzeit implementieren alle Browser, die dieses Element verwenden, es als standardmäßiges Textfeld mit grundlegenden Validierungsfunktionen. Die Spezifikation ermöglicht den Browsern jedoch Freiheit darin. 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 einfachsten Form kann eineemail Eingabe wie folgt umgesetzt werden:

<input 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 angesehen wird. Indem dasrequired Attribut hinzugefügt wird, werden nur gültig gebildete E-Mail-Adressen erlaubt; die Eingabe wird nicht mehr als gültig betrachtet, wenn sie leer ist.

Zulassen mehrerer E-Mail-Adressen

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

<input type="email" multiple />

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

Einige Beispiele für gültige Zeichenfolgen, wennmultiple 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"

Platzhalter

Manchmal ist es hilfreich, einen kontextspezifischen Hinweis darauf zu geben, in welcher Form die Eingabedaten erfolgen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes<input> bietet. Hier kommenPlatzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form desvalue demonstriert, indem er ein Beispiel für einen gültigen Wert anzeigt, das im Bearbeitungsfeld angezeigt wird, wenn dervalue des Elements "". Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wenn das Feld geleert wird, erscheint der Platzhalter erneut.

Hier haben wir eineemail Eingabe mit dem Platzhaltersophie@example.com. Beachten Sie, wie der Platzhalter verschwindet und erneut 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 Eingabefeldes steuern, sondern auch die minimale und maximale Länge der zulässigen Eingabetexte selbst.

Physische Größe des Eingabeelements

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

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

Wertlänge des Elements

Diesize ist unabhängig von der Längenbegrenzung der tatsächlich eingegebenen E-Mail-Adresse, sodass Sie Felder in einem kleinen Raum haben können, während Sie dennoch längere E-Mail-Adresseingaben zulassen. Sie können eine minimale Länge, in Zeichen, für die eingegebene E-Mail-Adresse mit demminlength Attribut angeben; ähnlich verwenden Siemaxlength, um die maximale Länge der eingegebenen E-Mail-Adresse anzugeben.

Das untenstehende Beispiel erstellt ein E-Mail-Adresseingabefeld mit einer Breite von 32 Zeichen und 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" />

Vorgabeoptionen bereitstellen

Eine einzelne Vorgabe mit dem Value-Attribut bereitstellen

Wie immer können Sie für einemail Eingabefeld einen Standardwert festlegen, indem Sie seinvalue Attribut setzen:

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

Vorgeschlagene Werte anbieten

Einen Schritt weiter können Sie eine Liste von Standardoptionen bereitstellen, aus der der Benutzer auswählen kann, indem Sie daslist Attribut angeben. Dies begrenzt den Benutzer nicht auf diese Optionen, ermöglicht es ihm jedoch, häufiger verwendete E-Mail-Adressen schneller auszuwählen. Dies bietet auch Hinweise zuautocomplete. Daslist Attribut gibt die ID eines<datalist> an, das wiederum pro vorgeschlagenem Wert ein<option> Element enthält; jedesoption Element hat einenvalue, der dem entsprechenden vorgeschlagenen Wert für das E-Mail-Eingabefeld entspricht.

<input type="email" size="40" list="defaultEmails" /><datalist>  <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 typischerweise als Popup- oder Drop-down-Menü mit den Vorschlägen präsentiert. Während die spezifische Benutzererfahrung von Browser zu Browser variieren kann, wird normalerweise beim Klicken in das Bearbeitungsfeld ein Dropdown mit den vorgeschlagenen E-Mail-Adressen präsentiert. Dann, während der Benutzer tippt, wird die Liste gefiltert, um nur passende Werte anzuzeigen. Jedes getippte Zeichen schränkt die Liste weiter ein, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Validierung

Füremail Eingaben sind zwei Ebenen der Inhaltsvalidierung verfügbar. Zuerst gibt es die standardmäßige Validierungsebene, die für alle<input>s angeboten wird und 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 spezifischen Anforderungen erfüllt werden, falls 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, in das Eingabefeld eingegeben wird. Browser verwenden einen Algorithmus, der einem 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 nutzen können, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist, sieheFormulardatenvalidierung.

Muster-Validierung

Wenn Sie möchten, dass die eingegebene E-Mail-Adresse zusätzlich eingeschränkt wird, können Sie daspattern Attribut verwenden, um einenregulären Ausdruck anzugeben, den der Wert erfüllen muss, damit er gültig ist. Wenn dasmultiple Attribut angegeben ist, muss jedes einzelne Element in der durch Komma separierten Liste von Werten demregulären Ausdruck entsprechen.

Zum Beispiel, sagen wir, Sie erstellen eine Seite für Mitarbeiter von Best Startup Ever, Inc., die es ihnen ermöglicht, ihre IT-Abteilung um Hilfe zu bitten. In unserem vereinfachten Formular muss der Benutzer seine E-Mail-Adresse und eine Nachricht angeben, 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 auch, dass die Adresse eine interne firmeninterne E-Mail-Adresse ist.

Da Eingaben vom Typemail sowohl gegen die Standard-E-Mail-Adressvalidierung als auch das angegebenepattern validiert werden, können Sie dies einfach 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>    <label for="emailAddress">Your email address</label><br />    <input           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>    <label for="message">Request</label><br />    <textarea           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 Typemail für die E-Mail-Adresse des Benutzers, ein<textarea>, um ihre Nachricht an die IT einzugeben, und ein<input> vom Typ"submit", das eine Schaltfläche zum Absenden des Formulars erstellt. Jede Texteingabe hat ein zugehöriges<label>, das den Benutzer wissen lässt, was von ihm erwartet wird.

Schauen wir uns die E-Mail-Adresseneingabe näher an. Ihresize undmaxlength Attribute sind beide auf 64 eingestellt, um Platz für 64 Zeichen einer E-Mail-Adresse zu bieten und um die Anzahl der tatsächlich eingegebenen Zeichen auf maximal 64 zu begrenzen. Dasrequired Attribut ist angegeben, wodurch es zwingend erforderlich ist, dass eine gültige E-Mail-Adresse angegeben wird.

Ein passenderplaceholder wird angegeben—username@beststartupever.com—um zu zeigen, wie ein gültiger Eintrag aussehen sollte. Diese Zeichenkette veranschaulicht sowohl, dass eine E-Mail-Adresse eingegeben werden sollte, als auch dass es sich um ein Firmenkonto von beststartupever.com handeln sollte. Dies ist zusätzlich zur Tatsache, dass durch die Verwendung des Typsemail der Text validiert 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 ungefähr so aussieht:

Wenn wir es dabei belassen, 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 im Format[username]@beststartupever.com vorliegt. Hier werden wir daspattern verwenden. Wir setzenpattern auf.+@beststartupever.com. Dieser reguläre Ausdruck verlangt eine Zeichenkette, die aus mindestens einem beliebigen Zeichen besteht, gefolgt von einem "@" und der Domain "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 standardmäßigen E-Mail-Adressfilter als auch unser benutzerdefiniertes Muster gegen den angegebenen Text aus. Dadurch erhalten wir eine Validierung, die sagt: "Stellen Sie sicher, dass dies wie eine gültige E-Mail-Adresse aussieht, und wenn dies der Fall ist, stellen Sie sicher, dass es sich auch um eine beststartupever.com Adresse handelt."

Es ist ratsam, dastitle Attribut zusammen mitpattern zu verwenden. Wenn Sie dies tun,muss dertitle das Muster beschreiben. Das heißt, er sollte erklären, welches Format die Daten haben sollten, anstatt andere Informationen. Das liegt daran, dass dertitle 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 angegebenentitle präsentieren. Wenn Ihrtitle 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 hilfreich ist.

Stattdessen geben wir die Zeichenkette "Bitte geben Sie nur eine Corporate E-Mail-Adresse von Best Startup Ever an". Dadurch könnte die vollständige Fehlermeldung ungefähr lauten: "Der eingegebene Text entspricht nicht dem erforderlichen Muster. Bitte geben Sie nur eine Corporate E-Mail-Adresse von Best Startup Ever an."

Beispiele

Hier haben wir eine E-Mail-Eingabe mit der IDemailAddress, die bis zu einer maximalen Länge von 256 Zeichen zulässig ist. Das Eingabefeld selbst ist physisch 64 Zeichen breit und zeigt den Textuser@example.gov als Platzhalter an, solange das Feld leer ist. Zusätzlich wird durch die Verwendung desmultiple Attributs das Feld so konfiguriert, dass der Benutzer null oder mehr E-Mail-Adressen eingeben kann, die durch Kommas getrennt sind, wie im AbschnittErlauben mehrerer E-Mail-Adressen beschrieben. Als letzte Ergänzung enthält daslist Attribut die ID eines<datalist>, dessen<option>s eine Reihe von vorgeschlagenen Werten angeben, aus denen der Benutzer auswählen kann.

Als zusätzliche Ergänzung wird das<label> Element verwendet, um ein Label für das E-Mail-Eingabefeld zu erstellen, wobei seinfor Attribut auf die IDemailAddress des<input> Elements verweist. Durch die Verknüpfung der beiden Elemente auf diese Weise wird das Eingabefeld fokussiert, wenn auf das Label geklickt wird.

<label for="emailAddress">Email</label><br /><input   type="email"  placeholder="user@example.gov"  list="defaultEmails"  size="64"  maxlength="256"  multiple /><datalist>  <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-Formulare Leitfaden
• <input>
• <input type="tel">
• <input type="url">
• Attribute:
  • list
  • minlength
  • maxlength
  • multiple
  • pattern
  • placeholder
  • readonly
  • size