HTML-Attributwert <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;
}

Wert

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

1. Eine leere Zeichenkette (""), die angibt, dass der Benutzer keinen Wert eingegeben hat oder dass der Wert entfernt wurde.
2. Eine einzelne korrekt gebildete E-Mail-Adresse. Das bedeutet nicht unbedingt, dass die E-Mail-Adresse existiert, aber sie ist zumindest korrekt formatiert. Das bedeutet username@domain oder username@domain.tld. Natürlich gehört mehr dazu; siehe Validierung für einen regulären Ausdruck, der dem Algorithmus zur Validierung von E-Mail-Adressen entspricht.
3. Wenn und nur wenn das Attribut multiple angegeben ist, kann der Wert eine Liste korrekt gebildeter, durch Kommas getrennter E-Mail-Adressen sein. Vorangestellte und nachgestellte Leerzeichen werden aus jeder Adresse in der Liste entfernt.

Details dazu, wie E-Mail-Adressen validiert werden, um ihre korrekte Formatierung sicherzustellen, finden Sie unter Validierung.

Zusätzliche Attribute

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

list

Der Wert des Attributs list ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Das <datalist> stellt eine Liste vordefinierter Werte bereit, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte in der Liste, die nicht mit type kompatibel sind, werden nicht in die 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.

maxlength

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 größer sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die email-Eingabe keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe besteht die Constraint-Validierung nicht, wenn die Länge des Textwerts des Felds mehr als maxlength UTF-16-Codeeinheiten beträgt. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

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 ist oder ein ungültiger Wert angegeben wird, hat die email-Eingabe keine minimale Länge.

Die Eingabe besteht die Constraint-Validierung nicht, wenn die Länge des in das Feld eingegebenen Texts weniger als minlength UTF-16-Codeeinheiten beträgt. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

multiple

Ein boolesches Attribut, das bei Vorhandensein angibt, dass der Benutzer eine Liste mehrerer E-Mail-Adressen eingeben kann, die durch Kommas und optional Leerzeichen getrennt sind. Ein Beispiel finden Sie unter Mehrere E-Mail-Adressen erlauben, weitere Details unter HTML-Attribut: multiple.

pattern

Das Attribut pattern ist, wenn es angegeben ist, ein regulärer Ausdruck, mit dem der value der Eingabe übereinstimmen muss, damit der Wert die Constraint-Validierung besteht. Es muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er vom Typ RegExp verwendet und in unserem Leitfaden zu regulären Ausdrücken dokumentiert wird; beim Kompilieren des regulären Ausdrucks wird das Flag 'u' angegeben, sodass das Muster als Folge von Unicode-Codepunkten statt als ASCII behandelt wird. Um den Mustertext sollten keine Schrägstriche angegeben werden.

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

Details und ein Beispiel finden Sie im Abschnitt Muster-Validierung.

placeholder

Das Attribut placeholder ist eine Zeichenkette, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Formulierung sein, die den erwarteten Datentyp demonstriert, und keine erläuternde Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenvorschübe enthalten.

Wenn der Inhalt des Steuerelements eine Schreibrichtung (LTR oder RTL) hat, der Platzhalter aber in der entgegengesetzten Schreibrichtung dargestellt werden muss, können Sie Zeichen zur Formatierung des Unicode-Algorithmus für bidirektionalen Text verwenden, um die Schreibrichtung innerhalb des Platzhalters zu überschreiben. Weitere Informationen finden Sie unter How to use Unicode controls for bidi text.

readonly

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

size

Das Attribut size ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss eine Zahl größer als null sein; der Standardwert ist 20. Da Zeichenbreiten variieren, ist dies möglicherweise nicht exakt und sollte nicht als exakt vorausgesetzt werden; die resultierende Eingabe kann abhängig von den Zeichen und der verwendeten Schriftart (font-Einstellungen) schmaler oder breiter als die angegebene Zeichenanzahl sein.

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

E-Mail-Eingaben verwenden

E-Mail-Adressen gehören zu den am häufigsten im Web eingegebenen Textdaten; sie werden bei der Anmeldung bei Websites, beim Anfordern von Informationen, für Bestellbestätigungen, für Webmail usw. verwendet. Daher kann der Eingabetyp email Ihre Arbeit als Webentwickler erheblich erleichtern, da er beim Erstellen der Benutzeroberfläche und Logik für E-Mail-Adressen helfen kann. Wenn Sie eine E-Mail-Eingabe mit dem korrekten type-Wert email erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text zumindest die korrekte Form hat, um möglicherweise eine legitime E-Mail-Adresse zu sein. Dies kann Fälle vermeiden helfen, 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 tatsächlich existierende E-Mail-Adresse ist, dem Benutzer der Website entspricht oder auf andere Weise akzeptabel ist. Es stellt sicher, dass der Wert des Felds korrekt formatiert ist, um eine E-Mail-Adresse zu sein.

Eine grundlegende E-Mail-Eingabe

