<input type="email">

Der Eingabewert wird automatisch validiert, um sicherzustellen, dass er entweder leer ist oder eine korrekt formatierte E-Mail-Adresse (oder Liste von Adressen) enthält, bevor das Formular gesendet 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 Attribut value des <input> Elements enthält einen String, der automatisch darauf validiert wird, der E-Mail-Syntax zu entsprechen. Es gibt dabei drei mögliche Wertformate, die die Validierung passieren:

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 notwendigerweise, dass die E-Mail-Adresse existiert, aber sie ist zumindest korrekt formatiert. Einfach ausgedrückt bedeutet das username@domain oder username@domain.tld. Natürlich gibt es dazu mehr zu sagen; siehe Validierung für einen regulären Ausdruck, der dem E-Mail-Adressen-Validierungsalgorithmus entspricht.
3. Falls und nur wenn das multiple Attribut angegeben ist, kann der Wert eine Liste von korrekt geformten, durch Kommata getrennten E-Mail-Adressen sein. Alle 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 korrekt formatiert sind.

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

Der Wert des list Attributs ist die id eines <datalist> Elements, das sich im selben Dokument befindet. Der <datalist> bietet eine Liste von vordefinierten Werten an, um dem Benutzer Vorschläge für diese Eingabe zu machen. Alle Werte in der Liste, die nicht mit dem 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.

Die maximale Zeichenlänge (gemessen in UTF-16 Codedpunkten), die der Benutzer in die email Eingabe 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 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 Textwerts des Feldes länger als maxlength UTF-16 Codedpunkte ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Die minimale Zeichenlänge (gemessen in UTF-16 Codedpunkten), die der Benutzer in die email Eingabe eingeben kann. Dies muss ein nicht-negativer Ganzzahlenwert kleiner oder gleich dem durch maxlength angegebenen Wert sein. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben ist, hat die email Eingabe keine minimale Länge.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16 Codedpunkte 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 mehrerer durch Kommas getrennte E-Mail-Adressen eingeben kann, optional mit Leerzeichenzeichen. Siehe Mehrere E-Mail-Adressen ermöglichen für ein Beispiel oder HTML-Attribut: multiple für mehr Details.

Das pattern Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value des Inputs erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript regulärer Ausdruck sein, wie er von dem RegExp Typ verwendet wird, und es wird in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das 'u' Flag wird zum Kompilieren des regulären Ausdrucks angegeben, sodass das Muster als Sequenz von Unicode Codepunkten behandelt wird, anstelle von ASCII. 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 vollständig ignoriert.

Siehe 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 Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstatt einer erklärenden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung präsentiert werden muss, können Sie Unicode-Algorithmus Zeichen zur bi-direktionalen Formatierung verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Kontrollen für bidi-Text verwendet für weitere Informationen.

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

Das size Attribut ist ein numerischer Wert, 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 Zeichenbreiten unterscheiden, kann dies ungefähr sein und sollte nicht darauf verlassen werden; die resultierende Eingabe kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und der Schriftart (font Einstellungen, die verwendet werden).

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

E-Mail-Adressen gehören zu den am häufigsten eingegebenen textuellen Datenformen im Web; sie werden beim Einloggen auf Websites, bei Informationsanfragen, zur Bestellbestätigung, für Webmail usw. verwendet. Daher kann der email Eingabetyp Ihre Arbeit als Webentwickler erheblich erleichtern, da er Ihnen helfen kann, Ihre Arbeit bei der Erstellung der Benutzeroberfläche und der Logik für E-Mail-Adressen zu vereinfachen. Wenn Sie ein E-Mail-Eingabefeld mit dem richtigen type Wert email erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text mindestens die richtige Form hat, um potenziell eine legitime E-Mail-Adresse zu sein. Dies kann dazu beitragen, 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 tatsächlich existierende E-Mail-Adresse ist, die dem Benutzer der Website entspricht oder in anderer Weise akzeptabel ist. Es stellt sicher, dass der Wert des Feldes richtig formatiert ist, um eine E-Mail-Adresse zu sein.

Derzeit implementieren alle Browser, die dieses Element implementieren, es als standardmäßiges Texteingabefeld mit grundlegenden Validierungsfunktionen. Die Spezifikation erlaubt Browsern jedoch Spielraum dabei. Zum Beispiel könnte das Element in das eingebaute 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 ein email Eingabefeld so implementiert werden:

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

