《移动Web开发实战》第5章使用表单元素PPT课件.pptx

《《移动Web开发实战》第5章使用表单元素PPT课件.pptx》由会员分享，可在线阅读，更多相关《《移动Web开发实战》第5章使用表单元素PPT课件.pptx（32页珍藏版）》请在金锄头文库上搜索。

1、第第5 5章章 使用表单元素使用表单元素 目目 录录 表单元素的类型 表单元素中的属性 实例5 4 在网页中生成一个密钥 实例5 1 验证输入的是否是一个URL地址 实例5 2 验证输入的数值是否合法 实例5 3 实现一个简单的乘法计算器 综合实例 制作一个颜色滑动控制器 第第5 5章章 使用表单元素使用表单元素 1 1 1 1 表表 单单 元元 素素 的的 类类 型型 HTML5提供了多个新的表单输入类型 这些新类型为我们提供了更好的输入控制和验证 功能 在HTML5标记语言中 包含了如下所示的输入类型 email url number range Date pickers date mon

2、th week time datetime datetime local search color 第第5 5章章 使用表单元素使用表单元素 1 1 1 1 表表 单单 元元 素素 的的 类类 型型 5 1 1 EMAIL5 1 1 EMAIL类型类型 在HTML5标记语言中 email类型用于包含Email地址的输入域 如果将元素中 的 type 类型设置为 email 将在页面中创建一个专门用于输入邮件地址的文本输入框 在显示页面时 这个文本框与其他文本框没有区别 专门用于接收Email地址信息 当提交 表单时 会自动检测文本框中的内容是否符合Email邮件地址格式 如果不符则提示相应错

3、误信息 在现实应用中 在提交表单之前不会检测email类型文本框的内容是否为空 只有在不 为空的情况下才会检测其内容是否符合标准的Email格式 如果将该元素的 multiple 属性 设置为 true 则表示允许用户输入一串用逗号分隔的Email地址 在提交表单时 会自动 验证Email域中的值是否合法 第第5 5章章 使用表单元素使用表单元素 1 1 1 1 表表 单单 元元 素素 的的 类类 型型 5 1 2 5 1 2 URLURL类型类型 在HTML5标记语言中 url类型用于包含URL地址的输入域 在提交表单时 会自动验 证url域中的值 在输入元素中 url 类型是一种新增的类型

4、 该类型表示元 素是一个专门用于输入Web站点地址的输入框 Web地址的格式与普通文本有些区别 例 如文本中有反斜杠 和点 为了确保 url 类型的输入框能够正确提交符合格式的内容 表单在提交数据前会自动 验证其内容格式的有效性 如果不符合对应的格式 则会出现相应的错误提示信息 并且 与 email 类型一样 url的有效性检测并不会判断输入框的内容是否为空 而是针对非空内 容进行格式检测 第第5 5章章 使用表单元素使用表单元素 1 1 1 1 表表 单单 元元 素素 的的 类类 型型 5 1 3 NUMBER5 1 3 NUMBER类型类型 在HTML5标记语言中 number类型用于设置

5、包含数值的输入域 通过此类型能够设置 对所接受的数字的限定 在网页设计应用中 可以使用下表所示的属性来设置对数字类型的 限定 number类型支持的属性 第第5 5章章 使用表单元素使用表单元素 1 1 1 1 表表 单单 元元 素素 的的 类类 型型 在HTML4及以前的版本中 如果想要在表单中输入一个指定范围的整数 需要在表单 提交前使用代码进行数据检测 以确定输入框中是否是一个符合要求的整数 而在HTML5 标记语言中 只要创建一个 number 类型的元素便可以实现以上操作 该类型的元 素在HTML5中还将显示一个微调控件 如果指定了最大与最小范围值 就可以点击微调控 件的上限与下限按

6、钮 以指定的步长 step 增加或减少输入框中的值 极大方便了用户 的操作 在 number 类型的输入框中 不能输入其他非数字型的字符 并且当输入的数字大于 设定的最大值或小于设置的最小值时 都将出现数字输入出错的提示信息 同样道理 该 类型不进行输入内容是否为空值的自动检测 第第5 5章章 使用表单元素使用表单元素 1 1 1 1 表表 单单 元元 素素 的的 类类 型型 5 1 4 DATE PICKERS5 1 4 DATE PICKERS 数据检出器 数据检出器 在HTML5标记语言中 使用Date Pickers 数据检出器 可以为用户提供日期和时间输入 框 Date Picker

7、s的意义是可以避免用打字的方式输入日期和时间 能够大大提高处理数据的效 率 在HTML5中提供了多个可供选取日期和时间的新输入类型 具体说明如下 date 选取日 月 年 month 选取月 年 week 选取周和年 time 选取时间 小时和分钟 datetime 选取时间 日 月 年 UTC时间 datetime local 选取时间 日 月 年 本地时间 第第5 5章章 使用表单元素使用表单元素 1 1 1 1 表表 单单 元元 素素 的的 类类 型型 在HTML4之前的版本中 没有专门用于显示日期的文本输入框 开发人员需要编写 大量的JavaScript代码或导入相应的插件 而在HTM

