HTML5表单之新的表单元素

三、 新的表单元素

除了之前提到的对于input元素新增的类型和属性之外，html5还新增了几个有用的元素。下面也来介绍一下。

点击这里查看效果

1、 meter--显示度量

这个元素的应用很简单，只需要定义这样一个标签就可以

<meter value=”百分比”></meter>

其中百分比可以通过js计算出来再动态的改变标签的value属性，当然了，该标签还有一些其他的属性，比如low、high、optimum、min、max这里就不一一距离了，想知道的可以去w3cschool上面了解一下

2、 progress—显示任务进程

很多做过文件上传，文件下载的时候会给用户呈现一个进度百分比的页面，这个元素的经典应用就是这种情况了。

该元素的定义如下

<progress value=0 max=10 id=pb></progress>

其中value表示百分比的分子，max表示百分比的分母，显示的内容就是计算出来的百分比

3、 datalist---选项列表

这个标签可以说是太有用了，他可以完成很多东西，比如说输入一个字符后自动匹配供用户选择的列表，双击空白可以跳出所有列表，而且datalist的内容可以放在页面任意位置，只需要指定一个id，同时需要调用的input元素添加一个list=”datalistId” 的属性即可，html差不多类似下面这样.

<input type="text" id="list" name="list" list="url">
<datalist id="url">
      <option>www.wanggp.com</option>
      <option>my.wanggp.com</option>
      <option>www.google.com</option>
</datalist>

其实还有其他几个新增的元素，包括keygen、output等，但是实用性没有以上几个来的强，所以就不介绍了（我自己都没怎么搞明白。。）。

上面介绍的几个呢，给我们展示了一个美好的前端发展方向，作为攻城湿，可以省去很多的时间，但是就目前国内的形式来看，我们还是只能够看看，想要普遍应用这些不太现实。so，插件还是需要的，技术也是要了解的，毕竟养兵千日用兵一时，面试的时候提一提也能加分不少。

接下来要写的是重头戏，客户端表单验证，到时候我会连JS代码一起贴上来，这样比较容易理解，同时会配上一个注册信息提交的页面。敬请期待。