表单是页面中不可缺少的元素,在 HTML5 之前,表单的元素不多,属性和方法也不多,很多属性和方法都是用 JavaScript 模拟的,如果用户客户端禁用 JavaScript,那么这些功能将全部挂掉,时间和精力都白白浪费了。

现在HTML5 增加的表单、表单类型以及表单属性,不但节省了开发者的时间,而且让更多应用成文可能。下面来看看 HMTL 5 新增表单类型的简单说明。


新增的 input 元素类型

类型 类型名称 功能描述
color 颜色选择器 输入颜色值的文本框
date 日期选择器 输入日期的文本框
datetime 日期时间选择器 输入 UTC 日期和时间的文本框
datetime-local 日期时间选择器(本地) 输入本地日期和时间的文本框
month 月份选择器 输入月份的文本框
time 时间文本框 输入时间的文本框
week 周选择框 输入周的文本框
email 邮件输入框 输入 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 类型在功能都没有太大区别,只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中,当用户输入内容时,输入框右侧会有一个“×”按钮,单击该按钮,将清空输入框内的内容,使用非常方便。

tel
tel 类型是用来输入电话号码的,它没有特殊的验证规则,不强制输入数字,因为各个国家、地区的电话号码不一样,但可以根据具体情况用 pattern 属性来验证。

在 HTML 5 中,除了新增 input 元素的类型外,还新增了一些表单元素,如:datalist、keygen、output 等。

datalist
datalist 元素是用来辅助表单中文本框输入的,它本身是隐藏的,与表单文本框的“list”属性绑定,即将“list”属性值设置为 datalist 元素的 id 值。绑定成功后,当输入内容时,datalist 元素以列表的形式显示在文本框的底部,提示输入字符的内容。

keygen
keygen 用于生成页面的密钥。一般情况下,如果表单中使用了该元素,在表单提交时,该元素将生成一对密钥:一个保存在客户端,称为私密钥(Private Key);另一个发送至服务器,由服务器进行保存,称为公密钥(Public Key),公密钥可以用于客户端证书的验证。

output
output 元素用于显示各种不同类型表单元素的内容,如输入的值、JavaScript 代码执行后的结果等。该元素必须从属于某个表单,或通过属性指定某个表单。为了获取表单的值,需要设置 output 元素的“onFormInput”事件,以便在表单输入框中输入内容是,监测到其中的值。

HTML 5 新增表单属性
HTML 5 不但新增加了表单元素、表单类型,还增加了一些表单属性,同时使用的话,能更好的提高率开发者的工作效率,同时也提高了用户的操作体验。

autocomplete
是否自动填充表单,默认值是 no。有些搜索引擎,如百度、google 等,它们会自动匹配当前热门搜素,所以禁止表单自动填充。此属性原本是 Microsoft 的专有属性,现在 HTML 5 也支持了。

autofocus
自动聚焦。加入这个属性后,页面加载时,光标会自动聚焦到加入了此属性的输入框。比如登录页面,加入此属性后,页面加载后就可以直接输入,而不需要点击鼠标或使用 Tab 键聚焦后再输入。

form
HTML 5 之前,表单元素必须在表单里面,如 input 必须在 form 里面,而 HTML 5 出现后,只要加上 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
是否允许为空,加入了这个属性后,表单不允许为空。如果为空,在提交的时候会出现相应的提示,并聚焦到该表单域。上面的那些新增表单类型默认都不会验证是否为空,它们只会验证输入的内容是否合法。


原文url:http://www.17css.com/html-5-form/#more-887