在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输入框而已。
分享到:
相关推荐
HTML5针对国内移动终端的可行性调研 背景 2 HTML5手机浏览器兼容性调查 3 1.1简介 3 1.2主流手机浏览器对HTML5和CSS3的兼容...第四章 HTML5扩展 24 Kaltura HTML5 25 FlareVideo 25 Projekktor 25 第五章 调研总结 25
泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素的长度.docx
泛微OA开发技巧作业流程表单HTML扩展开发推荐设计器实现设置表单元素的长度.docx
泛微OA【开发技巧】流程表单HTML扩展开发(推荐:设计器实现设置表单元素的长度).docx
设计页面的结构 – HTML:这个过程是使用各种HTML元素构建网页的结构。2.设计页面的外观 – CSS:这个过程是使用CSS去改善网页的外观。3.设计页面的行为 – Javascript:这个过程是给网页的元素赋予一定的行为。上面...
《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念,设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局,注重...
360安全浏览器的垃圾桶扩展, 自助过滤网页上的不良信息, 支持 Ctrl+鼠标右键点击 将指向的网页元素丢入垃圾桶. 丢入垃圾桶的垃圾信息将立刻消失,并且会在以后浏览网页时被过滤掉. 同时也支持撤销操作, 撤销后会即时...
CSS-Diff, Chrome 扩展,可以轻松比较两个HTML元素的CSS CSS差异Chrome/Chromium 扩展,可以轻松比较两个HTML元素的CSS 。 用法你可以从它的 Chrome 网上商店页面安装这个扩展,或者从GitHub下载它,并通过扩展页面...
Ai->Canvas 插件使 Adobe Illustrator 能够使用 JavaScript 绘图命令将矢量和位图作品直接导出到 HTML5 画布元素。可以添加动画来控制沿路径的旋转、缩放、不透明度和运动。然后,可以使用事件来触发其他动画。...
单元一 HTML5基础知识端基础前WebHTML5多媒体标签1常用多媒体格式2播放音频audio播放视频video34其他多媒体标签1常用多媒体格式音频格式1、WAV 微软和IBM共同...2使用音频HTML5 规定了一种通过 audio 元素来包含音频
logical_html5:Contao扩展::语义html5标签作为内容元素
Chrome / Chromium扩展程序,可以轻松比较两个HTML元素CSS。 用法 您可以通过从GitHub下载该扩展程序并通过chrome扩展程序页面( chrome://extensions )将其手动加载为“未打包的扩展程序”来进行安装。 要比较...
AudioPick Chrome扩展程序,用于为HTML5音频和视频元素选择默认的音频输出设备这个怎么运作该扩展在文档树中找到HTML5音频和视频元素,并操作sinkId以便切换到所需的音频输出设备。 该扩展程序不会,也永远不会找到...
新千年以来,超文本标记语言(HTML)5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。新的交互元素有 ...
SnappySnippet Chrome / Chromium扩展程序,可以轻松地通过CSS + HTML提取特定DOM元素。 创建的代码段然后可以一键导出到CodePen,jsFiddle或JS Bin。 其他特性: 清理HTML(删除不必要的属性,修复缩进) 优化CSS以...
6、利用新的HTML5的元素,例如,文章,节,页脚,页眉 7、Web应用程序扩展到移动设备,如iPhone,Android和HTML5的2.0 WebOS手机 8、实现Web应用程序中的API的地理定位 9、采用类似于SQL的本地数据存储到您的网络...
...