8、L5中 只需要将元素的类型设 置为 date 便可以创建一个日期输入框 当单击该文本框时会弹出一个日历选择器 选 择日期并关闭这个框 会将所选择的日期显示在文本框中 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的 属属 性性 除了本章5 1中介绍的表单类型外 在HTML5中还可以使用属性来实现我们需要的显示功 能 HTML5新增的表单属性如下 1 1 新的 新的formform属性属性 autocomplete novalidate 2 2 新的 新的inputinput属性属性 autocomplete autofocus form form o

9、verrides formaction formenctype formmethod formnovalidate formtarget 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的 属属 性性 height和width list min max和step multiple pattern regexp placeholder required 下面我们具体介绍其中常用的一些 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的 属属 性性 5 2 1 5 2 1 记住表单中的数据记住表单中的数据 在HTM

10、L5的元素中 属性 autofocus 是一个布尔值 主要功能是当加载页面完 成后 设置光标是否自动锁定元素 即是否使元素自动获取焦点 在元素中 如果将该属性的值设置为 true 或直接输入 autofocus 属性名称 那么对应的元素将自动 获取焦点 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的 属属 性性 5 2 2 5 2 2 验证表单中输入的数据是否合法验证表单中输入的数据是否合法 在HTML5网页中 可以通过 pattern 属性验证在表单中输入的数据是否合法 pattern属性 适用于以下类型的标签 text search url t

11、elephone email password email 和 url 等类型的元素都内置了正则表达式 当创建这些元素时 通过与内容 进行匹配的方式进行有效性验证 其实这些元素都使用了 pattern 属性 只是内置的而已 但 是内置验证的元素毕竟较少 并且如果要进行组合式的验证 就需要使用 pattem 属性 该属 性支持各种类型的组合正则表达式 用来验证对应文本输入框中的内容 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的 属属 性性 5 2 3 5 2 3 在文本框中显示提示信息在文本框中显示提示信息 在HTML5标记语言中 placehol

12、der属性能够提供一种描述输入域所期待值的提示 只要 为某个元素设置 placeholder 属性后 会在输入域为空时显示提示 在输入域获得焦点时这个 提示会消失 placeholder属性适用于以下所示的标签类型 text search url telephone email password 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的 属属 性性 5 2 4 5 2 4 验证文本框中的内容是否为空验证文本框中的内容是否为空 在HTML5标记语言中 可以使用required属性来验证文本框中的内容是否为空 required属 性适用于以下所示

13、的标签类型 text search url telephone email password date pickers number checkbox radio file 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的 属属 性性 通过前面的学习我们已经知道 email 或 url 类型的元素在提交表单时只验 证非空内容 这时只要在验证元素中添加一个 required 属性 就可以对其内容是否为空 自动进行验证 如果为空 则在表单提交数据时会显示错误提示信息 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中

14、的的 属属 性性 5 2 5 5 2 5 开启表单的自动完成功能开启表单的自动完成功能 在HTML5标记语言中 使用autocomplete属性可以设置form或input域开启自动完成功能 该功能可随着用户键入显示以前的匹配条目从而节约时间 autocomplet属性不但适用于 标签 而且适应于标签中的以下类型 text search url telephone email password datepickers range color 在某些浏览器中 可能还需要启用自动完成功能才能使该属性生效 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的

15、属属 性性 5 2 6 5 2 6 重写表单中的某些属性重写表单中的某些属性 在HTML5标记语言中 通过表单重写属性 form override attributes 可以重写form元素的 某些属性设定 HTML5中的表单重写属性如下 formaction 重写表单的action属性 formenctype 重写表单的enctype属性 formmethod 重写表单的method属性 formnovalidate 重写表单的novalidate属性 formtarget 重写表单的target属性 在HTML5应用中 表单重写属性适用于以下类型的标签 submit image 第第5 5

16、章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的 属属 性性 5 2 7 5 2 7 自动设置表单中传递数字自动设置表单中传递数字 在HTML5标记语言中 使用属性min max和step可以为包含数字或日期的input类型规定 限定条件 这三个属性的具体说明如下 max 规定输入域所允许的最大值 min 规定输入域所允许的最小值 step 为输入域设置合法的数字间隔 假如step 3 则合法的数是 3 0 3 6等 在HTML5应用中 属性min max和step适用于以下三个标签类型 date pickers number range 第第5 5章章 使用表单元素使用表单元素 2 2 2 2 表表 单单 元元 素素 中中 的的 属属 性性 5 2 8 5 2 8 在表单中选择多个上传文件在表单中选择多个上传文件 在HTML5标记语言中 使用multiple属性可以设置在输入域中选择多个值 在HTML5应 用中 multiple属性适用于以下两种类型的标签 email file 第第5 5章章 使用表单元素使用表单元素 3 3 3 3 实实 例例 5