input type="email"

<input type="email">

<input>"email"用于输入和编辑电子邮件地址的类型元素，或者如果multiple指定了属性，则使用电子邮件地址列表。在提交表单之前，输入值会被自动验证，以确保它是空的或正确格式的电子邮件地址（或地址列表）。在:valid与:invalidCSS伪类为适当的自动应用。

不支持类型的浏览器会"email"回退为标准"text"输入。

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

值

该<input>元素的value属性值包含一个DOMString自动验证符合电子邮件语法。更具体地说，有三种可能的值格式将通过验证：

• 一个空字符串（“”），表示用户没有输入值或者该值已被删除。

• 一个正确的电子邮件地址。这并不一定意味着电子邮件地址存在，但它至少格式正确。简而言之，这意味着"username@subdomain.domain"。当然，还有更多呢？请参阅regexp与电子邮件地址验证算法相匹配的验证。

• 当且仅当multiple指定属性时，该值可以是由逗号分隔的正确形成的电子邮件地址的列表。从列表中的每个地址中删除任何结尾和前导空格。

有关如何验证电子邮件地址以确保格式正确的详细信息，请参阅验证。

使用电子邮件输入

电子邮件地址是网络上输入最频繁的文本数据形式之一; 它们在登录网站，请求信息时，允许订单确认，网络邮件等等时使用。因此，"email"输入类型可以使您作为Web开发人员的工作更简单，因为它可以帮助您在构建电子邮件地址的用户界面和逻辑时简化工作。当您创建具有适当type值的电子邮件输入时"email"，您将自动验证输入的文本是否至少以正确的格式显示，可能是合法的电子邮件地址。这可以帮助避免用户错误输入地址或提供无效地址的情况。

但是，重要的是要注意，这不足以确保指定的文本是实际存在的电子邮件地址，与网站的用户相对应，或者以其他方式可以接受。它只是确保该字段的值被正确格式化为电子邮件地址。

记住用户可以在幕后修改你的HTML也是至关重要的，所以你的网站不能为了任何安全的目的而使用这个验证。您必须在提供的文本可能有任何安全含义的任何交易的服务器端验证电子邮件地址。

简单的电子邮件输入

目前，所有实现此元素的浏览器都将其作为具有基本验证功能的标准文本输入字段来实现。然而，规范确实允许浏览器在这个纬度。例如，该元素可以与用户设备的内置地址簿集成，以允许从该列表中选择电子邮件地址。因此，在其最基本的形式中，电子邮件输入可以这样实现：

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

请注意，如果输入一个有效格式的电子邮件地址并且没有被视为有效，则认为它是有效的。通过添加required属性，只允许有效形成的电子邮件地址; 输入在空时不再被认为是有效的。

允许多个电子邮件地址

通过添加multiple布尔属性，可以将输入配置为接受多个电子邮件地址。

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

现在，当输入单个电子邮件地址时，或者以逗号分隔的任意数量的电子邮件地址以及可选的一些空白字符数时，该输入被认为是有效的。

何时"multiple"使用，该值被允许为空。

"multiple"指定有效字符串时的一些示例：

• ""

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

这些是无效字符串的一些例子：

• ","

• "me"

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

占位符

有时，提供关于输入数据应该采取何种形式的上下文提示是有帮助的。如果页面设计没有为每个页面提供描述性标签，这可能尤其重要<input>。这是占位符进来。占位符是演示的形式的值value应采取通过呈现一个有效的值，这被显示在编辑框内部时，该元件的一个例子value是""。一旦数据输入框中，占位符消失; 如果该框被清空，占位符重新出现。

在这里，我们有"email"占位符的输入"sophie@example.com"。请注意占位符在编辑字段的内容时如何消失并重新出现。

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

控制输入​​大小

您不仅可以控制输入框的物理长度，还可以控制输入文本自身允许的最小和最大长度。

输入元素大小

输入框的物理尺寸可以使用size属性进行控制。有了它，您可以指定输入框一次可以显示的字符数。在本例中，例如，电子邮件编辑框的宽度为15个字符：

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

元素值的长度

该size是从输入电子邮件地址本身长度不限分开，这样就可以有场适合在狭小的空间，同时仍允许输入较长的电子邮件地址字符串。您可以使用minlength属性为输入的电子邮件地址指定最小字符长度; 同样，用于maxlength设置输入的电子邮件地址的最大长度。

以下示例创建一个32个字符的电子邮件地址输入框，要求内容不少于3个字符且不超过64个字符。

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

提供默认选项

与往常一样，您可以"email"通过设置其value属性来为输入框提供默认值：

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

提供建议值

更进一步，可以提供一个默认选项列表，用户可以通过指定该list属性来选择。这不会限制用户使用这些选项，但可以让他们更快地选择常用电子邮件地址。这也提供了一些提示autocomplete。该list属性指定a的ID <datalist>，而<option>每个建议值又包含一个元素; 每个option的value是email输入框对应的建议值。

<input type="email" size="40" list="defaultEmails">

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk">
  <option value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

使用<datalist>元素及其<option>位置，浏览器将提供指定的值作为电子邮件地址的潜在值; 这通常以包含建议的弹出菜单或下拉菜单的形式呈现。虽然具体的用户体验可能因浏览器而异，但通常在编辑框中单击可显示建议电子邮件地址的下拉列表。然后，当用户键入时，列表被调整为仅显示匹配的值。每个输入的字符都会缩小列表直到用户进行选择或输入自定义值。

