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

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

值

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

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

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

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

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

使用电子邮件输入

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

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

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

简单的电子邮件输入

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

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

允许多个电子邮件地址

通过添加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"

占位符

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

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

控制输入大小

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

输入元素大小

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

元素值的长度

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

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

提供默认选项

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

提供建议值

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

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

Validation

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

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，您可以轻松实现这一点。让我们看看如何：

 
 Your email address
  
 
 Request
  
 

我们