Beachten Sie, dass es als gültig angesehen wird, wenn es leer ist und wenn eine einzelne korrekt 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 betrachtet, wenn sie leer ist.

Durch das Hinzufügen des multiple booleschen 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 einzelne E-Mail-Adresse eingegeben wird oder wenn eine beliebige Anzahl von E-Mail-Adressen, getrennt durch Kommas und optional durch einige Leerzeichenzeichen, vorhanden ist.

Einige Beispiele gültiger 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 ungültiger Strings:

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

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis darauf zu geben, in welcher Form die Eingabedaten vorliegen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign nicht für jedes <input> beschreibende Labels bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der zeigt, in welcher Form der value vorliegen sollte, indem er ein Beispiel für einen gültigen Wert darstellt, der innerhalb des Bearbeitungsfelds angezeigt wird, wenn der value des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wenn das Feld geleert wird, erscheint der Platzhalter wieder.

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 verändern.

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

Sie können nicht nur die physische Länge des Eingabefelds steuern, sondern auch die minimal und maximal erlaubte Länge 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" />

Elementwert-Länge

Die size ist getrennt von der Längenbeschränkung für die tatsächlich eingegebene E-Mail-Adresse, sodass Sie Felder in einen kleinen Raum einpassen können und dennoch längere E-Mail-Adresszeichenfolgen eingegeben werden können. 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 Beispiel unten erstellt eine 32 Zeichen breite E-Mail-Adresseingabebox, die 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 mit dem value Attribut

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

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

Vorschläge anbieten

Noch einen Schritt weiter, Sie können eine Liste von Standardoptionen anbieten, 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, häufiger verwendete E-Mail-Adressen schneller auszuwählen. Dies bietet auch Hinweise für autocomplete. Das list Attribut gibt die ID einer <datalist> an, die wiederum ein <option> Element pro vorgeschlagenem Wert enthält; jeder option value 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, wird der Browser die angegebenen Werte als mögliche Werte für die E-Mail-Adresse anbieten; dies wird typischerweise als Popup oder Dropdown-Menü präsentiert, das die Vorschläge enthält. Während die spezifische Benutzererfahrung von einem Browser zum anderen variieren kann, wird typischerweise durch Klicken in das Bearbeitungsfeld ein Dropdown der vorgeschlagenen E-Mail-Adressen präsentiert. Dann, während der Benutzer tippt, wird die Liste gefiltert, um nur übereinstimmende Werte anzuzeigen. Jeder getippte Buchstabe verkleinert die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Für email Eingaben stehen zwei Ebenen der Inhaltsvalidierung zur Verfügung. Zuerst gibt es die Standardvalidierungsebene, die für alle <input>s angeboten wird und die 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 Filterung hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Anforderungen erfüllt werden, falls Sie welche haben.

Browser bieten automatisch Validierung, um sicherzustellen, dass nur Texteingaben, die dem Standardformat für Internet-E-Mail-Adressen entsprechen, in das Eingabefeld eingegeben werden. Browser verwenden einen Algorithmus, der einem der folgenden regulären Ausdrücke 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 Formularvalidierung funktioniert und wie Sie die :valid und :invalid CSS-Eigenschaften nutzen können, um die Eingabe basierend darauf zu stylen, ob der aktuelle Wert gültig ist, siehe Formulardatenvalidierung.

Wenn Sie möchten, dass die eingegebene E-Mail-Adresse stärker eingeschränkt wird als nur „jeder String, der 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, um gültige zu sein. Wenn das multiple Attribut angegeben ist, muss jeder einzelne Eintrag in der kommaseparierten Liste von Werten dem regulären Ausdruck entsprechen.

Angenommen, 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 eingeben und eine Nachricht beschreiben, für die er Hilfe benötigt. Wir wollen sicherstellen, dass der Benutzer nicht nur eine gültige E-Mail-Adresse angibt, sondern aus Sicherheitsgründen verlangen, dass die Adresse eine interne Unternehmens-E-Mail-Adresse ist.

Da Eingaben vom Typ email sowohl gegen die Standard-E-Mail-Adressvalidierung als auch das angegebene pattern validiert werden, können Sie dies einfach umsetzen. 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 zum Abschicken des Formulars erstellt. Jedes Texteingabefeld hat ein <label> zugeordnet, um dem Benutzer mitzuteilen, was von ihm erwartet wird.

