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

在HTML5增强的元素中，最值得关注的就是表单元素;在HTML5中，表单已经做了重大的修整，一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现,感兴趣的朋友可以详细了解下，或许对你有所帮助

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

本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com