Derzeit implementieren alle Browser, die dieses Element implementieren, es als ein Standard-Texteingabefeld mit grundlegenden Validierungsfunktionen. Die Spezifikation lässt Browsern dabei jedoch Spielraum. Beispielsweise könnte das Element in das integrierte Adressbuch des Geräts des Benutzers integriert sein, um die Auswahl von E-Mail-Adressen aus dieser Liste zu ermöglichen. In seiner grundlegendsten Form kann eine email-Eingabe folgendermaßen implementiert werden:

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

Beachten Sie, dass sie als gültig betrachtet wird, wenn sie leer ist und wenn eine einzelne korrekt formatierte E-Mail-Adresse eingegeben wird, ansonsten jedoch nicht. Durch Hinzufügen des Attributs required sind nur korrekt gebildete E-Mail-Adressen zulässig; die Eingabe wird nicht mehr als gültig betrachtet, wenn sie leer ist.

Mehrere E-Mail-Adressen erlauben

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

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

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

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

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

Platzhalter

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis darauf anzubieten, welche Form die Eingabedaten haben sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine aussagekräftigen Beschriftungen für jedes <input> bereitstellt. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die erwartete Form von value anhand eines Beispiels für einen gültigen Wert demonstriert. Er wird innerhalb des Bearbeitungsfelds angezeigt, wenn das value des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wird das Feld geleert, erscheint er wieder.

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

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

Die Eingabegröße steuern

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

Physische Größe des Eingabeelements

Die physische Größe des Eingabefelds kann mit dem Attribut size 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

size ist von der Längenbegrenzung für die eingegebene E-Mail-Adresse selbst getrennt, sodass Felder in einen kleinen Bereich passen können, während weiterhin längere E-Mail-Adresszeichenketten eingegeben werden dürfen. Sie können mit dem Attribut minlength eine Mindestlänge in Zeichen für die eingegebene E-Mail-Adresse angeben; verwenden Sie entsprechend 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 und verlangt, dass der Inhalt nicht kürzer als 3 und nicht länger als 64 Zeichen ist.

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

Standardoptionen bereitstellen

Einen einzelnen Standardwert mit dem value-Attribut bereitstellen

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

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

Vorgeschlagene Werte anbieten

Sie können noch einen Schritt weitergehen und eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das Attribut list angeben. Dies beschränkt den Benutzer nicht auf diese Optionen, ermöglicht ihm jedoch, häufig verwendete E-Mail-Adressen schneller auszuwählen. Außerdem bietet dies Hinweise für autocomplete. Das Attribut list gibt die ID eines <datalist> an, das wiederum ein <option>-Element pro vorgeschlagenem Wert enthält; der value jeder option ist der entsprechende vorgeschlagene Wert für das Eingabefeld für E-Mail-Adressen.

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

Wenn das Element <datalist> und seine <option>s vorhanden sind, bietet der Browser die angegebenen Werte als mögliche Werte für die E-Mail-Adresse an; dies wird normalerweise als Popup- oder Dropdown-Menü mit den Vorschlägen dargestellt. Während die konkrete Benutzererfahrung von Browser zu Browser variieren kann, zeigt ein Klick in das Bearbeitungsfeld typischerweise eine Dropdown-Liste der vorgeschlagenen E-Mail-Adressen an. Während der Benutzer tippt, wird die Liste gefiltert, um nur übereinstimmende Werte anzuzeigen. Jedes eingegebene Zeichen schränkt die Liste weiter ein, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Validierung

Für email-Eingaben stehen zwei Ebenen der Inhaltsvalidierung zur Verfügung. Erstens gibt es die Standard-Validierungsebene, die für alle <input>s bereitgestellt wird und automatisch sicherstellt, dass der Inhalt die Anforderungen an eine gültige E-Mail-Adresse erfüllt. Darüber hinaus besteht die Möglichkeit, zusätzliche Filter hinzuzufügen, um gegebenenfalls eigene spezialisierte Anforderungen zu erfüllen.

Grundlegende Validierung

Browser stellen automatisch eine Validierung bereit, um sicherzustellen, dass nur Text in das Eingabefeld eingegeben wird, der dem Standardformat für Internet-E-Mail-Adressen entspricht. 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;

Weitere Informationen zur Funktionsweise der Formularvalidierung und zur Verwendung der CSS-Eigenschaften :valid und :invalid, um die Eingabe danach zu gestalten, ob der aktuelle Wert gültig ist, finden Sie unter Validierung von Formulardaten.

Muster-Validierung

Wenn die eingegebene E-Mail-Adresse stärker eingeschränkt werden muss als nur auf „eine beliebige Zeichenkette, die wie eine E-Mail-Adresse aussieht“, können Sie mit dem Attribut pattern einen regulären Ausdruck angeben, mit dem der Wert übereinstimmen muss, damit er gültig ist. Wenn das Attribut multiple angegeben ist, muss jedes einzelne Element in der durch Kommas getrennten Werteliste mit dem regulären Ausdruck übereinstimmen.

