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


Posted in HTML / CSS onJanuary 31, 2013

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

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

在HTML5中

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

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

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="Submit" />
</form>

点击"Click Me",则后面的输入框会获得焦点。

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

颜色:color
各种日期:date, datetime, datetime-local, month, week, time
电子邮件:email
数字:number
范围:range
搜索:search
电话:tel
URL类型:url

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

复制代码
代码如下:

<form action="demo_form.asp">
Select 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" />
Select a time: <input type="time" name="usr_time" />
Select 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" />
Search Google: <input type="search" name="googlesearch" />
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, search, 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提交后response的内容。
height, width:输入框长和宽,只适用于image类型。 
max,min:输入值的最大值和最小值。适用于有意义的number,range, 日期类型。

multiple:是否允许输入多个值,适用于email和file类型。
pattern:指定验证输入值的正则表达式,适用于text,search,url,tel,email,password。
placeholder:输入前的提示信息,适用于text,search,url,tel,email,password。
required:是否是必填项,如果不填必填项,则表单不能提交,适用于text, search, url, tel, email, password, date pickers, number, checkbox, radio, 和file类型。
step:输入自动增长时的步长值,适用于number, range, date, datetime, datetime-local, month, time和week类型。
list:输入项的候选列表,需要和datalist元素配合使用,list属性可用在这些类型上:text、search、url、tel、email、date、number、range和color,目测在FireFox上有效。看一个小例子:

复制代码
代码如下:

<fieldset>
<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>
</fieldset>

下面的例子尝试使用了各个属性,可以运行在不同的浏览器下查看实际效果:
复制代码
代码如下:

<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" />
Select 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" />
Username: <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" 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的教程:http://www.w3schools.com/html5/default.asp
HTML5官方指导:http://dev.w3.org/html5/html-author/
相当不错的一个指导网站:http://html5doctor.com/
HTML5中文教程:http://www.html5china.com/
一个不错的前端博客:http://www.pjhome.net/default.asp?cateID=1
JS操作表单的相关知识:http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 #HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 #HTML / CSS
You might like
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
python 常用的基础函数
2018/07/10 Python
Django forms组件的使用教程
2018/10/08 Python
详解Python 正则表达式模块
2018/11/05 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
pandas参数设置的实用小技巧
2020/08/23 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
装修五一活动策划案
2014/01/23 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
安全标准化实施方案
2014/02/20 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
行政专员求职信范文
2014/05/03 职场文书
酒桌上的开场白
2015/06/01 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
家电创业计划书
2019/08/05 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python