3.3 URL类型的input标签
本节介绍HTML 5表单为input标签设计的另一个全新的type类型—URL类型。设置成URL类型的input标签可以在表单提交时自动验证其中的内容是否为合法的URL类型地址。
下面我们看一段在HTML 5表单中使用URL类型的代码，这段代码（参见源代码chapter03/ch02-HTML 5form-input-url.html文件）给出一种使用URL类型的input标签的方法。
【示例3-2】 URL类型的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表单之URL类型input标签</title>
16 </head>
17 <body>
18 <!-- 添加文档主体内容 -->
19 <h3>HTML 5表单之URL类型input标签</h3>
20 <!-- 添加文档主体内容 -->
21 <form action="#" method="get">
22 <label for="url">URL:</label><br>
23 <input type="url" id="url" style="width: 256px" autocomplete="off"
/><br/><br/>
24 <input type="submit" value="提交网址" />
25 </form>
26 </body>
27 </html>
在这段HTML代码中，定义了一个form表单及一个input标签。下面我们详细介绍。
第21～25行代码通过form标签定义了一个HTML 5表单，其中action属性定义为提交到当前页面，method属性定义为get方式。
第22～23行代码定义了一个type="url"类型的input标签，用于输入URL类型地址。其中，type="url"类型的input标签就是HTML 5表单新增加的特性，提交时可以自动完成对URL地址的验证。第23行代码定义URL类型的input标签时还增加了autocomplete="off"属性的定义，关闭了input标签的自动完成功能。
第24行代码定义了一个type="submit"类型的input标签，用于提交HTML 5表单。
运行测试这个页面，效果如图3.4所示。从图中可以看到，当用户在URL类型的input标签中输入不合法的URL地址时，该input标签的边框会自动加粗变成红色，提示用户输入的URL地址有误。
下面单击“提交网址”按钮运行测试这个页面，效果如图3.5所示。从图中可以看到，如果用户不理会提示错误，强行单击“提交网址”按钮，页面就会弹出一个Tooltip提示窗口，告诉用户“请输入一个URL。”，这就是HTML 5表单的新特性。
图3.4 URL类型的input标签的使用（1）
图3.5 URL类型的input标签的使用（2）