交互式表单应用.pptx

7.1 7.1 表单概述表单概述表单概述表单概述表单用途表单用途 在申请邮箱、网站留言及论坛发帖在申请邮箱、网站留言及论坛发帖，往往需要浏览者填，往往需要浏览者填写一些信息，如姓名、密码和联系方式等，这时就必定少不写一些信息，如姓名、密码和联系方式等，这时就必定少不了一项网页技术了一项网页技术表单。表单。表单是用于实现网页浏览者与服务器之间交互的一种页面元表单是用于实现网页浏览者与服务器之间交互的一种页面元表单是用于实现网页浏览者与服务器之间交互的一种页面元表单是用于实现网页浏览者与服务器之间交互的一种页面元素，在因特网上被广泛用于各种信息的搜集和反馈，是网站素，在因特网上被广泛用于各种信息的搜集和反馈，是网站素，在因特网上被广泛用于各种信息的搜集和反馈，是网站素，在因特网上被广泛用于各种信息的搜集和反馈，是网站管理者与浏览者之间沟通的桥梁。管理者与浏览者之间沟通的桥梁。管理者与浏览者之间沟通的桥梁。管理者与浏览者之间沟通的桥梁。要填写信息的页面上往往会包括很多表单对象。如果允许用要填写信息的页面上往往会包括很多表单对象。如果允许用要填写信息的页面上往往会包括很多表单对象。如果允许用要填写信息的页面上往往会包括很多表单对象。如果允许用户能输入数据，就应该使用文本域、密码域等；如果允许用户能输入数据，就应该使用文本域、密码域等；如果允许用户能输入数据，就应该使用文本域、密码域等；如果允许用户能输入数据，就应该使用文本域、密码域等；如果允许用户进行选择，就应该使用单选框、复选框、下拉菜单、列表户进行选择，就应该使用单选框、复选框、下拉菜单、列表户进行选择，就应该使用单选框、复选框、下拉菜单、列表户进行选择，就应该使用单选框、复选框、下拉菜单、列表等，所有这些表单元素合在一起，我们称之为表单。等，所有这些表单元素合在一起，我们称之为表单。等，所有这些表单元素合在一起，我们称之为表单。等，所有这些表单元素合在一起，我们称之为表单。教学进程教学进程教学进程教学进程第1页/共27页首先要用表格确定好各种表单元素的放置位置。首先要用表格确定好各种表单元素的放置位置。教学进程教学进程教学进程教学进程根据实际需求添加不同的表单元素。根据实际需求添加不同的表单元素。（1 1）规划页面布局）规划页面布局）规划页面布局）规划页面布局（2 2）添加表单元素）添加表单元素）添加表单元素）添加表单元素7.1 7.1 表单概述表单概述表单概述表单概述如果要制作一个留言板的简单页面，一般步骤如下：如果要制作一个留言板的简单页面，一般步骤如下：第2页/共27页7.2 7.2 规划页面布局规划页面布局规划页面布局规划页面布局教学进程教学进程教学进程教学进程7 7.2.1.2.1 插入表格插入表格插入表格插入表格 插入一个插入一个16行行2列的表格，并调节表格。列的表格，并调节表格。第3页/共27页7.2.2 7.2.2 添加文本添加文本添加文本添加文本教学进程教学进程教学进程教学进程在在表表格格中中添添加加文文本本后后的的效效果果 第4页/共27页1.插入表单域插入表单域教学进程教学进程教学进程教学进程7.3 7.3 表单域的使用表单域的使用表单域的使用表单域的使用2.设置表单域属性设置表单域属性3.调整表格位置调整表格位置将光标定位在文档页面中需要插入表单的位置。-单击“表单”工具栏中的【表单】按钮，此时光标定位处出现一个红色的虚线框，它表示表单的范围。第5页/共27页1.插入表单域插入表单域教学进程教学进程教学进程教学进程7.3 7.3 表单域的使用表单域的使用表单域的使用表单域的使用2.设置表单域属性设置表单域属性3.调整表格位置调整表格位置单击表单红框的内部，可以在【属性】面板中对其相关属性进行设定。第6页/共27页1.插入表单域插入表单域教学进程教学进程教学进程教学进程7.3 7.3 表单域的使用表单域的使用表单域的使用表单域的使用2.设置表单域属性设置表单域属性3.调整表格位置调整表格位置 表单元素必须位于表单域中，因此我们应该将表格移动的红色的虚线框中。-首先选中表格对象，按Ctrl+X快捷键将它剪切到剪贴板中，然后插入一个表单，单击红框内部，按Ctrl+V快捷键将表可知粘贴在表单内。第7页/共27页教学进程教学进程教学进程教学进程7.4 7.4 创建文本字段创建文本字段创建文本字段创建文本字段7.4.1 7.4.1 插入单行文本框插入单行文本框插入单行文本框插入单行文本框文本字段主要用于单行信息的输入，如输入登录账号、密码、文本字段主要用于单行信息的输入，如输入登录账号、密码、联系电话、邮政编码等联系电话、邮政编码等第8页/共27页教学进程教学进程教学进程教学进程7.4 7.4 创建文本字段创建文本字段创建文本字段创建文本字段7.4.2 7.4.2 添加密码文本框添加密码文本框添加密码文本框添加密码文本框密码字段就是在浏览网页时，在该表单项中输入的字符显示为密码字段就是在浏览网页时，在该表单项中输入的字符显示为“*”或或“”的保密字符。密码字段和文本字段的创建方法一的保密字符。密码字段和文本字段的创建方法一样，不同的只是在样，不同的只是在【属性属性】面板中，密码字段的面板中，密码字段的【类型类型】选择选择为为“密码密码”。第9页/共27页文本区域其实就是一个放大了的文本字段文本区域其实就是一个放大了的文本字段教学进程教学进程教学进程教学进程7.4.3 7.4.3 添加文本区域添加文本区域添加文本区域添加文本区域方法一：插入一个文本框，然后在方法一：插入一个文本框，然后在【属性属性】面板将其面板将其【类型类型】修改为修改为“多行多行”，此时文本框就变为文本区域。，此时文本框就变为文本区域。方法二：单击方法二：单击【表单表单】工具栏中的工具栏中的【文本区域文本区域】铵钮，就可铵钮，就可以直接插入文本区域，以直接插入文本区域，第10页/共27页教学进程教学进程教学进程教学进程7.5 7.5 创建复选框创建复选框创建复选框创建复选框 复选框即提供多个选择项，浏览者可以任意选择。复选框即提供多个选择项，浏览者可以任意选择。复复选选框框效效果果第11页/共27页教学进程教学进程教学进程教学进程7.6 7.6 创建单选按钮和单选按钮组创建单选按钮和单选按钮组创建单选按钮和单选按钮组创建单选按钮和单选按钮组方法方法方法方法 和复选框的功能似乎有些相反，单选按钮是多个选项中只和复选框的功能似乎有些相反，单选按钮是多个选项中只能选择一个，具有唯一选择性。在页面设计时插入单选按钮很能选择一个，具有唯一选择性。在页面设计时插入单选按钮很简单，方法类似复选框。简单，方法类似复选框。效果效果效果效果7.6.1 7.6.1 添加单选按钮添加单选按钮添加单选按钮添加单选按钮第12页/共27页教学进程教学进程教学进程教学进程7.6.2 7.6.2 添加单选按钮组添加单选按钮组添加单选按钮组添加单选按钮组方法方法方法方法将光标定位在要插入单选按钮组的位置，单击将光标定位在要插入单选按钮组的位置，单击将光标定位在要插入单选按钮组的位置，单击将光标定位在要插入单选按钮组的位置，单击【表单表单表单表单】工具栏工具栏工具栏工具栏中的中的中的中的【单选按钮组单选按钮组单选按钮组单选按钮组】按钮，弹出按钮，弹出按钮，弹出按钮，弹出【单选按钮组单选按钮组单选按钮组单选按钮组】对话框，我们对话框，我们对话框，我们对话框，我们仍然以前面制作的仍然以前面制作的仍然以前面制作的仍然以前面制作的“性别性别性别性别”单选按钮为例，将单选按钮为例，将单选按钮为例，将单选按钮为例，将【名称名称名称名称】修改为修改为修改为修改为“sex”sex”，同时修改，同时修改，同时修改，同时修改【LabelLabel】和和和和【ValueValue】的值，单击的值，单击的值，单击的值，单击【确定确定确定确定】按钮即可得到一组单选按钮组。按钮即可得到一组单选按钮组。按钮即可得到一组单选按钮组。按钮即可得到一组单选按钮组。第13页/共27页教学进程教学进程教学进程教学进程7.7 7.7 创建菜单和列表创建菜单和列表创建菜单和列表创建菜单和列表方法方法方法方法将光标定位在要添加菜单的单元格内，单击将光标定位在要添加菜单的单元格内，单击将光标定位在要添加菜单的单元格内，单击将光标定位在要添加菜单的单元格内，单击【表单表单表单表单】工具栏中工具栏中工具栏中工具栏中的的的的【列表列表列表列表/菜单菜单菜单菜单】按钮，此时在编辑窗口中就出一个菜单框，选按钮，此时在编辑窗口中就出一个菜单框，选按钮，此时在编辑窗口中就出一个菜单框，选按钮，此时在编辑窗口中就出一个菜单框，选择该菜单框，然后在属性面板中设置其属性择该菜单框，然后在属性面板中设置其属性择该菜单框，然后在属性面板中设置其属性择该菜单框，然后在属性面板中设置其属性 。7.7.1 7.7.1 添加菜单添加菜单添加菜单添加菜单第14页/共27页教学进程教学进程教学进程教学进程7.7.2 7.7.2 添加列表添加列表添加列表添加列表介绍介绍介绍介绍列表不同于菜单，列表允许同时显示多个项目标签，并且允许列表不同于菜单，列表允许同时显示多个项目标签，并且允许列表不同于菜单，列表允许同时显示多个项目标签，并且允许列表不同于菜单，列表允许同时显示多个项目标签，并且允许对项目进行多选。其插入方法和对项目进行多选。其插入方法和对项目进行多选。其插入方法和对项目进行多选。其插入方法和“菜单菜单菜单菜单”一样。一样。一样。一样。方法方法方法方法选择刚才插入的菜单，在选择刚才插入的菜单，在选择刚才插入的菜单，在选择刚才插入的菜单，在【属性属性属性属性】面板中将面板中将面板中将面板中将【类型类型类型类型】设置为设置为设置为设置为【列表列表列表列表】，这时，这时，这时，这时【高度高度高度高度】和和和和【选定范围选定范围选定范围选定范围】就变成可用。就变成可用。就变成可用。就变成可用。第15页/共27页教学进程教学进程教学进程教学进程浏览网页时经常需要用户将文件提交到网站服务器上，例如，浏览网页时经常需要用户将文件提交到网站服务器上，例如，当发送电子邮件需要添加附件时，或当发表帖子需要上传图片当发送电子邮件需要添加附件时，或当发表帖子需要上传图片时，就会看到一个文本对话框和一个浏览按钮，以提供浏览本时，就会看到一个文本对话框和一个浏览按钮，以提供浏览本地文件进行上传。这就是文件域的具体表现。地文件进行上传。这就是文件域的具体表现。7.7.8 8 创建其他常用表单域创建其他常用表单域创建其他常用表单域创建其他常用表单域7.8.1 7.8.1 插入文件域插入文件域插入文件域插入文件域将光标定位在将光标定位在“精彩留念精彩留念”右侧的单元格内，单击右侧的单元格内，单击【表单表单】工工具栏中的具栏中的【文件域文件域】按钮，文件域就被插入到编辑窗口中，在按钮，文件域就被插入到编辑窗口中，在属性面板中设置其相关参数。属性面板中设置其相关参数。第16页/共27页教学进程教学进程教学进程教学进程7.7.8 8 创建其他常用表单域创建其他常用表单域创建其他常用表单域创建其他常用表单域7.8.2 7.8.2 插入按钮插入按钮插入按钮插入按钮表单中的按钮可以用来提交或重置表单，也可以为按钮提供一表单中的按钮可以用来提交或重置表单，也可以为按钮提供一些些“行为行为”动作，使得其具有一些功能。动作，使得其具有一些功能。按钮的预览效果按钮的预览效果第17页/共27页教学进程教学进程教学进程教学进程7.7.8 8 创建其他常用表单域创建其他常用表单域创建其他常用表单域创建其他常用表单域7.8.3 7.8.3 插入图像域插入图像域插入图像域插入图像域图像域的出现弥补了按钮样式的单调性。可以用一张图像来实图像域的出现弥补了按钮样式的单调性。可以用一张图像来实现按钮、提交表单等功能，现按钮、提交表单等功能，图像域的属性图像域的属性第18页/共27页教学进程教学进程教学进程教学进程7.7.8 8 创建其他常用表单域创建其他常用表单域创建其他常用表单域创建其他常用表单域7.8.3 7.8.3 插入隐藏域插入隐藏域插入隐藏域插入隐藏域隐藏域就是当网页被浏览时，该表单不希望浏览者看到，此时隐藏域就是当网页被浏览时，该表单不希望浏览者看到，此时就可以使用隐藏域。它一般用于信息的暂存但又无须在页面中就可以使用隐藏域。它一般用于信息的暂存但又无须在页面中显示的情况，或者说更多的是为了网页程序的使用。显示的情况，或者说更多的是为了网页程序的使用。隐藏域的属性隐藏域的属性第19页/共27页教学进程教学进程教学进程教学进程7.7.9 9 创建跳转菜单创建跳转菜单创建跳转菜单创建跳转菜单第20页/共27页教学进程教学进程教学进程教学进程7.7.9 9 创建跳转菜单创建跳转菜单创建跳转菜单创建跳转菜单7.9.1 7.9.1 插入跳转菜单插入跳转菜单插入跳转菜单插入跳转菜单跳转菜单的效果跳转菜单的效果第21页/共27页教学进程教学进程教学进程教学进程7.7.9 9 创建跳转菜单创建跳转菜单创建跳转菜单创建跳转菜单7.9.2 7.9.2 修改跳转菜单修改跳转菜单修改跳转菜单修改跳转菜单（1）返中跳转菜单，进入属性面板（2）在列表中修改即可第22页/共27页教学进程教学进程教学进程教学进程7.10 7.10 表单的检查表单的检查表单的检查表单的检查对于已经创建好的表单，其功能及位置不一定能满足实际对于已经创建好的表单，其功能及位置不一定能满足实际需求。比如，有些文本字段必须要填入内容，而有些则是需求。比如，有些文本字段必须要填入内容，而有些则是可选项；而有些文本字段要求输入指定范围内的数据等。可选项；而有些文本字段要求输入指定范围内的数据等。如何来检测表单是否满足我们的需求，就成了创建表单后如何来检测表单是否满足我们的需求，就成了创建表单后的一项相当重要的工作。的一项相当重要的工作。-进行表单检查有两种情况：一种是对单个表单对象进行检进行表单检查有两种情况：一种是对单个表单对象进行检查，只要触及该对象就进行检查；另一种是提交表单时才查，只要触及该对象就进行检查；另一种是提交表单时才进行全面检查。进行全面检查。第23页/共27页教学进程教学进程教学进程教学进程7.10 7.10 表单的检查表单的检查表单的检查表单的检查7.10.1 7.10.1 对单个表单进行检查对单个表单进行检查对单个表单进行检查对单个表单进行检查第24页/共27页教学进程教学进程教学进程教学进程7.10 7.10 表单的检查表单的检查表单的检查表单的检查7.10.2 7.10.2 表单提交时进行检查表单提交时进行检查表单提交时进行检查表单提交时进行检查只有当单击只有当单击【提交提交】按钮那一刻开始，才对表单进行检查操作。按钮那一刻开始，才对表单进行检查操作。在制作表单检查的实际运用中，一般采用对在制作表单检查的实际运用中，一般采用对【提交提交】按钮做最后检按钮做最后检查操作就可以了。当然，如果再加上对单个表单对象的检查，这样查操作就可以了。当然，如果再加上对单个表单对象的检查，这样就更加严谨了。但这并不代表这种检查就万无一失了，因为目前所就更加严谨了。但这并不代表这种检查就万无一失了，因为目前所进行的表单检查，只是通过脚本语言在客户端的浏览器上进行的，进行的表单检查，只是通过脚本语言在客户端的浏览器上进行的，在数据信息传送到服务器端时，仍将有必要进行服务器端的枪柄，在数据信息传送到服务器端时，仍将有必要进行服务器端的枪柄，这样安全性才会更高。这样安全性才会更高。第25页/共27页教学进程教学进程教学进程教学进程（1 1）在站点目录下新建一个名为）在站点目录下新建一个名为）在站点目录下新建一个名为）在站点目录下新建一个名为form.htmform.htm文件，利用本章学习的内文件，利用本章学习的内文件，利用本章学习的内文件，利用本章学习的内容，制作如下图所示的用户注册页面效果，然后对表单进行检查。容，制作如下图所示的用户注册页面效果，然后对表单进行检查。容，制作如下图所示的用户注册页面效果，然后对表单进行检查。容，制作如下图所示的用户注册页面效果，然后对表单进行检查。7.17.11 1 习题与上机操作习题与上机操作习题与上机操作习题与上机操作上机操作题上机操作题上机操作题上机操作题第26页/共27页教学进程教学进程教学进程教学进程（2）在站点目录下新建一个名为）在站点目录下新建一个名为navigation.htm文件，制作如下图文件，制作如下图所示的跳转菜单效果。所示的跳转菜单效果。7.17.11 1 习题与上机操作习题与上机操作习题与上机操作习题与上机操作上机操作题上机操作题上机操作题上机操作题第27页/共27页