HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

在html5增强的元素中，最值得关注的就是表单元素。在html5中，表单已经做了重大的修整，一些以前需要通过javascript编码实现的功能现在无需编码就可轻松实现。在开始讨论之前，需要注意一点：

在html5中，表单控件是可以处于其所属的一个或多个表单的外部的。所以，表单控件像fieldt，label，input这些都加入了form属性，用于标识表单控件所属的表单。

在html5中：

1. form元素自身增加了两个新的属性：autocomplete和novalidate。autocomplete属性用于启用“下拉建议列表”功能，novalidate属性用于关闭表单验证功能，这在测试时会很有用。

2. fieldt元素增加了三个新属性：disable、name和form。disable属性用于禁用fieldt，name属性用于设置fieldt的名称，form属性的值是fieldt所属的一个或多个表单的id，这个前面也说了，当fieldt被置于表单的外部时，你必须设置该fieldt标签的form属性，这样fieldt就可以正确地与一个或多个表单关联起来。

3. label元素除for属性外，只增加了form高考时间安排属性。这里值得一提的是for属性，我以前还真没注意过。for属性用于指定label附属的表单控件，这样点击这个label时会让附属的表单控件获得焦点，比如：

复制代码 代码如下:

<form action=”demo_form.asp” id=”form1″>

<label for=”name”>click me</label><input id=”name” type=”text”></input>

<input type=”submit” value=&高考是几月份#8221;submit” />

</form>

点击”click me”，则后面的输入框会获得焦点。

4. input元素引入了一些新的类型与属性，增强了表单的可用性。这些新的输入类型，用于对数据进行组织和归类，非常有用，遗憾的是并没有哪一个浏览器能很好的支持所有的这些类型。
除了原来button,text,submit,checkbox,radio,lect,password的类型，html5加入了下列新的input类型：

颜色：color

各种日期：date,datetime,datetime-local,month,week,time

电子邮件：email

数字：number

范围：range

搜索：arch

电话：tel

url类型：url

可以运行下面的例子来查看不同浏览器的支持情况：

复制代码 代码如下:

<form action=”demo_form.asp”>

lect your favorite color: <input type=”color” name=”favcolor” />

birthday: <input type=”date” name=”bday” />

birthday (date and time): <input type=”datetime” name=”bdaytime” />

birthday (date and time): <input type=”datetime-local” name=”bdaytime” />

birthday (month and year): <input type=”month” name=”bdaymonth” />

lect a time: <input type=”time” name=”usr_time” />

lect a week: <input type=”week” name=”week_year” />

quantity (between 1 and 5): <input type=”number” name=”quantity” min=”1″ max=”5″ />

quantity(between 1 and 10): <input type=”range” name=”points” min=”1″ max=”10″ />

arch google: <input type=”arch” name=”googlearch” />

telephone: <input type=”tel” name=”usrtel” />

add your homepage: <input type=”url” name=”homepage” />

e-mail: <input type=”email” name=”usremail” />

<input src=”submitbutton.png” type=”submit” />

</form> 北美小鳄龟

下面这些是新增加的input属性：


autocomplete：自动显示以前输入过的信息，取值”on”或者”off”。适用于text, arch, url, tel, email, password, datepickers, range, and color类型。

autofocus：页面加载完成后自动获取到焦点。
form：指定input所属的form，可以是多个。
formaction：指定form提交后处理这个input的页面(url)或文件。　　
formenctype：指定form提交后数据如何编码。
formmethod：指定发送form数据的http方法，会覆盖相应form的http方法。
formnovalidate：提交前不检查数据的有效性。
formtarget：指定在那个地方显示form提交后respon的内容。
height, width：输入框长和宽，只适用于image类型。　
max，min：输入值的最大值和最小值。适用于有意义的number,range, 日期类型。　　
multiple：是否允许输入多个值，适用于email和file类型。
pattern：指定验证输入值的正则表达式，适用于text,arch,url,tel,email,password。
placeholder：输入前的提示信息，适用于text,arch,url,tel,email,password。
required：是否是必填项，如果不填必填项，则表单不能提交，适用于text, arch, url, tel, email, password, date pickers, number, checkbox, radio, 和file类型。
step：输入自动增长时的步长值，适用于number, range, date, datetime, datetime-local, month, time和week类型。
list：输入项的候选列表，需要和datalist元素配合使用，list属性可用在这些类型上：text、arch、url、tel、email、date、number、range和color，目测在firefox上有效。看一个小例子：

复制代码 代码如下:

<fieldt>

<legend> favorites </legend>

<p>

<label>

<input type=”text” name=”favorites” list=”options”>

<datalist id=”options”>

<option value=”a”>

<option value=”b”>

<option value=”c”>

</datalist>

</label>

</p>

</fieldt>

下面的例子尝试使用了各个属性，可以运行在不同的浏览器下查看实际效果：

复制代码 代码如下:

<form action=”demo_form.asp”>

e-mail: <input type=”email” name=”email” autocomplete=”on” />

image: <input type=”image” src=”img_submit.gif” alt=”submit” width=”48″ height=”48″/>

enter a date before 1980-01-01:<input type=”date” name=”bday” max=”1979-12-31″>

enter a date after 2000-01-01:<input type=”date” name=”bday”黄河之水天上来; min=”2000-01-02″>

quantity (between 1 and 5):<input type=”number” name=”quantity” min=”1″ max=”5″ />

lect images: <input type=”file” name=”img” multiple=”multiple” />

country code: <input type=”text” name=”country_code” pattern=”[a-za-z]{3}” title=”three letter country code” />

first name: <input type=”text” name=”fname” placeholder=”first name” />

urname: <input type=”text” name=”usrname” required=”required” />

number: <input type=”number” name=”points” step=”3″ />

<input type=”submit” />

<input type=”submit” formaction=”demo_admin.asp” value=”submit as admin” />

<input type=”submit” formenctype=”multipart/form-data内切圆性质221; value=”submit as multipart/form-data” />

<input type=”submit” formmethod=”post” formaction=”demo_post.asp” value=”submit using post” />

<input type=”submit” formnovalidate=”formnovalidate” value=”submit without validation” />

<input type=”submit” formtarget=”_blank” value=”submit to a new window” />

</form>

<form action=”demo_form.asp” id=”form1″>

first name: <input type=”text” name=”fname” />

<input type=”submit” value=”submit” />

</form>

last name: <input type=”text” name=”lname” form=”form1″ />

建议：虽然并不是所有的浏览器都支持全部的类型，但是还是鼓励大家使用这些新类型，因为即使浏览器不支持，只不过是会退化成简单的text输入框而已。

实用参考：
w3c的教程：
html5官方指导：
相当不错的一个指导网站：
html5中文教程：
一个不错的前端博客：http://www.pjhome.net/default.asp?cateid=1
js操作表单的相关知识：