常见HTML5表单元素.pptxVIP

主讲：沙继东 第五章移动设备的常见HTML5表单元素 知识要点 掌握HTML5的表单新特性 知识重、难点 重点、难点： HTML5的表单属性 HTML5表单元素 表单是页面中不可缺少的元素，没有表单，就没有现在如此生动，趣味的页面。 不过虽然表单很重要，但在 HTML 5 之前，表单的元素不多，属性和方法也不多，很多属性和方法都是用 JavaScript 模拟的，用 JavaScript 模拟这些功能要花费不少的时间和精力。如果用户能使用到这些模拟的功能，那么花费是值得的；如果用户客户端禁用 JavaScript，那么这些功能将全部挂掉，时间和精力都白白浪费了。 HTML5表单元素 HTML 5 出现之后，这一切都不同了。HTML 5 增加的表单、表单类型以及表单属性，不但节省了开发者的时间，而且让更多应用成文可能。下面来看看 HMTL 5 新增表单类型的简单说明。 类型 类型名称 功能描述 color 颜色选择器 输入颜色值的文本框 date 日期选择器 输入日期的文本框 datetime 日期时间选择器 输入 UTC 日期和时间的文本框 datetime-local 日期时间选择器（本地） 输入本地日期和时间的文本框 month 月份选择器 输入月份的文本框 time 时间文本框 输入时间的文本框 week 周选择框 输入周的文本框 email 邮件输入框 输入 E-mail 地址的文本框 number 数字输入框 输入数字的文本框，可以设置输入值的范围 range 数字滑动条 通过拖动滑动条改变一定范围内的数字 search 搜索输入框 输入搜索关键字操作的文本框 tel 电话号码输入框 输入电话号码 url Web 地址输入框 输入 URL 地址的文本框 新增的 input 元素类型 新增的 input 元素类型 1.color color 类型用来选取颜色，它提供了一个颜色选取器，值为 16 进制符号，如：#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。 新增的 input 元素类型 2.date date 类型是一个日期选择器，有了这个就不需要用 JavaScript 编写日历控件了，非常方便。 新增的 input 元素类型 3. datetime 和 datetime-local datetime 类型是用来输入 UTC 日期和时间的文本框，而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。 新增的 input 元素类型 4. month 和 week month 类型是月份选择 器，它的值为：年-月， 如：2012-01；week 类 型是周选择器，它的值 为：年-W周数，如： 2011-W02。 新增的 input 元素类型 5. time time 类型是时间文本框，可以手动输入或用右边上线箭头控制。显示效果可以查看 datetime-local 效果的右边。 input type=time value=22:52 / 新增的 input 元素类型 6. email 和 url email 类型用来输入 E-mail 地址，它会验证文本框内的内容是否为合法的 E-mail 地址。 url 类型是用来输入 url 地址的，它会验证 url 地址是否合法。 新增的 input 元素类型 7. number 和 range number 类型是专门用来输入数字的，并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值，min 是允许的最小值，step 是间隔。设置了这些属性后，如果手动填入的数字不符合这些属性条件，将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似，也有 max、min 和 step 属性，在 Opera 中，可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值，但可以使用 output 输出当前值。 效果如下： 新增的 input 元素类型 number 和 range效果如下： 新增的 input 元素类型 8. search search 类型的是用来输入搜索关键词的文本框，它与 text 类型在功能都没有太大区别，只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中，当用户输入内容时，输入框右侧会有一个“×”按钮，单击该按钮，将清空输入框内的内容，使用非常方便。 新增的 input 元素类型 9. tel tel 类型是用来输入电话号码的，它没有特殊的验证规则，不强制输入数字，因为各个国家、地区的电话号