HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
来源: 阅读:1513 次 日期:2016-07-22 14:39:30
温馨提示: 小编为您整理了“HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注”,方便广大网友查阅!

在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时会让附属的表单控件获得焦点,比如:

代码如下:

点击"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

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

代码如下:

Select your favorite color:

Birthday:

Birthday (date and time):

Birthday (date and time):

Birthday (month and year):

Select a time:

Select a week:

Quantity (between 1 and 5):

Quantity(between 1 and 10):

Search Google:

Telephone:

Add your homepage:

E-mail:

下面这些是新增加的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上有效。看一个小例子:

代码如下:

Favorites

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

代码如下:

E-mail:

Image:

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

Select images:

Country code:

First Name:

Username:

Number:

First name:

Last name:

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

更多信息请查看 网页制作
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们| 联系我们| 人才招聘| 网站声明| 网站帮助| 非正式的简要咨询| 简要咨询须知| 新媒体/短视频平台| 手机站点| 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:
咨询QQ:1093837350(9:00—18:00) 版权所有:
云南网警报警专用图标
Baidu
map