HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证。input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅。
新增属性一:autoconmplete
autoconmplete可以赋值为 on 或者 off。当为 on的时候,浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候,浏览器能把用户写过的值自动填写在相应的input框里。
现在很多网站都实现了这个功能,不过基本都是用php来实现的。用了这个属性,无疑可以减少很多前端和后台的交流量和工作量。
新增属性二:autofocus
autofocus 可以赋值为 autofocus,也就是在页面加载完成的时候自动聚焦到这个input标签,自然 type="hidden"的时候是不能用的。 这个也是一个比较常见的效果,至今为止的实现方法是用js。在页面加载完时执行聚焦操作,现在也被一个属性搞定了。
可以想象,一个页面至多只有一个input标签会设置 autofocus,否则必然不会达到预期效果。因为不可能同事聚焦在两个input上。
新增属性三:required
input的有一个强力新增属性,免去验证的麻烦。可以赋值为 required。
比如用户注册页面的用户名和密码都是必填的,只要设置一个required就可以了。而在以前是需要js来验证或者后台验证的。
注意:这里required属性是需要用户来填写的,所以TYPE是button、submit、reset、image等等不需要用户填写选择的类型是不可以使用这个属性的。
新增属性四:placeholder
这个新增属性也是非常使用,用在type= text email等等类型的时候,提示用户输入信息的格式或者内容等等。这个效果在之前也是需要js来实现的。
新增属性五:新增list属性---联想框效果
这个属性显示类似于百度搜索框那种联想框效果,也是非常实用的一个属性。
注意从这个属性使用的特点:需要有对应的datalist标签;datalist子标签option支持 value和lable两个属性;list的属性值要和datalist的id一致。
新增属性六: min、max属性来限制数值范围,minheight、maxheight属性来限制字符串长度。
其他新增属性: height、width设置高和宽 form、formaction、formmethod、fromtarget、formenctype等等属性来覆盖掉默认设置。
分享到:
相关推荐
该文件集齐的HTML5的新增属性和新增表单元素,文档中含有响应的代码演示。
HTML5中form表单的新增属性.ppt
主要介绍了HTML5新增属性data-*和js/jquery之间的交互及注意事项,需要的的朋友参考下吧
html5新增加标签和属性,有利于快速了解和掌握html5技术,实现快速上手
《响应式网页开发实战》教学课件03HTML5新增页面元素和属性.pdf《响应式网页开发实战》教学课件03HTML5新增页面元素和属性.pdf《响应式网页开发实战》教学课件03HTML5新增页面元素和属性.pdf《响应式网页开发实战》...
HTML5新增的属性和废除的属性.ppt
HTML5以进入实际应用,它的强大之处早有耳闻,下面来看一下html5中的新标签和属性。 HTML5中的新标签: <article> :定义article <aside>:定义页面内容之外的内容 <audio>:定义声音内容 <canvas>:定义图形
HTML5(软件品牌)-1期 06 教学课件_单元1_HTML5新增的属性.pdf 学习资料 复习资料 教学资源
1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=testform> <input type=text> <...
网络技术基础,HTML+CSS(含有新增HMTL5属性)~~~代码
盒子模型新增属性;;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性; 盒子模型新增属性;盒子模型新增属性;盒子模型...
HTML5表单中新增的input属性2.pdf 学习资料 复习资料 教学资源
HTML5表单中新增的input属性1.pdf 学习资料 复习资料 教学资源
HTML5表单中新增的input属性3.pdf 学习资料 复习资料 教学资源
主要为大家介绍了HTML5新增的表单元素和属性,具有一定的参考价值!需要的朋友可以参考下
HTML5表单中新增的input属性1案例.pdf 学习资料 复习资料 教学资源
HTML5表单中新增的input属性2案例.pdf 学习资料 复习资料 教学资源
2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6 HTML 5新增的语义元素 55 2.7 HTML 5头部和元信息 59 2.8 HTML 5新增的拖放API 63 2.9 本章小结 71 第3章 HTML 5表单相关的元素和属性 72 3.1...
html 5 新增语义化标签、智能表单 css 渐变、弹性盒相关知识总结 css 3D css 的一些其他属性