HTML input type email 类型
功能介绍
带有 “email” (电子邮箱)类型标记的输入框元素(<input>)能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。
在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址(非空值且符合电子邮箱地址格式). CSS伪标签 :valid 和 :invalid 能够在校验后自动应用。
注意: 不支持“电子邮件”类型的浏览器可以回退为标准的“文本”输入。
值
该<input>元素的value属性包含DOMString其自动验证为符合电子邮件语法。
更具体地说，将通过验证的三种可能的值格式：
- 一个空字符串（“”），表示用户未输入值或该值已被删除。
- 单个格式正确的电子邮件地址。这不一定意味着电子邮件地址存在，但至少已正确设置了格式。简而言之，这意味着"username@domain.tld"。当然，还有更多的东西。有关与电子邮件地址验证算法匹配的验证，请参见验证regexp。
- 当且仅当multiple指定了 属性时，该值才能是格式正确的电子邮件地址列表，并用逗号分隔。从列表中的每个地址中删除所有尾随和前导空格。
有关如何验证电子邮件地址以确保格式正确的详细信息，请参见验证。
使用电子邮件输入
电子邮件地址是网络上最频繁输入的文本数据表格; 登录网站，请求信息，允许订单确认，网络邮件等时使用它们。 因此，“电子邮件”输入类型可以使您作为Web开发人员的工作变得更加容易，因为它可以在构建电子邮件地址的用户界面和逻辑时帮助简化您的工作。 当您使用正确的类型值“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>，浏览器将提供指定的值作为电子邮件地址的潜在值。
通常以包含建议的弹出菜单或下拉菜单显示。
虽然特定的用户体验可能因浏览器而异，但是通常在编辑框中单击会显示建议的电子邮件地址的下拉列表。
然后，随着用户的键入，列表将被过滤以仅显示匹配的值。
每个键入的字符都会缩小列表的范围，直到用户进行选择或键入自定义值为止。
验证方式
有两种级别的内容验证可用于"email"输入。首先，为所有人提供了标准的验证级别<input>，这可以自动确保内容符合成为有效电子邮件地址的要求。但也可以选择添加其他过滤，以确保满足您自己的特殊需求（如果有）。
重要提示：HTML表单验证不能替代确保输入的数据格式正确的脚本。
对于某些人来说，调整HTML非常容易，因为它允许他们绕过验证，或者完全删除它。
某人也可以完全绕过您的HTML并将数据直接提交给您的服务器。 如果您的服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。
基本验证
支持“电子邮件”输入类型的浏览器会自动提供验证，以确保只有符合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”-to展示什么是有效的入口。该字符串既表明应该输入电子邮件地址，又表明它应该是公司的beststartupever.com帐户。
此外，使用type “email"可以验证文本以确保其格式像电子邮件地址一样。如果输入框中的文本不是电子邮件地址，则会收到一条类似以下内容的错误消息：
如果我们保留这些内容，那么至少将在合法的电子邮件地址上进行验证。但是，我们想更进一步：我们要确保电子邮件地址实际上是“ username @ beststartupever.com” 形式。
这是我们要使用的地方pattern。我们设置pattern为”.+@beststartupever.com"。这个简单的正则表达式要求一个字符串，该字符串包含至少一个任何类型的字符，然后是“ @”，后跟域名“ beststartupever.com”。
请注意，对于有效的电子邮件地址，这甚至还远远不够。它将允许诸如“ @ beststartupever.com”（请注意前导空格）或“ @@ beststartupever.com”之类的东西都无效。
但是，浏览器针对指定的文本同时运行标准电子邮件地址过滤器和我们的自定义模式。结果，我们得到了一个验证，验证结果为“确保这是一个有效的电子邮件地址，如果是，请确保它也是beststartupever.com地址。”
最好将title属性与一起使用pattern。如果这样做，则title 必须描述模式。也就是说，它应该说明数据应采用的格式，而不是其他任何信息。
那是因为title可能会在验证错误消息中显示或说出。例如，浏览器可能会显示消息“输入的文本与所需的模式不匹配”。其次是您指定的title。如果您输入的title是“电子邮件地址”之类的内容，则结果为消息“输入的文本与所需的模式不匹配。电子邮件地址”，这不是很好。
因此，我们指定字符串“请仅提供有史以来最佳创业公司的电子邮件地址”，这样做的结果是，完整的错误消息可能类似于“输入的文本与所需的模式不符。请仅提供一个最佳创业公司电子邮件地址。”
注意：如果在编写验证正则表达式时遇到麻烦，但它们不能正常工作，请检查浏览器的控制台；否则，请执行以下步骤。那里可能会有有用的错误消息，以帮助您解决问题。
例子
在这里，我们有一个电子邮件输入，其ID “emailAddress"的最大长度为256个字符。输入框本身实际为64个字符宽，并且在"user@example.gov"该字段为空时将其显示为占位符。
另外，通过使用该multiple属性，该框配置为允许用户输入零个或多个电子邮件地址，以逗号分隔，如允许多个电子邮件地址中所述。
作为点睛之笔，该list属性包含的标识<datalist>，其<option>S指定一组建议值，用户可以从中选择。
作为一项附加功能，该<label>元素用于为电子邮件输入框建立标签，其for属性引用"emailAddress"该<input>元素的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 value="jbourne@unknown.net">
<option value="nfury@shield.org">
<option value="tony@starkindustries.com">
<option value="hulk@grrrrrrrr.arg">
</datalist>
参考网站:https://developer.mozilla.org/zh/docs/web/html/element/input/email
