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>a.com</option>
  <option>b.com</option>
  <option>c.com</option>
</datalist>

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

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


原文链接:,转发请注明来源!
「HTML5表单之新的表单元素 」评论列表

发表评论