Nehmen wir beispielsweise an, Sie erstellen eine Seite für Mitarbeiter von Best Startup Ever, Inc., über die sie sich an ihre IT-Abteilung wenden können, um Hilfe zu erhalten. In unserem vereinfachten Formular muss der Benutzer seine E-Mail-Adresse 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 auch, dass es sich um eine interne geschäftliche E-Mail-Adresse handelt.

Da Eingaben vom Typ email sowohl gegen die Standardvalidierung für E-Mail-Adressen 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> zur Eingabe seiner Nachricht an die IT und ein <input> vom Typ "submit", das eine Schaltfläche zum Übermitteln des Formulars erstellt. Jedes Texteingabefeld hat ein zugeordnetes <label>, damit der Benutzer weiß, was von ihm erwartet wird.

Sehen wir uns das Eingabefeld für die E-Mail-Adresse genauer an. Die Attribute size und maxlength sind beide auf 64 gesetzt, um Platz für 64 Zeichen einer E-Mail-Adresse anzuzeigen und die tatsächlich eingegebene Zeichenanzahl auf maximal 64 zu begrenzen. Das Attribut required ist angegeben, wodurch die Angabe einer gültigen E-Mail-Adresse obligatorisch wird.

Ein geeigneter placeholder wird bereitgestellt – username@beststartupever.com –, um zu demonstrieren, was einen gültigen Eintrag darstellt. Diese Zeichenkette zeigt sowohl, dass eine E-Mail-Adresse eingegeben werden soll, als auch, dass es sich um ein geschäftliches beststartupever.com-Konto handeln sollte. Dies kommt zusätzlich dazu, dass der Typ email den Text daraufhin validiert, ob 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, würden wir zumindest auf legitime E-Mail-Adressen validieren. Aber wir möchten noch einen Schritt weitergehen: 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 verlangt eine Zeichenkette, die aus mindestens einem beliebigen Zeichen besteht, gefolgt von einem „@“ und dem Domainnamen „beststartupever.com“.

Beachten Sie, dass dies bei Weitem kein ausreichender Filter für gültige E-Mail-Adressen ist; er würde beispielsweise „ @beststartupever.com“ (beachten Sie das vorangestellte Leerzeichen) oder „@@beststartupever.com“ erlauben, obwohl keines davon gültig ist. Der Browser führt jedoch sowohl den Standardfilter für E-Mail-Adressen als auch unser benutzerdefiniertes Muster für den angegebenen Text aus. Daher erhalten wir eine Validierung, die besagt: „Stellen Sie sicher, dass dies einer gültigen E-Mail-Adresse ähnelt, und stellen Sie, falls dies der Fall ist, sicher, dass es auch eine beststartupever.com-Adresse ist.“

Es ist ratsam, das Attribut title zusammen mit pattern zu verwenden. Wenn Sie dies tun, muss title das Muster beschreiben. Das heißt, es sollte erläutern, welches Format die Daten haben sollen, und keine anderen Informationen enthalten. Das liegt daran, dass title möglicherweise als Teil einer Validierungsfehlermeldung angezeigt oder vorgelesen wird. Beispielsweise könnte der Browser die Meldung „Der eingegebene Text entspricht nicht dem erforderlichen Muster.“ gefolgt von Ihrem angegebenen title anzeigen. Wenn Ihr title etwa „E-Mail-Adresse“ lautet, wäre das Ergebnis die Meldung „Der eingegebene Text entspricht nicht dem erforderlichen Muster. E-Mail-Adresse“, was nicht besonders hilfreich ist.

Deshalb geben wir stattdessen die Zeichenkette „Please provide only a Best Startup Ever corporate email address“ an. Dadurch könnte die vollständige resultierende Fehlermeldung etwa lauten: „Der eingegebene Text entspricht nicht dem erforderlichen Muster. Please provide only a Best Startup Ever corporate email address.“

Beispiele

Hier haben wir eine E-Mail-Eingabe mit der ID emailAddress, die maximal 256 Zeichen lang sein darf. Das Eingabefeld selbst ist physisch 64 Zeichen breit und zeigt den Text user@example.gov als Platzhalter an, sobald das Feld leer ist. Darüber hinaus ist das Feld durch die Verwendung des Attributs multiple so konfiguriert, dass der Benutzer null oder mehr E-Mail-Adressen eingeben kann, die durch Kommas getrennt sind, wie unter Mehrere E-Mail-Adressen erlauben beschrieben. Abschließend enthält das Attribut list die ID eines <datalist>, dessen <option>s eine Reihe vorgeschlagener Werte angeben, aus denen der Benutzer auswählen kann.

Zusätzlich wird das Element <label> verwendet, um eine Beschriftung für das Eingabefeld für E-Mail-Adressen festzulegen, wobei sein Attribut for auf die ID emailAddress des <input>-Elements verweist. Durch die Zuordnung der beiden Elemente auf diese Weise wird durch Klicken auf die Beschriftung 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>

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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