1、主讲：沙继东,第五章移动设备的常见HTML5表单元素,知识要点,掌握HTML5的表单新特性,知识重、难点,重点、难点： HTML5的表单属性,HTML5表单元素,表单是页面中不可缺少的元素，没有表单，就没有现在如此生动，趣味的页面。不过虽然表单很重要，但在 HTML 5 之前，表单的元素不多，属性和方法也不多，很多属性和方法都是用 JavaScript 模拟的，用 JavaScript 模拟这些功能要花费不少的时间和精力。如果用户能使用到这些模拟的功能，那么花费是值得的；如果用户客户端禁用 JavaScript，那么这些功能将全部挂掉，时间和精力都白白浪费了。,HTML5表单元素,HTML 5
2、 出现之后，这一切都不同了。HTML 5 增加的表单、表单类型以及表单属性，不但节省了开发者的时间，而且让更多应用成文可能。下面来看看 HMTL 5 新增表单类型的简单说明。,新增的 input 元素类型,新增的 input 元素类型,1.color color 类型用来选取颜色，它提供了一个颜色选取器，值为 16 进制符号，如：#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。,新增的 input 元素类型,2.date date 类型是一个日期选择器，有了这个就不需要用 JavaScript 编写日历控件了，非常方便。,新增的 input 元素类型,3. dat
3、etime 和 datetime-local datetime 类型是用来输入 UTC 日期和时间的文本框，而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。,新增的 input 元素类型,4. month 和 week month 类型是月份选择 器，它的值为：年-月， 如：2012-01；week 类 型是周选择器，它的值 为：年-W周数，如： 2011-W02。,新增的 input 元素类型,5. time time 类型是时间文本框，可以手动输入或用右边上线箭头控制。显示效果可以查看 datetime-loc
4、al 效果的右边。,新增的 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
5、类型是一个数字滑动条。它与 number 类型功能类似，也有 max、min 和 step 属性，在 Opera 中，可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值，但可以使用 output 输出当前值。效果如下：,新增的 input 元素类型,number 和 range效果如下：,新增的 input 元素类型,8. search search 类型的是用来输入搜索关键词的文本框，它与 text 类型在功能都没有太大区别，只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中，当用户输入内容时，输入框右侧会有一个“”按钮，单击该按钮，将清空输入框
6、内的内容，使用非常方便。,新增的 input 元素类型,9. tel tel 类型是用来输入电话号码的，它没有特殊的验证规则，不强制输入数字，因为各个国家、地区的电话号码不一样，但可以根据具体情况用 pattern 属性来验证。 在 HTML 5 中，除了新增 input 元素的类型外，还新增了一些表单元素，如：datalist、keygen、output 等。,新增的 input 元素类型,10. datalist datalist 元素是用来辅助表单中文本框输入的，它本身是隐藏的，与表单文本框的“list”属性绑定，即将“list”属性值设置为 datalist 元素的 id 值。绑定成功
7、后，当输入内容时，datalist 元素以列表的形式显示在文本框的底部，提示输入字符的内容。效果如下：,新增的 input 元素类型,datalist效果如下：,新增的 input 元素类型,11. keygen keygen 用于生成页面的密钥。一般情况下，如果表单中使用了该元素，在表单提交时，该元素将生成一对密钥：一个保存在客户端，称为私密钥（Private Key）；另一个发送至服务器，由服务器进行保存，称为公密钥（Public Key），公密钥可以用于客户端证书的验证。,新增的 input 元素类型,12. output output 元素用于显示各种不同类型表单元素的内容，如输入的值
8、、JavaScript 代码执行后的结果等。该元素必须从属于某个表单，或通过属性指定某个表单。为了获取表单的值，需要设置 output 元素的“onFormInput”事件，以便在表单输入框中输入内容是，监测到其中的值。,新增的表单属性,HTML 5 新增表单属性 HTML 5 不但新增加了表单元素、表单类型，还增加了一些表单属性，同时使用的话，能更好的提高率开发者的工作效率，同时也提高了用户的操作体验。,新增的表单属性,1. autocomplete 是否自动填充表单，默认值是 no。有些搜索引擎，如百度、google 等，它们会自动匹配当前热门搜素，所以禁止表单自动填充。此属性原本是 Mi
9、crosoft 的专有属性，现在 HTML 5 也支持了。,新增的表单属性,2. autofocus 自动聚焦。加入这个属性后，页面加载时，光标会自动聚焦到加入了此属性的输入框。比如登录页面，加入此属性后，页面加载后就可以直接输入，而不需要点击鼠标或使用 Tab 键聚焦后再输入。,新增的表单属性,3. form HTML 5 之前，表单元素必须在表单里面，如 input 必须在 form 里面，而 HTML 5 出现后，只要加上 form 属性，表单元素可以放到页面的任意位置。,新增的表单属性,4. formnovalidate 和 novalidate 表单的验证很重要，但有的时候出于某种特
10、殊情况，不需要对表单验证时，可以使用 formnavalidate 或 novalidate，它们都可以不验证提交表单，却别在于：novalidate 用户 form 标签；formnavalidate 用于 submit 或 image 类型的提交按钮。,新增的表单属性,5. formmethod、formenctype 、formnovalidate 和 formtarget 这几个属性和 formnovalidate 类似，将这些属性添加到 submit 按钮将会覆盖 fomr 元素对应属性的值或默认值。例如，如果 form 元素中的 method 属性被设置为 post ，则当点击一个
11、特定的按钮时，你可以使用 formmethod=”get” 覆盖它。帐号： 密码： ,新增的表单属性,6. list list 属性规定输入域的 datalist。datalist 是输入域的选项列表。效果可以查看 datalist,新增的表单属性,7. min、max 和 step 属性 min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。 max 属性规定输入域所允许的最大值；min 属性规定输入域所允许的最小值；step 属性为输入域规定合法的数字间隔（如果 step=”3，则合法的数是 -3,0,3,6 等）。,新增的表单属性,8. multip
12、le 当设置为 true 是，表单可以有多个值，用英文逗号分隔。例如，file 类型的表单中加入此属性后，选择文件时，可以按住 Ctrl 进行多选。,新增的表单属性,9. pattern 使用正则表达式验证 input 元素的内容，和之前用 JavaScript 写正则验证一样，只是把正则表单写在 pattern 的值里。,新增的表单属性,9. placeholder 输入框占位符，常用作输入提示，如搜索框。在光标聚焦时，占位符自动消失，不要担心还需要手动删除。,新增的表单属性,10. required 是否允许为空，加入了这个属性后，表单不允许为空。如果为空，在提交的时候会出现相应的提示，并
13、聚焦到该表单域。上面的那些新增表单类型默认都不会验证是否为空，它们只会验证输入的内容是否合法。,新增的表单属性,11. required 是否允许为空，加入了这个属性后，表单不允许为空。如果为空，在提交的时候会出现相应的提示，并聚焦到该表单域。上面的那些新增表单类型默认都不会验证是否为空，它们只会验证输入的内容是否合法。,新增的表单属性,上面就是 HTML 5 主要的新增表单、表单类型以及属性，大部分都有配图，如果配图没看明白，你也可使用最新的 Opera 浏览器（目前这款浏览器对表单的支持情况较好） HTML 5 给我们带来了更丰富的内容，更好的体验，虽然 HTML 5 的普及道路是曲折的，但未来是光明的。,
