<input type="email">

试一试

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

在表单提交之前，输入值会自动验证以确保它要么为空，要么是一个格式正确的电子邮件地址（或地址列表）。:valid 和 :invalid CSS 伪类会自动应用，以直观地表示字段的当前值是否是有效的电子邮件地址。

值

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

1. 空字符串 ("")，表示用户没有输入值或值已删除。
2. 单个格式正确的电子邮件地址。这不一定意味着电子邮件地址存在，但它至少格式正确。这意味着 username@domain 或 username@domain.tld。当然，还有更多内容；请参阅验证，了解与电子邮件地址验证算法匹配的正则表达式。
3. 当且仅当指定了 multiple 属性时，该值可以是逗号分隔的格式正确的电子邮件地址列表。列表中每个地址的末尾和开头空格都会被删除。

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

附加属性

除了全局属性以及无论类型如何都适用于所有 <input> 元素的属性之外，email 输入还支持以下属性。

list

列表属性的值是位于同一文档中的 <datalist> 元素的 id。<datalist> 为此输入提供了一个预定义值列表，以供用户建议。列表中与 type 不兼容的任何值都不会包含在建议选项中。提供的值是建议，而不是要求：用户可以从这个预定义列表中选择，也可以提供不同的值。

maxlength

用户可以输入到 email 输入框中的最大字符串长度（以 UTF-16 代码单元衡量）。这必须是一个 0 或更高的整数值。如果没有指定 maxlength，或指定了无效值，则 email 输入没有最大长度。此值还必须大于或等于 minlength 的值。

如果字段的文本值长度大于 maxlength UTF-16 代码单元长，则输入将无法通过约束验证。约束验证仅在用户更改值时应用。

minlength

用户可以输入到 email 输入框中的最小字符串长度（以 UTF-16 代码单元衡量）。这必须是一个非负整数值，小于或等于 maxlength 指定的值。如果没有指定 minlength，或指定了无效值，则 email 输入没有最小长度。

如果字段中输入的文本长度少于 minlength UTF-16 代码单元长，则输入将无法通过约束验证。约束验证仅在用户更改值时应用。

multiple

一个布尔属性，如果存在，则表示用户可以输入一个由逗号和（可选的）空格字符分隔的多个电子邮件地址列表。有关示例，请参阅允许多个电子邮件地址，或有关更多详细信息，请参阅HTML 属性：multiple。

pattern

当指定 pattern 属性时，它是一个正则表达式，输入框的 value 必须与该正则表达式匹配才能通过 约束验证。它必须是有效的 JavaScript 正则表达式，如 RegExp 类型所使用，并记录在我们的正则表达式指南中；在编译正则表达式时指定 'u' 标志，以便将模式视为 Unicode 码点序列，而不是 ASCII。模式文本周围不应指定正斜杠。

如果未指定或指定的模式无效，则不应用正则表达式，并且此属性将完全被忽略。

有关详细信息和示例，请参阅模式验证部分。

placeholder

placeholder 属性是一个字符串，它向用户提供一个简短的提示，说明字段中预期哪种信息。它应该是一个词或短语，演示预期的数据类型，而不是解释性消息。文本不能包含回车或换行符。

如果控件的内容具有单一方向性（从左到右或从右到左），但需要以相反的方向性呈现占位符，您可以使用 Unicode 双向算法格式字符来覆盖占位符内的方向性；有关更多信息，请参阅如何使用 Unicode 控件处理双向文本。

readonly

一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，其 value 仍然可以通过 JavaScript 代码直接设置 HTMLInputElement value 属性来更改。

size

size 属性是一个数字值，表示输入字段应该有多宽（以字符为单位）。该值必须是一个大于零的数字，默认值为 20。由于字符宽度不同，这可能不完全精确，不应依赖于此；最终的输入可能比指定的字符数更窄或更宽，具体取决于字符和正在使用的字体（font 设置）。

这不限制用户可以在字段中输入的字符数。它只指定一次大约可以看到多少个字符。要对输入数据的长度设置上限，请使用maxlength 属性。

使用电子邮件输入框

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

然而，重要的是要注意，这不足以确保指定的文本是实际存在的、与网站用户相符或以任何其他方式可接受的电子邮件地址。它确保字段的值格式正确，可以作为电子邮件地址。

基本电子邮件输入

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

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

请注意，当为空或输入单个格式正确的电子邮件地址时，它被认为是有效的，否则不被认为是有效的。通过添加 required 属性，只允许格式正确的电子邮件地址；当输入为空时，不再被认为是有效的。

允许多个电子邮件地址

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

