HTML5表单.docx

1、HTML5表单最新HTML5 表单元素2012年11月22日来源：一起CSS 0条评论874 viewsdatetime,html5表单,表单元素表单是页面中不可缺少的元素，没有表单，就没有现在如此生动，趣味的页面。不过虽然表单很重要，但在 HTML 5 之前，表单的元素不多，属性和方法也不多，很多属性和方法都是用 JavaScript 模拟的，用 JavaScript 模拟这些功能要花费不少的时间和精力。如果用户能使用到这些模拟的功能，那么花费是值得的；如果用户客户端禁用 JavaScript，那么这些功能将全部挂掉，时间和精力都白白浪费了。 HTML 5 出现之后，这一切都不同了。HTML

2、 5 增加的表单、表单类型以及表单属性，不但节省了开发者的时间，而且让更多应用成文可能。下面来看看 HMTL 5 新增表单类型的简单说明。新增的 input 元素类型类型类型名称功能描述color颜色选择器输入颜色值的文本框date日期选择器输入日期的文本框datetime日期时间选择器输入 UTC 日期和时间的文本框datetime-local日期时间选择器（本地）输入本地日期和时间的文本框month月份选择器输入月份的文本框time时间文本框输入时间的文本框week周选择框输入周的文本框email邮件输入框输入 E-mail 地址的文本框number数字输入框输入数字的文本框，可以设置输入

3、值的范围range数字滑动条通过拖动滑动条改变一定范围内的数字search搜索输入框输入搜索关键字操作的文本框tel电话号码输入框输入电话号码urlWeb 地址输入框输入 URL 地址的文本框也许你看到一些类型就知道它是用来干什么的，如 email、date 等，下面就来更详细的说明和在一些浏览器中的效果。colorcolor 类型用来选取颜色，它提供了一个颜色选取器，值为 16 进制符号，如：#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。datedate 类型是一个日期选择器，有了这个就不需要用 JavaScript 编写日历控件了，非常方便。datetime

4、和 datetime-localdatetime 类型是用来输入 UTC 日期和时间的文本框，而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。month 和 weekmonth 类型是月份选择器，它的值为：年-月，如：2012-01；week 类型是周选择器，它的值为：年-W周数，如：2011-W02。timetime 类型是时间文本框，可以手动输入或用右边上线箭头控制。显示效果可以查看datetime-local效果的右边。email 和 urlemail 类型用来输入 E-mail 地址，它会验证文本框内的内容

5、是否为合法的 E-mail 地址。 url 类型是用来输入 url 地址的，它会验证 url 地址是否合法。number 和 rangenumber 类型是专门用来输入数字的，并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值，min 是允许的最小值，step 是间隔。设置了这些属性后，如果手动填入的数字不符合这些属性条件，将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似，也有 max、min 和 step 属性，在 Opera 中，可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当

6、前值，但可以使用 output 输出当前值。searchsearch 类型的是用来输入搜索关键词的文本框，它与 text 类型在功能都没有太大区别，只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中，当用户输入内容时，输入框右侧会有一个“”按钮，单击该按钮，将清空输入框内的内容，使用非常方便。teltel 类型是用来输入电话号码的，它没有特殊的验证规则，不强制输入数字，因为各个国家、地区的电话号码不一样，但可以根据具体情况用pattern属性来验证。在 HTML 5 中，除了新增 input 元素的类型外，还新增了一些表单元素，如：datalist、keygen、outp

7、ut 等。datalistdatalist 元素是用来辅助表单中文本框输入的，它本身是隐藏的，与表单文本框的“list”属性绑定，即将“list”属性值设置为 datalist 元素的 id 值。绑定成功后，当输入内容时，datalist 元素以列表的形式显示在文本框的底部，提示输入字符的内容。keygenkeygen 用于生成页面的密钥。一般情况下，如果表单中使用了该元素，在表单提交时，该元素将生成一对密钥：一个保存在客户端，称为私密钥（Private Key）；另一个发送至服务器，由服务器进行保存，称为公密钥（Public Key），公密钥可以用于客户端证书的验证。outputoutput

8、 元素用于显示各种不同类型表单元素的内容，如输入的值、JavaScript 代码执行后的结果等。该元素必须从属于某个表单，或通过属性指定某个表单。为了获取表单的值，需要设置 output 元素的“onFormInput”事件，以便在表单输入框中输入内容是，监测到其中的值。HTML 5 新增表单属性HTML 5 不但新增加了表单元素、表单类型，还增加了一些表单属性，同时使用的话，能更好的提高率开发者的工作效率，同时也提高了用户的操作体验。autocomplete是否自动填充表单，默认值是 no。有些搜索引擎，如XX、google 等，它们会自动匹配当前热门搜素，所以禁止表单自动填充。此属性原本是

9、 Microsoft 的专有属性，现在 HTML 5 也支持了。autofocus自动聚焦。加入这个属性后，页面加载时，光标会自动聚焦到加入了此属性的输入框。比如登录页面，加入此属性后，页面加载后就可以直接输入，而不需要点击鼠标或使用 Tab 键聚焦后再输入。formHTML 5 之前，表单元素必须在表单里面，如 input 必须在 form 里面，而 HTML 5 出现后，只要加上 form 属性，表单元素可以放到页面的任意位置。formnovalidate 和 novalidate表单的验证很重要，但有的时候出于某种特殊情况，不需要对表单验证时，可以使用 formnavalidate 或

10、novalidate，它们都可以不验证提交表单，却别在于：novalidate 用户 form 标签；formnavalidate 用于 submit 或 image 类型的提交按钮。formmethod、formenctype 、formnovalidate 和 formtarget这几个属性和 formnovalidate 类似，将这些属性添加到 submit 按钮将会覆盖 fomr 元素对应属性的值或默认值。例如，如果 form 元素中的 method 属性被设置为 post ，则当点击一个特定的按钮时，你可以使用 formmethod=”get” 覆盖它。 帐号： 密码： listli

11、st 属性规定输入域的 datalist。datalist 是输入域的选项列表。效果可以查看datalistmin、max 和 step 属性min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。 max 属性规定输入域所允许的最大值；min 属性规定输入域所允许的最小值；step 属性为输入域规定合法的数字间隔（如果 step=”3，则合法的数是 -3,0,3,6 等）。multiple当设置为 true 是，表单可以有多个值，用英文逗号分隔。例如，file 类型的表单中加入此属性后，选择文件时，可以按住 Ctrl 进行多选。pattern使用正则表达式

12、验证 input 元素的内容，和之前用 JavaScript 写正则验证一样，只是把正则表单写在 pattern 的值里。placeholder输入框占位符，常用作输入提示，如搜索框。在光标聚焦时，占位符自动消失，不要担心还需要手动删除。required是否允许为空，加入了这个属性后，表单不允许为空。如果为空，在提交的时候会出现相应的提示，并聚焦到该表单域。上面的那些新增表单类型默认都不会验证是否为空，它们只会验证输入的内容是否合法。上面就是 HTML 5 主要的新增表单、表单类型以及属性，大部分都有配图，如果配图没看明白，你也可使用最新的 Opera 浏览器（目前这款浏览器对表单的支持情况较好）HTML 5 给我们带来了更丰富的内容，更好的体验，虽然 HTML 5 的普及道路是曲折的，但未来是光明的