上一章节讲了21个语义化的标签，这一节我们来讲表单标签，HTML5不仅仅给表单带来了新的标签，还给原来的标签带来了新的属性，这一节我们会来介绍介绍它们。

到目前为止，我们对HTML5的学习还是停留在新概念和新标签的学习，并没有涉及到很复杂的编程逻辑，所以初学者不用担心太难。我们会循环渐进，慢慢深入。

首先，我们来认识几个新的表单标签。

<datalist>标签：规定了 <input> 元素可能的选项列表。

一般会被用来在为<input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

我们来演示一个案例，大家就知道怎么用了：

    <input type="text" list="demo">    <datalist id="demo">         <option>javascript</option>         <option>css</option>         <option>html</option>         <option>reactjs</option>         <option>nodejs</option>    </datalist>

上面这个小代码，我们看得出，input标签的list属性值和datalist标签的id是一样的，没错，它们就是这样来相互关联起来的。当它们结合起来之后，不仅可以像select标签一样可以通过下拉来选择已有的选项，还可以根据用户输入的字符，对选项进行匹配筛选。

效果图如下：

（这是一个傲娇的gif图）

有了datalist标签，我们实现这种效果起来十分简单，不需要任何的JavaScript代码也能轻松实现。

<output>标签：标签定义不同类型的输出。比如脚本的输出、一些加减乘除的运算结果，我们都可以使用这个标签。

我们来举个例子：输入的数字乘以2后得到的结果，我们用output输出显示。

    <form οninput="b.value = parseInt(a.value)*2">        <input type="number" name="a">乘以2=        <output name="b"></output>    </form>

我们用oninput属性监听着表单的变化，并把得到的结果赋值到output标签的value。我们来看看效果图：

（这是一个傲娇的gif图）

其中，output标签是可以离开form表单标签的，但是，如果你这样做的话，必须给output标签添加form属性，其属性值是与其相关联form表单的id。

我们来将output移到form表单的外面试试：

<form id="demo" οninput="b.value = parseInt(a.value)*2">    <input type="number" name="a"> 乘以2=</form><output form="demo" name="b" for="a"></output>

跟上面的代码有几处不同之处，form标签多了一个id，值为“demo”，output标签被移到了form标签外面，不再是form标签的子节点，变成了兄弟节点（当然你可以把它移到文档的其他位置）。output标签还多了一个form属性，此时，它的值正好是form标签的id值：“demo”。这种写法，代码同样是奏效的。

下面这个标签相信大家很少用到，但是也是为了学习，我们来了解一下就好。

<keygen>标签：规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器，这种机制是专为使用基于Web的证书管理系统。

我在MDN（Mozilla Developer Network）的网站上看到了关于它的一些介绍：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大浏览器厂商还在讨论是否要保留它，在讨论结束之前，你最好还是别用它。

而另一段话则是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：虽然有些浏览器还支持它，但是这个特性已经被移除出web标准了，以后别使用它了。

讲了3个新的表单标签，下面我们来介绍HTML5给表单带来的新属性。

autocomplete 属性：可用在form标签和input标签，实现自动完成输入功能。它的值为：on（开启）/off（关闭）。

为了完成表单的快速输入，提高网站的交互性，autocomplete=“on“，浏览器提供了自动补全的功能。在用户输入的内容被保存的情况下，如果用户在表单再次输入相同的或部分相同的字符时，浏览器会提示相关内容，从而让你快速的完成表单的输入。

我们来看一个例子，我们在form标签就开启autocomplete 属性。然后在其中一个子节点input标签关闭autocomplete 属性。

    <form autocomplete="on">        <input type="text">        <input type="text" autocomplete="off">    </form>

这种写法的结果就是：第一个input标签实现了开启autocomplete，而第二个标签因为自己重新设置了autocomplete属性为off关闭，所以第二个输入域没有实现自动补全的效果。

novalidate属性：在提交表单时不应该验证 form 或 input 域。

如果表单中有一个输入域的类型是email，那么在提交表单的时候，浏览器会验证你输入的字符格式是否合法，若非法（不符合邮件格式类型），就会提示错误，阻止提交表单。

我们来看这个例子：

    <form>        <input type="email">        <input type="submit" value="save">    </form>

我们试着输入一个非法的email邮箱地址，然后提交，如下图：

浏览器会提示你邮箱地址格式不对，而novalidate属性，就是为了让表单可以忽略验证，直接提交表单数据。

它的用法如下：

    <form novalidate>        <input type="email">        <input type="submit" value="save">    </form>

autofocus 属性：在页面加载时，域自动地获得焦点。

这个很好理解，用法也很简单：

    <input type="text" autofocus>

设置了autofocus 属性的输入域，就会自动获得焦点，如图：

如果一个页面存在多个设置了autofocus属性的input标签，则只有第一个input标签才会获得焦点，其它的失效。

form 属性：规定input输入是属于哪个表单的。

这种情况，一般只会在当input标签不是form标签的子节点的情况下才会使用。如：

    <form id="demo">        <input type="text">        <input type="submit" value="save">    </form>

    <input type="text"  form="demo">

代码中一个input标签输入域放在了form表单的外面，但是表单提交的时候，也会带上这个输入域的数据。原因是因为外面的input标签通过form属性绑定了form表单的id。相当于对它说：“你提交数据的时候，别只顾着你的子节点啊，还记得带上我啊。“

formaction 属性：用于描述表单提交的URL地址。

咦，设置表单提交地址不是写在form标签的action属性吗？ 没错的确是这样。

但是formaction 属性可以让你把提交地址也在了提交按钮标签上。

    <form action="a.php">        <input type="text">        <!--两个提交按钮-->        <input type="submit" value="save1">        <input type="submit" value="save2" formaction="b.php">    </form>