Validation

有两个级别的内容验证可用于"email"输入。首先，提供给所有人<input>的标准验证级别，自动确保内容符合要求是一个有效的电子邮件地址。但也可以选择添加额外的过滤功能，以确保您的专业需求得到满足（如果有的话）。

HTML表单验证是不为脚本，确保输入的数据是正确的格式的替代品。有人很容易调整HTML，使他们绕过验证，或完全删除它。也有人可能完全绕过你的HTML，直接提交数据到你的服务器。如果您的服务器端代码无法验证其接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到您的数据库时，可能会导致灾难。

基本验证

支持"email"输入类型的浏览器会自动提供验证，以确保只有与Internet电子邮件地址的标准格式匹配的文本才会输入到输入框中。实现规范的浏览器应该使用与下面的正则表达式等价的算法：

/^[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])?)*$/

要详细了解表单验证如何工作，以及如何利用:valid和:invalidCSS属性来根据当前值是否有效来设置输入的样式。

已知的与国际域名有关的规范问题以及HTML中的电子邮件地址的验证。有关详细信息，请参阅W3C错误15489。

模式验证

如果您需要输入的电子邮件地址不仅限于“任何类似于电子邮件地址的字符串”，还可以使用该pattern属性指定值必须匹配才能使值有效的正则表达式。如果multiple指定了属性，则逗号分隔的值列表中的每个单独项目都必须匹配regexp。

例如，假设您正在为Best Startup Ever，Inc.的员工建立一个页面，让他们联系他们的IT部门寻求帮助。在我们的简化形式中，用户需要输入他们的电子邮件地址和描述他们需要帮助的问题的消息。我们希望确保用户不仅提供有效的电子邮件地址，而且为了安全起见，我们要求地址是公司内部的电子邮件地址。

由于类型输入"email"验证标准电子邮件地址验证和指定pattern，您可以轻松实现这一点。让我们看看如何：

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

我们<form>包含了一个<input>类型的"email"用户的电子邮件地址，<textarea>输入自己的消息将IT和<input>类型"submit"，它创建了一个按钮，提交表单。每个文本输入框都有一个<label>关联的，让用户知道他们的期望。

让我们仔细看看电子邮件地址输入框。其属性size和maxlength属性都设置为64，以显示64个字符的电子邮件地址的空间，并将实际输入的字符数限制为最多64个。required指定该属性，使得强制使用有效的电子邮件地址提供。

placeholder提供了一个适当的内容"username@beststartupever.com"- 来说明什么是有效的条目。该字符串表明应该输入电子邮件地址，并建议它应该是企业beststartpepever.com帐户。这是除了使用类型"email"将验证文本，以确保它的格式如电子邮件地址。如果输入框中的文本不是电子邮件地址，则会显示如下所示的错误消息：

如果我们放弃这些，我们至少会在合法的电子邮件地址上进行验证。但是我们想要更进一步：我们要确保电子邮件地址实际上是以“ 用户名 @ beststartupever.com” 的形式。这是我们将使用的地方pattern。我们设置pattern来".+@beststartupever.com"。这个简单的正则表达式请求一个至少包含一个字符的字符串，然后是一个“@”，后跟一个域名“beststartpepever.com”。

请注意，这对于有效的电子邮件地址来说还不够接近足够的过滤器。它会允许诸如“@ beststartupever.com”（注意领先空间）或“@@ beststartupever.com”，这两者都不是有效的。但是，浏览器会根据指定的文本运行标准电子邮件地址过滤器和我们的自定义模式。结果，我们结束了一个验证，说：“确保这是一个有效的电子邮件地址，如果是，请确保它也是一个beststartpepever.com地址。

建议使用该title属性pattern。如果你这样做，title 必须描述模式。也就是说，它应该解释数据的格式，而不是其他信息。这是因为title可能会显示或说出作为验证错误消息的一部分。例如，浏览器可能会显示消息“输入的文本与所需的模式不匹配”​​。其次是你指定的title。如果您的title电子邮件地址类似于“电子邮件地址”，则会显示“输入的文本不符合所需的模式，电子邮件地址”的信息，这并不是很好。

这就是为什么我们需要指定字符串“请只提供最好的企业电子邮件地址启动”这样做会导致完整的错误信息，例如“输入的文本不符合要求的模式，请只提供最好的企业邮箱地址“。

如果在编写验证正则表达式时遇到麻烦，并且工作不正常，请检查浏览器的控制台; 那里可能有帮助的错误消息来帮助你解决这个问题。

例子

这里我们有一个电子邮件输入，ID "emailAddress"最多可以有256个字符。输入框本身在物理上是64个字符，并且"user@example.gov"在字段为空时将该文本显示为占位符。另外，通过使用该multiple属性，该框被配置为允许用户输入零个或多个电子邮件地址，以逗号分隔，如允许多个电子邮件地址中所述。作为最后的触摸，则list属性用来指定的所述ID <datalist>，其<option>s指定的一组建议值的用户可以从中选择的。

As an added touch, the <label> element is used to establish a label for the email entry box, with its for attribute referencing the "emailAddress" ID of the <input> element. By associating the two elements in this way, clicking on the label will focus the input element.

<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 value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

规范

浏览器兼容性