HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程。HTML5 主要在以下几个方面对目前的Web表单做了改进:
HTML5之form标签
HTML <form> 元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。
** 属性accept-charset**
一个空格分隔或逗号分隔的列表,这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是,和包含这个form元素的文档相同的编码。
** action**
一个处理这个form信息的程序所在的URL。这个值可以被input或者button的formaction属性重载。
autocomplete
用于指示 input 元素是否能够拥有一个默认值,这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete
属性重载(覆盖)。 可能的值有:
off
在每一个用到的输入域里,用户必须显式的输入一个值,或者document 以它自己的方式提供自动补全;浏览器不会自动补全输入。
on
浏览器能够根据用户之前在form里输入的值自动补属性重载(覆盖)。
enctype
当 method属性值为 post 时
enctype 是提交form给服务器的内容的 MIME 类型 。
- application/x-www-form-urlencoded: 如果属性未指定时的默认值
- multipart/form-data 这个值用于一个 type 属性设置为 "file" 的 元素。
- text/plain (HTML5)
method
浏览器使用这种 HTTP 方式来提交 form. 可能的值有:
post
: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
get
: 指的是 HTTP GET 方法; 表单数据会附加在 URI action 属性中并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。
HTML中需要放在form之中的诸如input/button/select/textarea等标签元素,在HTML 5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来。
name
HTML5中,一个文档中的多个form当中,name必须唯一而不仅仅是一个空字符串。
**novalidate **
这个布尔类型的属性指示了,当提交时form是否没有被验证。 如果这个属性没有指定 (因此这个 form 是验证通过的).
二、新的控件类型
1.email输入类型:
<input type="email"></input>
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.
2.url输入类型:
<input type="url" ></input>
上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加
3.日期时间相关输入类型:
<input type="date"></input> <input type="time"></input> <input type="month"></input> <input type="week"></input>
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样。
4.number输入类型:
<input type="number"></input>
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值。
5.search输入类型:
<input type="search"></input>
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标。
6.tel输入类型:
<input type="tel"></input>
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别。
7.color输入类型:
<input type="color"></input>
此类型可让用户通过颜色选择器选择一个颜色值,并反馈到value中。
三、新的表单属性
1.placeholder属性
<input type="text" placeholder="点击我会以清除"></input>
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.
2.require/pattern属性
<input type="text" required=""></input> <input type="text" required="required"></input> <input type="text" pattern="^[1-9]\d{5}$"></input> 表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果。
3.autofocus属性
<input type="text" autofocus="true"></input> 默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus()。
4.list属性
<input type="text" list="ilist"> <datalist> <option label="a" value="a"></option> <option label="b" value="b"></option> <option label="c" value="c"></option> </datalist> </input> 该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容。
5.max/min/step属性:
<input type="range" max="100" min="1" step="20"> 限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯。
6.autocomplete属性:
<input type="text" autocomplete="on"> 此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能
.
7.data属性:
<select data="http://domain/getmyoptions"></select> 要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库,比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性,为select控件外联数据源!
8.XML Submission编码格式
我们一般常见的是Web Form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式,数据送到服务端,可以方便的存取。HTML5提供一种新的数据格式:XML Submission,即application/x-www-form+xml。简单的举例说[服务器端将直接接收到XML形式的表单数据。
HTML5对表单控件的更新,无疑是很振奋人心的。相信随着标准的深入开发以及浏览器对HTML5支持程度的进一步提升,设计一个简单易用的表单的工作,将变得非常轻松。