正如上面的案例，form表单有两个submit类型的提交按钮，而设置了formaction 属性的提交按钮，会把数据提交到指定的地址，而没有设置formaction 属性的标签，就会提交到form表单action属性指定的地址。

这也是formaction 属性的适用场景：当一个表单有两个提交地址的时候。

既然是2个独立的提交地址，那么我们还可以设置它们的提交方式和数据编码。

formenctype 属性：描述了表单提交到服务器的数据编码（只对post的数据使用）。

formmethod 属性：定义了表单提交的方式。

    <input type="submit" value="save2" formenctype="multipart/form-data" formmethod="post"  formaction="b.php">

跟formaction 属性一样，也是设置于类型为submit的提交标签内。

在前面我们讲解过form表单的一个新属性novalidate，规定表单提交的时候不用验证数据。现在，同样的功能，你可以利用formnovalidate属性来实现，不同的是，formnovalidate 属性是属于input提交标签的属性，与input标签一起使用的。

formnovalidate属性：在表单提交时无需被验证。

    <input type="submit" formnovalidate value="save2">

input标签的formnovalidate 属性，会覆盖<form> 元素的novalidate属性设置。

formtarget 属性：规定表单数据提交后跳转到的窗口。

这个属性也是结合type=“submit“的input标签一起使用的，我们可以让表单数据提交之后跳转到一个新窗口展示。只要我们设置formtarget属性的值为”_blank”。

    <input formtarget="_blank"  type="submit"  value="save2">

是不是觉得和<a>标签的target属性很相似？

我们知道，如果input标签的类型为email的时候，我们输入的内容要符合邮箱地址的格式，才能通过验证。那么，如果我们想浏览器帮我验证自定义的规则，怎么办呢？我们可以利用input的新属性pattern属性。

pattern 属性：描述一个正则表达式用于验证 <input> 元素的值。

我们来编写一个简单的正则：[0-9]{3}。（3个0-9的数字）

    <input type="text" pattern="[0-9]{3}">

如果我们在输入域输入的字符不符合这个匹配规则，就会阻止表单数据的提交。如下图：

由于上面我们输入的字符不是3个数字，自然就会提示格式错误了。

此外，如果你想某个输入域是必填的，你可以利用pattern属性编写对应的正则来验证，但是，现在你大可不必这么干，HTML5给input标签带来了一个专门干这事的新属性：required。

required 属性：规定必须在提交之前填写输入域（不能为空）。

用法很简单，如下：

    <input type="text" required>

如果在提交的时候，输入域为空，浏览器就会提示：

有了这个属性，你再也不用写JavaScript和正则来判断是否为空了。

placeholder 属性：提示用户输入域所期待的值。

这是个最常用的属性了，同学们一定没少用吧。

    <input type="text" placeholder="请输入用户名">

效果图如下：

（这是一个傲娇的gif图）

除了新增了表单这些属性外，HTML5还单独给input标签带来了不同的类型type，方便又实用。我们一起来看看！

color 类型：用在input字段主要用于选取颜色。

    <input type="color">

效果如下：

所选择的颜色值可以能通过获取input标签的value值得到。

email 类型：包含 e-mail 地址的输入域。

前面也有介绍过，相信你也不会陌生这个类型。

    <input type="email">

外观跟普通的输入域的外观没啥两样，但是，在提交表单数据的时候会进行内容格式验证，不符合邮箱地址格式的内容，会被阻止提交，并提示错误，如下图：

number 类型：用于应该包含数值的输入域。

    <input type="number">

我们还可以通过min属性和max属性来设置它数值范围：

    <input type="number" min="0" max="5">

我们把数值的范围设置在0~5之间，效果图如下：

（这是一个傲娇的gif图）

我们每改变一下数值，它的增量幅度都为1，我们通过step属性来控制增量幅度。还可以设置value来规定默认值。

如果number类型使用在手机上，当输入域获得焦点打开手机键盘的时候，会默认打开数字键盘，方便用户使用。

range 类型：包含一定范围内数字值的滑动组件。

    <input type="range" min="0" max="5">

这样，就规定了这个组件的可选值的范围为：0~5。

效果：

search 类型：用于搜索域。

    <input type="search">

外观效果和普通输入域类似。

tel 类型：用于电话号码输入域。

    <input type="tel">

外观效果和普通输入域一样，不同的是在手机端使用，获得焦点的时候会自动调出系统的数字键盘，方便用户输入，跟number类型一样。

url 类型：用于包含 URL 地址的输入域。

    <input type="url">

在提交表单时，会自动验证 url 域的值。如果，不符合url的格式，会阻止表单数据提交，并提示错误，如图：

date 类型：定义一个日期选择器。

    <input  type="date">

效果如下：

（这是一个傲娇的gif图）

datetime 类型：选择一个日期和时间（世界统一时间）。

    <input type="datetime">

目前浏览器对此类型的支持并不完善，主流浏览器几乎都不支持，慎用！

datetime-local类型：选择一个日期和时间 (无时区)。

    <input type="datetime-local">

效果图如下：

如果是移动端使用，会调用系统默认的日期时间选择组件，十分方便。

month 类型：选择一个月份。

    <input type="month">

效果图如下：

time 类型：选择一个时间。

    <input type="time">

效果图：

week 类型：选择周和年。

    <input type="week">

效果图如下：

用户可以选择某一年的第几个周。

很多同学会发现，在日常的开发中，我们会使用第三方插件来完成日期时间选择。但这些新增的input类型，更多地是为了更好的服务移动端的开发者和用户。

学完本节，你应该学会了：

1. 新增的3个表单标签

2. 新增的12个新表单属性

3. 新增的13个新input类型