Werfen wir einen genaueren Blick auf das E-Mail-Adressen-Eingabefeld. Seine size und maxlength Attribute sind beide auf 64 eingestellt, um Platz für 64 Zeichen einer E-Mail-Adresse zu zeigen und um die Anzahl der tatsächlich eingegebenen Zeichen auf maximal 64 zu begrenzen. Das required Attribut ist angegeben, was es zwingend macht, dass eine gültige E-Mail-Adresse bereitgestellt wird.

Ein entsprechender placeholder ist bereitgestellt—username@beststartupever.com—um zu demonstrieren, was einen gültigen Eintrag ausmacht. Dieser String zeigt sowohl, dass eine E-Mail-Adresse eingegeben werden sollte, als auch legt nahe, dass es sich um ein Unternehmens-Beststartupever.com-Konto handeln sollte. Dies ist zusätzlich zu der Tatsache, dass die Verwendung des Typs email den Text validiert, um sicherzustellen, dass er als E-Mail-Adresse formatiert ist. Wenn der Text im Eingabefeld keine E-Mail-Adresse ist, erhalten Sie eine Fehlermeldung, 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 noch einen Schritt weiter gehen: Wir möchten sicherstellen, dass die E-Mail-Adresse tatsächlich in der Form [username]@beststartupever.com vorliegt. Hier werden wir pattern verwenden. Wir setzen pattern auf .+@beststartupever.com. Dieser reguläre Ausdruck fordert einen String, der aus mindestens einem beliebigen Zeichen besteht, gefolgt von einem „@“ und dem Domainnamen „beststartupever.com“.

Beachten Sie, dass dies keineswegs ein ausreichender Filter für gültige E-Mail-Adressen ist; er würde Dinge wie „@beststartupever.com“ (beachten Sie das führende Leerzeichen) oder „@@beststartupever.com“ zulassen, die beide nicht gültig sind. Der Browser führt jedoch sowohl den standardmäßigen E-Mail-Adressfilter als auch unser benutzerdefiniertes Muster gegen den angegebenen Text aus. Als Ergebnis erhalten wir eine Validierung, die sagt „Stelle sicher, dass dies wie eine gültige E-Mail-Adresse aussieht und wenn dies der Fall ist, stelle 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 das title den Muster beschreiben. Das heißt, es sollte erklären, in welchem Format die Daten sein sollten, anstatt jegliche andere Informationen. Das liegt daran, dass das title als Teil einer Validierungsfehlermeldung angezeigt oder gesprochen werden könnte. Zum Beispiel könnte der Browser die Nachricht „Der eingegebene Text entspricht nicht dem erforderlichen Muster“ anzeigen. gefolgt von Ihrem angegebenen title. Wenn Ihr title beispielsweise „E-Mail-Adresse“ lautet, würde die resultierende Meldung „Der eingegebene Text entspricht nicht dem erforderlichen Muster. E-Mail-Adresse“, was nicht sehr gut ist.

Deshalb geben wir stattdessen die Zeichenfolge „Bitte geben Sie nur eine Best Startup Ever Unternehmens-E-Mail-Adresse ein“ an. Dadurch könnte die resultierende vollständige Fehlermeldung etwa lauten „Der eingegebene Text entspricht nicht dem erforderlichen Muster. Bitte geben Sie nur eine Best Startup Ever Unternehmens-E-Mail-Adresse ein.“

Hier haben wir ein E-Mail-Eingabefeld mit der ID emailAddress, das eine maximale Länge von 256 Zeichen haben darf. Das Eingabefeld selbst ist physisch 64 Zeichen breit und zeigt den Text user@example.gov als Platzhalter an, sobald das Feld leer ist. Zusätzlich, durch die Verwendung des multiple Attributs, ist das Feld so konfiguriert, dass es dem Benutzer erlaubt, null oder mehr E-Mail-Adressen einzugeben, getrennt durch Kommas, wie in Mehrere E-Mail-Adressen ermöglichen beschrieben. Als letzten 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ätzliche Feinheit wird das <label> Element verwendet, um ein Label für das E-Mail-Eingabefeld festzulegen, indem sein for Attribut auf die emailAddress ID des <input> Elements verweist. Durch diese Assoziation der beiden Elemente wird der Eingabefokus auf das Elemente gesetzt, wenn Sie auf das Label klicken.

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