数字立方HTML5精品教程-表单新功能简析

html5表单新功能解析

HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用,才能和服务器进行方便快捷的交互。HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它前端脚本语言(如:javascript),极大的解放了我们的双手。

表单结构更自由

XHTML中需要放在form之中的诸如inpu/button/s人员配置:elect/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来。

<form id="myform"></form>

<input type="text" form="myform" value="">
 

多样的输入方式

email输入类型

说明:此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型必须指定name值,否则无效果.

格式:<input type=email name=email>

url输入类型

说明:上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.

格式:<input type=url>

 

日期时间相关输入类型

说明:这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样..

格式:

<input type=date>

<inputtype=time>

<input type=month>

<input type=week>

<input type=datetime>

<input type=datetime-local/>

 

number输入类型

说明:输入一个数字字符,若未输入则会抛出一个错误

格式:

<input type="number" max=10 min=0 step=1 value=5/>

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value number 规定默认值

 

range滑块类型

说明:特定值的范围的数值,以滑动条显示

格式:

      <input type="range" max=10 min=0 step=1 value=5/>

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value number 规定默认值
 

search输入类型

说明:此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标。

格式:

<input type=search>

tel输入类型

说明:此此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.

格式:

<input type=tel>
 

color输入类型

说明:此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到该控件的value值中

格式:

<input type=color>

注意:此类型目前只适用于opera浏览器
 

placeholder属性

说明:这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.

格式:

<INPUT id=placeholder placeholder="点击我会以清除">
 

required/pattern属性

说明:这是html5新加的验证属性。

required类型,值不能为空,并会有一个提示。有两种写法,这个很有用。并且可以用于textarea以及hidden/image/submit类型

pattern类型为正则验证,可以完成各种复杂的验证。这两种类型必须指定name值,否则无效果。

格式:

<input id=placeholder name=require required>

<input id=placeholder name=require1 required="required">

<input name=require2 pattern="^[1-9]\d{5}$">
 

autofocus自动聚焦属性

说明:自动聚焦属性,可在页面加载时聚焦到一个表单控件,类似于js的focus()

格式:

<input autofocus="true">
 

4.autocomplete自动完成属性

说明:此属性是为表单提供自动完成功能。如果该属性为打开状态可很好地自动完成。一般来说,此属性必须启动浏览器的自动完成功能。

格式:

<input autocomplete="on/off">
 

novalidate 属性

说明:novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

格式:

<form action="demo_form.asp" method="get" novalidate="true">

6.multiple 属性

说明:multiple 属性规定输入域中可选择多个.multiple 属性适用于以下类型的 <input> 标签:email 和 file。

格式:

<input type="file" name="img" multiple="multiple" />
 

表单重写属性

说明:表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。表单重写属性适用于以下类型的 <input> 标签:submit 

表单重写属性有:

formaction - 重写表单的 action 属性

formenctype - 重写表单的 enctype 属性

formmethod - 重写表单的 method 属性

formnovalidate - 重写表单的 novalidate 属性

formtarget - 重写表单的 target 属性

 本信息来源于:成都数字立方信息技术有限公司 www.028cube.com 网站建设网站设计成都网站建设成都网站制作网站建设公司网站设计公司

微信网站建设分享 新浪网站建设分享 微博网站建设分享 空间网站建设分享

028-62319127    13408678913

扫描二维码
与销售顾问咨询

立即咨询
关闭