<input id="emailAddress" type="email" 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 为 "" 时，该示例显示在编辑框内。一旦数据输入到框中，占位符就会消失；如果框被清空，占位符会重新出现。

在这里，我们有一个带有占位符 sophie@example.com 的 email 输入框。请注意，当您操作编辑字段的内容时，占位符如何消失和重新出现。

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

控制输入大小

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

物理输入元素大小

输入框的物理大小可以使用 size 属性控制。通过它，您可以指定输入框一次可以显示的字符数。在此示例中，email 编辑框的宽度为 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 属性指定 <datalist> 的 ID，该元素反过来包含每个建议值的一个 <option> 元素；每个 option 的 value 都是电子邮件输入框的相应建议值。

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

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

验证

email 输入有两种级别的内容验证。首先，所有 <input> 都提供了标准级别的验证，它会自动确保内容符合作为有效电子邮件地址的要求。但也有选项可以添加额外的过滤，以确保满足您自己的特殊需求（如果有的话）。

基本验证

浏览器自动提供验证，以确保只有符合 Internet 电子邮件地址标准格式的文本才能输入到输入框中。浏览器使用与以下正则表达式等效的算法

/^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?(?:\.[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?)*$/i;

要了解有关表单验证如何工作以及如何利用 :valid 和 :invalid CSS 属性根据当前值是否有效来设置输入样式，请参阅 表单数据验证。

模式验证

如果您需要对输入的电子邮件地址进行比“任何看起来像电子邮件地址的字符串”更严格的限制，您可以使用 pattern 属性来指定一个 正则表达式，该值必须匹配该正则表达式才能有效。如果指定了 multiple 属性，则逗号分隔值列表中的每个单独项都必须与 正则表达式匹配。

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

由于 email 类型的输入会根据标准电子邮件地址验证和指定的 pattern 进行验证，因此您可以轻松实现这一点。让我们看看如何做到这一点

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>

我们的 <form> 包含一个用于用户电子邮件地址的 email 类型的 <input>，一个用于输入 IT 消息的 <textarea>，以及一个类型为 "submit" 的 <input>，用于创建提交表单的按钮。每个文本输入框都关联着一个 <label>，以告知用户需要输入什么。

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

提供了一个适当的 placeholder——username@beststartupever.com——以演示什么是有效条目。此字符串既演示了应输入电子邮件地址，又建议它应该是一个公司 beststartupever.com 帐户。这除了使用 email 类型将验证文本以确保其格式像电子邮件地址这一事实之外。如果输入框中的文本不是电子邮件地址，您将收到一条错误消息，如下所示

如果我们到此为止，我们至少会验证合法的电子邮件地址。但我们希望更进一步：我们希望确保电子邮件地址实际上采用 [username]@beststartupever.com 的形式。这就是我们将使用 pattern 的地方。我们将 pattern 设置为 .+@beststartupever.com。这个正则表达式要求一个字符串，该字符串由至少一个任何类型的字符组成，然后是一个“@”，后面是域名“beststartupever.com”。

请注意，这甚至还不足以过滤有效的电子邮件地址；它允许诸如“ @beststartupever.com”（注意前面的空格）或“@@beststartupever.com”之类的东西，这两者都是无效的。但是，浏览器会同时运行标准的电子邮件地址过滤器和我们的自定义模式来针对指定的文本。因此，我们最终得到一个验证，它表示“确保这类似于一个有效的电子邮件地址，如果是，请确保它也是一个 beststartupever.com 地址。”

建议将 title 属性与 pattern 一起使用。如果这样做，title 必须描述模式。也就是说，它应该解释数据应采用的格式，而不是任何其他信息。这是因为 title 可能会作为验证错误消息的一部分显示或朗读。例如，浏览器可能会显示消息“输入的文本与所需模式不匹配。”，然后是您指定的 title。如果您的 title 是“电子邮件地址”之类的，结果将是消息“输入的文本与所需模式不匹配。电子邮件地址”，这不太好。

这就是为什么，我们指定字符串“请只提供 Best Startup Ever 公司电子邮件地址”。这样做，最终的完整错误消息可能类似于“输入的文本与所需模式不匹配。请只提供 Best Startup Ever 公司电子邮件地址。”

示例

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

作为额外的补充，<label> 元素用于为电子邮件输入框建立标签，其 for 属性引用了 <input> 元素的 emailAddress ID。通过以这种方式关联这两个元素，单击标签将使输入元素获得焦点。

<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 表单指南
• <input>
• <input type="tel">
• <input type="url">
• 属性
  • list
  • minlength
  • maxlength
  • multiple
  • pattern
  • placeholder
  • readonly
  • size