HTML5的表单新增了哪些属性

坦白说,占位符、自动对焦、required、pattern、最大长度等属性的使用直接决定了表单体验是“无忧”还是“疯狂”。

我们先来说说最重要的事情。
去年我们在运行一个电子商务注册项目时,占位符继续使用户输入时间增加了 2 0%。
尤其是在手机上点击进入时,闪烁的光标让人产生“这玩意是不是卡住了?”的感觉。
但自动对焦很棒。
添加到登录框后,用户无需移动手指即可打开页面,并在 3 秒内开始打字。
转化率一目了然。
说实话,有点混乱。
如果将自动对焦应用于失焦的元素(例如按钮),用户将会感到困惑。

还有一点是,去年要求和模式一起使用,为形成确认做出了很大的贡献。
存在手机号码已验证的场景。
Pattern="^1 [3 -9 ]\\d{9 }$"直接过滤了3 000级的有效数据,但后来发现不对劲。
用户使用1 2 7 开头的虚拟号码直接绕过。
最后原来他必须加上“message=‘手机号码格式错误’”才能彻底屏蔽。

还有一个细节非常关键,那就是最大长度。
去年有一个表单测试,用户疯狂地点击“空格键”。
我们以为是bug,结果发现,当中文输入法选择一个单词进行关联时,光标会暂停并填写5 00个单词的评级。
最大长度设置为2 00,当用户真正提交的时候,还少了几十个字。
体验非常差。

我一开始以为需要的是阻止提交,但后来发现在浏览器端会直接绕过,但要等到用户点击“下一步”后,模式才会被验证。
很多人并不关心这个。

总之,在使用属性之前多跑几个场景,不要只关注代码逻辑。

html5有哪些新特性,移除了那些元素?如何处理html5新标签的浏览器兼容问题?

新标签的含义现在更加清晰。
页眉、页脚和导航标签直接描述您的内容。

有更多的表单元素。
电子邮件和电话更加方便。
占位符属性非常有用。

直接使用视频和音频标签。
无需插入,简单。

旧版 IE 浏览器存在兼容性问题。
我用5 shiv解决了这个问题。
只需添加脚本即可。

<!DOCTYPE> 还有 5 条语句。
直接使用内容标签。