3.2 E-Mail类型的input标签
HTML 5表单为input标签设计了几个全新的type类型，本节介绍E-Mail类型。设置成E-Mail类型的input标签可以在表单提交时自动验证其中的内容是否为合法的E-Mail类型地址，这样就降低了传统JS脚本语言验证时的复杂度。
下面我们看一段在HTML 5表单中使用E-Mail类型的代码，这段代码（参见源代码chapter03/ch02-HTML 5form-input-email.html文件）给出一种使用E-Mail类型的input标签的方法。
【示例3-1】 E-Mail类型的input标签的使用
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <script type="text/css">
06 label {
07 margin: 4px;
08 width: 96px;
09 text-align: justify;
10 }
11 input {
12 margin: 4px;
13 }
14 </script>
15 <title>HTML 5表单之E-mail类型input标签</title>
16 </head>
17 <body>
18 <!-- 添加文档主体内容 -->
19 <h3>HTML 5表单之E-mail类型input标签</h3>
20 <!-- 添加文档主体内容 -->
21 <form action="#" method="get" autocomplete="on">
22 <label for="name">用户名:</label><br>
23 <input type="text" id="name" /><br/>
24 <label for="pwd">密 码:</label><br>
25 <input type="password" id="pwd" /><br/>
26 <label for="email">E-mail:</label><br>
27 <input type="email" id="email" autocomplete="off" /><br/><br/>
28 <input type="submit" />
29 </form>
30 <!-- 添加文档主体内容 -->
31 </body>
32 </html>
在这段HTML代码中，定义了一个form表单及一些标签。下面我们详细介绍。
第21～29行代码通过form标签定义了一个HTML 5表单，其中action属性定义为提交到当前页面，method属性定义为get方式，并定义了autocomplete自动完成属性。
第22～23行代码定义了一个type="text"类型的input标签，用于输入用户名称。
第24～25行代码定义了一个type="password"类型的input标签，用于输入登录密码。
第26～27行代码定义了一个type="email"类型的input标签，用于输入电子邮箱地址。其中，type="email"类型的input标签就是HTML 5表单新增加的特性，提交时可以自动完成对电子邮件地址类型的验证。第27行代码定义E-Mail类型的input标签时还增加了autocomplete="off"属性的定义，关闭了input标签的自动完成功能。
第28行代码定义了一个type="submit"类型的input标签，用于提交HTML 5表单。
运行测试这个页面，效果如图3.1所示。从图中可以看到，当用户在E-Mail类型的input标签中输入不合法的电子邮件地址时，该input标签的边框会自动加粗变成红色，提示用户输入有误。
下面单击“提交查询”按钮运行测试这个页面，效果如图3.2所示。从图中可以看到，如果用户不理会提示错误，强行单击“提交查询”按钮，页面就会弹出一个Tooltip提示窗口，告诉用户“请输入电子邮件地址。”，这就是HTML 5表单的新特性，内部实现了以前使用脚本语言才能完成的验证功能，真的很强大。
图3.1 E-Mail类型的input标签的使用（1）
图3.2 E-Mail类型的input标签的使用（2）
在表单提交成功后，按F5键刷新这个页面，效果如图3.3所示。从图中可以看到，重新刷新页面后，Text类型的input标签的内容保留下来了，而Password类型和E-Mail类型的input标签的内容被清空了，这就是前面提到的HTML 5表单的自动完成新特性。
图3.3 E-Mail类型的input标签的使用（3）