交互式表单应用.pptVIP

7.1 表单概述 表单用途 在申请邮箱、网站留言及论坛发帖……，往往需要浏览者填写一些信息，如姓名、密码和联系方式等，这时就必定少不了一项网页技术——表单。 表单是用于实现网页浏览者与服务器之间交互的一种页面元素，在因特网上被广泛用于各种信息的搜集和反馈，是网站管理者与浏览者之间沟通的桥梁。 要填写信息的页面上往往会包括很多表单对象。如果允许用户能输入数据，就应该使用文本域、密码域等；如果允许用户进行选择，就应该使用单选框、复选框、下拉菜单、列表等，所有这些表单元素合在一起，我们称之为表单。 教学进程 第1页/共27页 首先要用表格确定好各种表单元素的放置位置。 教学进程 根据实际需求添加不同的表单元素。 （1）规划页面布局 （2）添加表单元素 7.1 表单概述 如果要制作一个留言板的简单页面，一般步骤如下： 第2页/共27页 7.2 规划页面布局 教学进程 7.2.1 插入表格 ? 插入一个16行2列的表格，并调节表格。 第3页/共27页 7.2.2 添加文本 教学进程 在表格中添加文本后的效果 第4页/共27页 1. 插入表单域 教学进程 7.3 表单域的使用 2. 设置表单域属性 3. 调整表格位置 将光标定位在文档页面中需要插入表单的位置。 ------------------------------------------- 单击“表单”工具栏中的【表单】按钮，此时光标定位处出现一个红色的虚线框，它表示表单的范围。 第5页/共27页 1. 插入表单域 教学进程 7.3 表单域的使用 2. 设置表单域属性 3. 调整表格位置 单击表单红框的内部，可以在【属性】面板中对其相关属性进行设定。 第6页/共27页 1. 插入表单域 教学进程 7.3 表单域的使用 2. 设置表单域属性 3. 调整表格位置 表单元素必须位于表单域中，因此我们应该将表格移动的红色的虚线框中。 -------------------------------------------- 首先选中表格对象，按Ctrl+X快捷键将它剪切到剪贴板中，然后插入一个表单，单击红框内部，按Ctrl+V快捷键将表可知粘贴在表单内。 第7页/共27页 教学进程 7.4 创建文本字段 7.4.1 插入单行文本框 文本字段主要用于单行信息的输入，如输入登录账号、密码、 联系电话、邮政编码等 第8页/共27页 教学进程 7.4 创建文本字段 7.4.2 添加密码文本框 密码字段就是在浏览网页时，在该表单项中输入的字符显示为 “*”或“●”的保密字符。密码字段和文本字段的创建方法一 样，不同的只是在【属性】面板中，密码字段的【类型】选择 为“密码”。 第9页/共27页 文本区域其实就是一个放大了的文本字段 教学进程 7.4.3 添加文本区域 方法一：插入一个文本框，然后在【属性】面板将其【类型】 修改为“多行”，此时文本框就变为文本区域。 方法二：单击【表单】工具栏中的【文本区域】铵钮，就可 以直接插入文本区域， 第10页/共27页 教学进程 7.5 创建复选框 复选框即提供多个选择项，浏览者可以任意选择。 复 选 框 效 果 第11页/共27页 教学进程 7.6 创建单选按钮和单选按钮组 方法 和复选框的功能似乎有些相反，单选按钮是多个选项中只能选择一个，具有唯一选择性。在页面设计时插入单选按钮很简单，方法类似复选框。 效果 7.6.1 添加单选按钮 第12页/共27页 教学进程 7.6.2 添加单选按钮组 方法 将光标定位在要插入单选按钮组的位置，单击【表单】工具栏中的【单选按钮组】按钮，弹出【单选按钮组】对话框，我们仍然以前面制作的“性别”单选按钮为例，将【名称】修改为“sex”，同时修改【Label】和【Value】的值，单击【确定】按钮即可得到一组单选按钮组。 第13页/共27页 教学进程 7.7 创建菜单和列表 方法 将光标定位在要添加菜单的单元格内，单击【表单】工具栏中的【列表/菜单】按钮，此时在编辑窗口中就出一个菜单框，选择该菜单框，然后在属性面板中设置其属性 。 7.7.1 添加菜单 第14页/共27页 教学进程 7.7.2 添加列表 介绍 列表不同于菜单，列表允许同时显示多个项目标签，并且允许对项目进行多选。其插入方法和“菜单”一样。 方法 选择刚才插入的菜单，在【属性】面板中将【类型】设置为【列表】，这时【高度】和【选定范围】就变成可用。 第15页/共27页 教学进程 浏览网页时经常需要用户将文件提交到网站服务器上，例如，当发送电子邮件需要添加附件时，或当发表帖子需要上传图片时，就会看到一个文本