HTML5表单.docx
- 文档编号:2257818
- 上传时间:2023-05-03
- 格式:DOCX
- 页数:11
- 大小:98.72KB
HTML5表单.docx
《HTML5表单.docx》由会员分享,可在线阅读,更多相关《HTML5表单.docx(11页珍藏版)》请在冰点文库上搜索。
HTML5表单
最新HTML5表单元素
2012年11月22日• 来源:
一起CSS0条评论 874views datetime, html5表单, 表单元素
表单是页面中不可缺少的元素,没有表单,就没有现在如此生动,趣味的页面。
不过虽然表单很重要,但在HTML5之前,表单的元素不多,属性和方法也不多,很多属性和方法都是用JavaScript模拟的,用JavaScript模拟这些功能要花费不少的时间和精力。
如果用户能使用到这些模拟的功能,那么花费是值得的;如果用户客户端禁用JavaScript,那么这些功能将全部挂掉,时间和精力都白白浪费了。
HTML5出现之后,这一切都不同了。
HTML5增加的表单、表单类型以及表单属性,不但节省了开发者的时间,而且让更多应用成文可能。
下面来看看HMTL5新增表单类型的简单说明。
新增的input元素类型
类型
类型名称
功能描述
color
颜色选择器
输入颜色值的文本框
date
日期选择器
输入日期的文本框
datetime
日期时间选择器
输入UTC日期和时间的文本框
datetime-local
日期时间选择器(本地)
输入本地日期和时间的文本框
month
月份选择器
输入月份的文本框
time
时间文本框
输入时间的文本框
week
周选择框
输入周的文本框
邮件输入框
输入E-mail地址的文本框
number
数字输入框
输入数字的文本框,可以设置输入值的范围
range
数字滑动条
通过拖动滑动条改变一定范围内的数字
search
搜索输入框
输入搜索关键字操作的文本框
tel
电话号码输入框
输入电话号码
url
Web地址输入框
输入URL地址的文本框
也许你看到一些类型就知道它是用来干什么的,如email、date等,下面就来更详细的说明和在一些浏览器中的效果。
color
color类型用来选取颜色,它提供了一个颜色选取器,值为16进制符号,如:
#ff0000。
目前只在Opera和Blackberry浏览器中支持。
date
date类型是一个日期选择器,有了这个就不需要用JavaScript编写日历控件了,非常方便。
datetime 和datetime-local
datetime类型是用来输入UTC日期和时间的文本框,而datetime-local类型是用来输入本地日期和时间的。
它们与date类型的区别是后面多了一个时间框和“UTC”。
month和week
month类型是月份选择器,它的值为:
年-月,如:
2012-01;week类型是周选择器,它的值为:
年-W周数,如:
2011-W02。
time
time类型是时间文本框,可以手动输入或用右边上线箭头控制。
显示效果可以查看 datetime-local 效果的右边。
email和url
email类型用来输入E-mail地址,它会验证文本框内的内容是否为合法的E-mail地址。
url类型是用来输入url地址的,它会验证url地址是否合法。
number和range
number类型是专门用来输入数字的,并且在提交时会检验是否为数字。
number类型有max、min和step属性。
max是允许的最大值,min是允许的最小值,step是间隔。
设置了这些属性后,如果手动填入的数字不符合这些属性条件,将不能提交。
range类型是一个数字滑动条。
它与number类型功能类似,也有max、min和step属性,在Opera中,可以用左右方向键控制。
range类型自身没有一个明显的“数值”表示当前值,但可以使用output输出当前值。
search
search类型的是用来输入搜索关键词的文本框,它与text类型在功能都没有太大区别,只在外观上有细微的区别。
在Chrome10和Safari5中,当用户输入内容时,输入框右侧会有一个“×”按钮,单击该按钮,将清空输入框内的内容,使用非常方便。
tel
tel类型是用来输入电话号码的,它没有特殊的验证规则,不强制输入数字,因为各个国家、地区的电话号码不一样,但可以根据具体情况用 pattern 属性来验证。
在HTML5中,除了新增input元素的类型外,还新增了一些表单元素,如:
datalist、keygen、output等。
datalist
datalist元素是用来辅助表单中文本框输入的,它本身是隐藏的,与表单文本框的“list”属性绑定,即将“list”属性值设置为datalist元素的id值。
绑定成功后,当输入内容时,datalist元素以列表的形式显示在文本框的底部,提示输入字符的内容。
keygen
keygen用于生成页面的密钥。
一般情况下,如果表单中使用了该元素,在表单提交时,该元素将生成一对密钥:
一个保存在客户端,称为私密钥(PrivateKey);另一个发送至服务器,由服务器进行保存,称为公密钥(PublicKey),公密钥可以用于客户端证书的验证。
output
output元素用于显示各种不同类型表单元素的内容,如输入的值、JavaScript代码执行后的结果等。
该元素必须从属于某个表单,或通过属性指定某个表单。
为了获取表单的值,需要设置output元素的“onFormInput”事件,以便在表单输入框中输入内容是,监测到其中的值。
HTML5新增表单属性
HTML5不但新增加了表单元素、表单类型,还增加了一些表单属性,同时使用的话,能更好的提高率开发者的工作效率,同时也提高了用户的操作体验。
autocomplete
是否自动填充表单,默认值是no。
有些搜索引擎,如XX、google等,它们会自动匹配当前热门搜素,所以禁止表单自动填充。
此属性原本是Microsoft的专有属性,现在HTML5也支持了。
autofocus
自动聚焦。
加入这个属性后,页面加载时,光标会自动聚焦到加入了此属性的输入框。
比如登录页面,加入此属性后,页面加载后就可以直接输入,而不需要点击鼠标或使用Tab键聚焦后再输入。
form
HTML5之前,表单元素必须在表单里面,如input必须在form里面,而HTML5出现后,只要加上form属性,表单元素可以放到页面的任意位置。
formnovalidate和novalidate
表单的验证很重要,但有的时候出于某种特殊情况,不需要对表单验证时,可以使用formnavalidate或novalidate,它们都可以不验证提交表单,却别在于:
novalidate用户form标签;formnavalidate用于submit或image类型的提交按钮。
formmethod、formenctype、formnovalidate和formtarget
这几个属性和formnovalidate类似,将这些属性添加到submit按钮将会覆盖fomr元素对应属性的值或默认值。
例如,如果form元素中的method属性被设置为post,则当点击一个特定的按钮时,你可以使用formmethod=”get”覆盖它。
list
list属性规定输入域的datalist。
datalist是输入域的选项列表。
效果可以查看 datalist
min、max和step属性
min、max和step属性用于为包含数字或日期的input类型规定限定(约束)。
max属性规定输入域所允许的最大值;min属性规定输入域所允许的最小值;step属性为输入域规定合法的数字间隔(如果step=”3″,则合法的数是-3,0,3,6等)。
multiple
当设置为true是,表单可以有多个值,用英文逗号分隔。
例如,file类型的表单中加入此属性后,选择文件时,可以按住Ctrl进行多选。
pattern
使用正则表达式验证input元素的内容,和之前用JavaScript写正则验证一样,只是把正则表单写在pattern的值里。
placeholder
输入框占位符,常用作输入提示,如搜索框。
在光标聚焦时,占位符自动消失,不要担心还需要手动删除。
required
是否允许为空,加入了这个属性后,表单不允许为空。
如果为空,在提交的时候会出现相应的提示,并聚焦到该表单域。
上面的那些新增表单类型默认都不会验证是否为空,它们只会验证输入的内容是否合法。
上面就是HTML5主要的新增表单、表单类型以及属性,大部分都有配图,如果配图没看明白,你也可使用最新的Opera浏览器(目前这款浏览器对表单的支持情况较好)
HTML5给我们带来了更丰富的内容,更好的体验,虽然HTML5的普及道路是曲折的,但未来是光明的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 表单