HTML5表单.docx

最新HTML5 表单元素2012年11月22日??来源：一起CSS 0条评论?874 views?datetime,?html5表单,?表单元素表单是页面中不可缺少的元素，没有表单，就没有现在如此生动，趣味的页面。不过虽然表单很重要，但在 HTML 5 之前，表单的元素不多，属性和方法也不多，很多属性和方法都是用 JavaScript 模拟的，用 JavaScript 模拟这些功能要花费不少的时间和精力。如果用户能使用到这些模拟的功能，那么花费是值得的；如果用户客户端禁用 JavaScript，那么这些功能将全部挂掉，时间和精力都白白浪费了。 HTML 5 出现之后，这一切都不同了。HTML 5 增加的表单、表单类型以及表单属性，不但节省了开发者的时间，而且让更多应用成文可能。下面来看看 HMTL 5 新增表单类型的简单说明。新增的 input 元素类型类型类型名称功能描述color颜色选择器输入颜色值的文本框date日期选择器输入日期的文本框datetime日期时间选择器输入 UTC 日期和时间的文本框datetime-local日期时间选择器（本地）输入本地日期和时间的文本框month月份选择器输入月份的文本框time时间文本框输入时间的文本框week周选择框输入周的文本框email邮件输入框输入 E-mail 地址的文本框number数字输入框输入数字的文本框，可以设置输入值的范围range数字滑动条通过拖动滑动条改变一定范围内的数字search搜索输入框输入搜索关键字操作的文本框tel电话号码输入框输入电话号码urlWeb 地址输入框输入 URL 地址的文本框?也许你看到一些类型就知道它是用来干什么的，如 email、date 等，下面就来更详细的说明和在一些浏览器中的效果。colorcolor 类型用来选取颜色，它提供了一个颜色选取器，值为 16 进制符号，如：#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。datedate 类型是一个日期选择器，有了这个就不需要用 JavaScript 编写日历控件了，非常方便。datetime?和 datetime-localdatetime 类型是用来输入 UTC 日期和时间的文本框，而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。month 和 weekmonth 类型是月份选择器，它的值为：年-月，如：2012-01；week 类型是周选择器，它的值为：年-W周数，如：2011-W02。timetime 类型是时间文本框，可以手动输入或用右边上线箭头控制。显示效果可以查看?datetime-local?效果的右边。email 和 urlemail 类型用来输入 E-mail 地址，它会验证文本框内的内容是否为合法的 E-mail 地址。 url 类型是用来输入 url 地址的，它会验证 url 地址是否合法。number 和 rangenumber 类型是专门用来输入数字的，并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值，min 是允许的最小值，step 是间隔。设置了这些属性后，如果手动填入的数字不符合这些属性条件，将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似，也有 max、min 和 step 属性，在 Opera 中，可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值，但可以使用 output 输出当前值。searchsearch 类型的是用来输入搜索关键词的文本框，它与 text 类型在功能都没有太大区别，只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中，当用户输入内容时，输入框右侧会有一个“×”按钮，单击该按钮，将清空输入框内的内容，使用非常方便。teltel 类型是用来输入电话号码的，它没有特殊的验证规则，不强制输入数字，因为各个国家、地区的电话号码不一样，但可以根据具体情况用?pattern?属性来验证。在 HTML 5 中，除了新增 input 元素的类型外，还新增了一些表单元素，如：datalist、keygen、output 等。datalistdatalist 元素是用来辅助表单中文本框输入的，它本身是隐藏的，与表单文本框的“list”属性绑定，即将“list”属性值设置为 datalist 元素的 id 值。绑定成功后，当输入内容时，datalist 元素以列表的形式显示在文本框的底部，提示输入字符的内容。keygenkeygen 用于生成页面的密钥。一般情况下，如果表单中使用了该元素，在表单提交