稻草日志分享:html5新增的表单属性

王亚兵7个月前 (09-19)HTML5CSS3121

通过前面文章的分享我想大家应该都已经了解到了我们所说的html5也就是h5,其实就是html的第五次重大改革。前面的文章中也和大家分享我们html5新增的一些语义化标签和一些多媒体标签。还有新增的input表单类型。可能我们发现html5比以往的html更加注重语义化和人性化,今天就给大家分享一下html5新增的人性化的表单属性

html5是什么新增表单属性

首先第一个介绍的表单属性是我们的placeholder属性。这个属性可以帮我们在表单的输入框中填充我们想要的一个占位符。这个时候可能会有人想到之前讲过的value属性。这两个属性还是不一样的,首先他们两个的含义本身就有区别,value是值的意思,而placeholder是占位符的意思。

html5是什么新增表单属性

接着是两者的字体颜色,value颜色比较深。而我们的placeholder颜色比较浅。他们的用户体验就不一样,如果我们想在输入框中输入想要的内容,用过用value来占位,可能要删除占位的文字。而我们的placeholder属性就不用,而且当我们输入框中不存在字符时,占位字符会再次的出现。两者对比效果如图。

第二个required属性,这个属性也是比较常用的。我们在注册一些平台账户的时候肯定会遇到有一些必须要填写的表单,他们可能就是利用了这个属性。在使用的过程中,只需要将属性值设置成它本身就可以了。比如下图效果。当输入框没有内容时我们提交表单会出现提示。

html5是什么新增表单属性

第三个autofocus属性,同样的他的属性值也是它的本身,这个时候有什么用呢?他的作用就是实现输入框的自动聚焦。我们前面讲到过一个标签就是label标签,他的作用是当用户点击词标签包裹的区域时就会聚焦到对应的i表单。而我们的autofocus只要页面加载就会自动聚焦到对应的表单输入框中,如图:

html5是什么新增表单属性

还有两个属性相对来说不是很常用,一个是autocomplete属性自动完成,他有两个属性值一个“on”,一个是“off”。这两个字符我想有过生活经验的人都能知道是干什么的,第一个是打开,第二个是关闭。这个属性打开之后,他就会在输入框中下面提示用户先前提交成功的关键词。但是在我们的实际应用中很少使用这个属性。而且要想使用这个属性就必须有name属性。效果如图:不过出于隐私,一般都是off比较好。

html5是什么新增表单属性

另一个是multiple属性。我们之前讲过一个file属性。就是上传我们的文件的。如果我们给它加上multiple属性,那么他就可以上传多个文件。这里就不掩饰了,他的属性值也很简单就是等于他自己。今天的分享到此结束,如果想了解更多关于html5的相关知识可以继续关注稻草日志。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。