HTML 5 表单

日期：2012-01-10 分类：前端技术

表单是页面中不可缺少的元素，没有表单，就没有现在如此生动，趣味的页面。不过虽然表单很重要，但在 HTML 5 之前，表单的元素不多，属性和方法也不多，很多属性和方法都是用 JavaScript 模拟的，用 JavaScript 模拟这些功能要花费不少的时间和精力。如果用户能使用到这些模拟的功能，那么花费是值得的；如果用户客户端禁用 JavaScript，那么这些功能将全部挂掉，时间和精力都白白浪费了。 HTML 5 出现之后，这一切都不同了。HTML 5 增加的表单、表单类型以及表单属性，不但节省了开发者的时间，而且让更多应用成文可能。下面来看看 HMTL 5 新增表单类型的简单说明。

新增的 input 元素类型

也许你看到一些类型就知道它是用来干什么的，如 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" 覆盖它。

<form action="check.php" method="post">
	<label for="username">帐号：</label>
	<input id="username" name="username"><br>
	<label for="password">密码：</label>
	<input type="password" id="password" name="password"><br>
	<input type="button" value="用户登录">
	<input type="button" formmethod="post" value="以get方式提交">
</form>

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

是否允许为空，加入了这个属性后，表单不允许为空。如果为空，在提交的时候会出现相应的提示，并聚焦到该表单域。上面的那些新增表单类型默认都不会验证是否为空，它们只会验证输入的内容是否合法。

上面就是 HTML 5 主要的新增表单、表单类型以及属性，大部分都有配图，如果配图没看明白，你也可使用最新的 Opera 浏览器（目前这款浏览器对表单的支持情况较好）点击这个 Demo 自行测试。

HTML 5 给我们带来了更丰富的内容，更好的体验，虽然 HTML 5 的普及道路是曲折的，但未来是光明的。

查看：1,042 评论：4 标签：HTML 5