这篇文章主要介绍了HTML5表单实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML5表单实例分析文章都会有所收获，下面我们一起来看看吧。
创新互联公司于2013年成立，是专业互联网技术服务公司，拥有项目网站设计、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元巨鹿做网站,已为上家服务,为巨鹿各地企业和个人服务,联系电话:13518219792
一、表单结构更自由
XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来. 比如:
二、多样的输入类型
(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示) email输入类型
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果. url输入类型
上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://. 日期时间相关输入类型(这些个很牛X的)
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.
number输入类型(这些个很牛X的)
这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.
range输入类型
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
search输入类型
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.
tel输入类型
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
color输入类型
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.
三、新增的表单属性
placeholder属性
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.
require/pattern属性
表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.
autofocus属性
INPUT autofocus="true">
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().
list属性
关于“HTML5表单实例分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML5表单实例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。