（中职）网页设计与制作教程7

1、YCF正版可修改PPT（中职）网页设计与制作教程7项目活动七在线注册页面制作:表单的应用任务一创建表单及表单对象任务二验证表单任务三制作在线注册页面返回任务一创建表单及表单对象一、了解表单表单是 用户与服务器进行信息交流的重要工具， 在网页中有着广泛的应用，如留言板、搜索引擎、注册程序等。 通常， 一个表单会包含多个对象， 也称为控件。 所有的表单对象都包含在 和 标签中。如图 所示的在线注册页面， 当用户填写完资料并提交后， 输入在表单中的信息就会上传到服务器， 然后再由服务器的有关应用程序进行处理， 并执行某些程序， 将处理结果反馈给用户。下一页返回任务一创建表单及表单对象二、创建表单执行

2、菜单命令“插入” “表单” “表单”， 可插入表单， 如图 所示。 任何其他表单对象， 都必须插入到表单中， 浏览器才能正确处理这些数据。 表单将以红色虚线框显示， 但在浏览器中是不可见的。 将光标置于表单内， 用鼠标单击状态栏上的“ ” 标签选中整个表单， 可以在“属性” 面板中设置表单属性， 其主要选项如图 所示。“表单”: 用来设置表单的名称， 该名称不能省略。“动作”: 指定设置处理提交表单的服务器端脚本的 地址(提交给程序) 或邮件地址。“ 目标”: 指定提交的结果文件显示的位置。 有四个选项 、 、 、 。上一页下一页返回任务一创建表单及表单对象() 表示在一个新的、没有命令的浏览

3、器窗口调入指定的文件。() 表示在指向这个目标元素的相同框架中调入文件。() 表示把文件调入当前框的直接父框 中, 在当前框没有父框时， 这个值等价于 。() 表示把文件调入原来的、最顶部的浏览器窗口中(因此取消所有其他框架)， 在当前框没有父框时， 这个值等价于 “编码类型”: 指定对提交给服务器进行处理的数据使用 编码类型。 有两个选项: / 和/ 。 前者是默认选项， 通常与 方法协同使用, 如果表单中包含文件上传域， 则应选择后者。上一页下一页返回任务一创建表单及表单对象“方法”: 指定将表单数据传输到服务器所使用的方法有三个选项， 默认、和。() 默认方法是使用浏览器的默认设置将表单

4、数据发送到服务器。() 方法是在消息正文中发送表单值， 并向服务器发送 请求。 这种方法允许传输大量数据， 一般情况下， 选用该方法比较安全。() 方法是将表单值添加到 请求中， 并向服务器发送 请求。 所以传送的数据量就会受到限制， 但是执行效率却比 方法好。注意: 在发送银行卡号、密码等重要信息时， 最好采用 方法发送， 因为如果以 方法发送表单数据， 表单会将数据附加到 请求中发送， 安全性降低。上一页下一页返回任务一创建表单及表单对象三、插入文本域在文本字段中， 可输入任何类型的文本内容， 它是最常见的表单对象之一。 按照文本字段的行数和显示方式， 可将其分为单行文本字段、多行文本字段

5、和密码域三种。 执行菜单命令“插入” “表单” “文本域” 命令插入文本域。 其“属性” 面板如图 所示。在“属性” 面板中， 根据需要设置文本域的属性。 主要设置选项含义如下。“文本域”: 设置表单对象的。“字符宽度”: 设置域中可显示的最大字符数。 此数字可以小于“最多字符数” 的值。“最多字符数”: 设置单行文本域中可输入的最大字符数。 如使用“最多字符数” 可将邮政编码限制为 位数， 将密码限制为 个字符， 身份证号码限制为 个字符。上一页下一页返回任务一创建表单及表单对象“类型”: 指定是单行、多行或密码域。“单行”: 输入的文字不会发生换行， 一般情况下用于一些简单的输入设置。“多

6、行”: 输入的文字如果超过了单行字符宽度， 就会换行。“密码”: 产生一个密码文本域。 当用户在密码文本域中输入时， 输入内容显示为项目符号或星号， 以保护它不被其他人看到。“初始值”: 指定在首次载入表单时文本域中显示的文字。 例如， 通过包含说明或示例文字， 可以提示用户在文本域中输入信息。“类”: 下拉列表框， 将 规则应用于对象。上一页下一页返回任务一创建表单及表单对象四、插入单选按钮单选按钮与复选框相似， 主要用于标记一个选项是否被选中， 单选按钮只允许用户从选项中选择唯一答案。 单选按钮通常成组地使用。 同一个组中的所有单选按钮必须具有相同的名称， 但它们的区域值， 即选项值是不同

7、的。() 创建单选按钮。在“插入” 工具栏的“表单” 选项卡中单击“单选按钮” ， 出现“输入标签辅助功能属性” 对话框， 设置 和标签文字， 单击“确定” 按钮后， 一个单选按钮随即出现在文档中。 反复单击单选按钮， 可以创建更多单选按钮。() 设置单选按钮属性。选中单选按钮， 出现如图 所示的单选按钮“属性” 面板。上一页下一页返回任务一创建表单及表单对象在“属性” 面板中， 根据需要设置属性， 主要选项介绍如下。“单选按钮”: 单选按钮名称。“选定值”: 选定该单选按钮后， 提交表单时传递的值。“初始状态”: 有“未选中” 和“已勾选” 两种。单选按钮举例如图 所示。五、插入单选按钮组用

8、户可以用单选按钮一个一个地创建表单选项， 也可以用单选按钮组同时创建多个表单选项来供用户选择。 在创建多个选项时， 单选按钮组的操作比单选按钮的操作更快捷。上一页下一页返回任务一创建表单及表单对象在 “插入” 工具栏的“表单” 选项卡中单击“单选按钮组” 按钮显示“单选按钮组” 对话框， 设置单选按钮组的名称、组内标签和值， 如图 所示， 单击“确定”按钮后， 一个单选按钮组随即出现在文档中。“名称”: 用来设置单选按钮组的名称， 名称要唯一。“单选按钮”: 单击“ ”， 添加单选按钮， “标签” 列是单选按钮的文本说明， “值”列是单选按钮的值。 单击“ ” 删除选择好的单选按钮。 通过单击

9、 、 按钮来调整单选按钮的次序。“布局， 使用”: 用来设置单选按钮组的布局方式， 选择“换行符” 则使用换行符，上一页下一页返回任务一创建表单及表单对象竖向排列， 否则使用表格。提示: 一旦单选按钮被选择， 同一组的单选按钮将始终有一个处于选中状态， 除非点击重置按钮进行重新设定。 比如， 男、女性别两个单选按钮， 初始状态是两个都不选中，选中“男” 后“女” 不被选中， 选中“女” 后“男” 不被选中， 总有一个处于选中状态， 只有重置才能回到两个都不选中的初始状态。保存网页， 运行效果如图 所示。六、列表/ 菜单除了使用复选框和单选按钮为用户提供选项， 还可以用“列表/ 菜单” 来制作选

10、项。“列表/ 菜单” 可以显示一个有项目的可滚动列表， 用户可以在该列表中选择项目。 当页面的空间有限， 但需要显示许多菜单项时， “列表/ 菜单” 就会非常有用。上一页下一页返回任务一创建表单及表单对象() 创建列表/ 菜单。在“插入” 工具栏的“表单” 选项卡中单击“列表/ 表单” 按钮， 显示“输入标签辅助功能属性” 对话框， 设置 和标签文字， 单击“确定” 后， 文档中便会出现一个菜单。() 设置列表/ 菜单属性。选中列表/ 菜单字段， 出现如图 所示的“属性” 面板。在“属性” 面板中， 根据需要设置列表/ 菜单的属性。 主要设置选项含义如下。列表/ 菜单: 列表/ 菜单的名称。“

11、类型”: 两种选择， 选中“菜单” 单选按钮， 网页中只能显示一行, 选中“列表”单选按钮， 则“高度”、“选定范围” 均可选择。“列表值” 按钮: 单击此按钮后， 弹出“列表值” 对话框， 可以在该对话框中设置列表值， 如图 所示。上一页下一页返回任务一创建表单及表单对象七、跳转菜单跳转菜单是利用表单元素形成各种选项的列表， 可以说跳转菜单是列表/ 菜单功能的延伸， 利用它不仅可以提供菜单项， 而且还可给菜单项指定链接页面， 选中列表中的某个选项时， 浏览器会立即跳转到一个新网页。() 创建跳转菜单。在“插入” 工具栏的“表单” 选项卡中单击的“跳转菜单” 按钮， 随即弹出“插入跳转菜单”

12、对话框， 根据需要设置其属性， 如图 所示。上一页下一页返回任务一创建表单及表单对象() 设置跳转菜单属性。跳转菜单属性设置与列表/ 菜单属性设置相似， 不同点主要是， 跳转菜单比列表/ 菜单的属性设置多了行为设置， 添加了鼠标事件() 和事件代码(在新窗口中打开相应的网页或者网站的主页)。提示: 如果在设置的时候， 在菜单之后插入“前往” 按钮， 那么插入的跳转表单中就自动带一个“前往” 按钮。上一页下一页返回任务一创建表单及表单对象八、图像区域在网页中插入图像区域能够使页面更加丰富多彩。 如果使用图像来执行任务而不是提交数据， 则需要将这种行为附加到表单对象。() 创建图像区域。在“插入”

13、 工具栏的“表单” 选项卡中单击“图像区域” 按钮， 弹出“选择图像源文件” 对话框， 如图 所示。 选择一张图片作为表单对象。() 设置图像区域属性。选中文本字段， 出现如图 所示的图像区域“属性” 面板。在“属性” 面板中， 根据需要设置图像区域的属性。 主要设置选项含义如下。上一页下一页返回任务一创建表单及表单对象“图像区域”: 图像域的名称。“源文件”: 图像文件的。“替换”: 当浏览器不能显示图像时， 替代显示文字。“对齐”: 图像在网页中的对齐方式， 主要有默认值、顶端、居中、底部、左对齐和右对齐。如果需要对插入的图像进行编辑， 可以在属性面板中单击“编辑图像” 按钮， 就可以直接

14、打开 或 图像处理软件。九、文件域文件域对象比文本框对象多了一个“浏览” 按钮。 浏览者可以通过单击这个按钮来选择需要上传文件的路径和名称。上一页下一页返回任务一创建表单及表单对象() 创建文件域。在“插入” 工具栏的“表单” 选项卡中单击“文件域” 按钮， 显示“输入标签辅助功能属性” 对话框， 设置 和标签文字， 单击“确定” 按钮后， 随即插入一个文件域对象。() 设置文件域属性。选中文件域， 出现如图 所示的“属性” 面板。在“属性” 面板中， 根据需要设置文件域的属性。 主要设置选项含义如下。“文件域名称”: 文件域名称。“字符宽度”: 设定网页上显示“文件域” 文本框的宽度。“最多

15、字符数”: 设定网页上显示“文件域” 文本框中最多能输入的字符数。上一页下一页返回任务一创建表单及表单对象十、标准按钮按钮对于表单而言是必不可少的， 它可以控制表单的操作。 使用按钮可将表单数据提交到服务器， 或者重置该表单。 在 中既可以使用图片来制作按钮， 也可以直接使用表单里的按钮。 表单中的按钮外形无法改变， 但是却比图像按钮用起来更方便。() 创建按钮。单击“插入” 工具栏中“表单” 选项卡的 按钮， 显示“输入标签辅助功能属性”对话框， 如图 所示， 设置 和标签文字， 单击“确定” 按钮后， 文档中随即出现一个按钮对象。() 设置按钮属性。选中按钮， 出现如图 所示的“属性” 面

16、板。上一页下一页返回任务一创建表单及表单对象在“属性” 面板中， 根据需要设置按钮的属性。 主要设置选项含义如下。“按钮名称”: 按钮的名称。“值”: 按钮上显示的文字。“动作”: 单击按钮后引发的事件。 有三个单选按钮供选择: “提交表单”、“重设表单” 和“无”。上一页返回任务二验证表单检查表单行为面板() 执行菜单命令“窗口” “行为”， 打开行为面板， 选中“在线注册” 表单，如图 所示， 单击行为面板中的“行为” 按钮， 如图 所示。() 选择“检查表单” 选项， 弹出“检查表单” 对话框， 如图 所示。() 该表单相关的重要表单项的设置如图 至图 所示。() 单击“确定” 按钮后保

17、存文件， 至此检查表单就完成了， 接下来就可以进行表单测试了。() 按下 键进行预览， 为了检查前面设置， 单击“提交” 按钮， 可以看到系统给出的错误提示。返回任务三制作在线注册页面一、插入与设置表单域() 新建一个文档， 执行菜单命令“修改” “页面属性”， 打开“页面属性” 对话框， 在“分类” 栏中选择“外观” 选项， 将字体大小设置为， 文本颜色为，单击“确定” 按钮， 如图 所示。() 在“插入” 工具栏中单击“表单” 选项卡中的“表单” 按钮， 插入一个表单域。二、插入并设置表单元素() 将光标定位在表单内， 插入一个 行 列的表格， 设置“表格” 对话框， 如图 所示。 合并第

18、一行、第二行、第九行和最后一行的单元格， 并对表格进行美化。在第一列单元格内输入相应的文本内容， 并设置单元格内文字居中对齐， 如图 所示。下一页返回任务三制作在线注册页面() 将光标定位在“姓名” 后的单元格内， 执行菜单命令“插入” “表单” “文本域”， 弹出“输入标签辅助功能属性” 对话框， 不做任何设置， 直接单击“确定”按钮， 即可以插入一个文本框。() 选中该文本框， 在文本框“属性” 面板中设置“文本域” 名称为姓名， “字符宽度” 和“最多字符数” 均设置为， 其余设置不变， 如图 所示。() 用同样方法插入一个通信地址文本框， 设置“文本域” 名称为通信地址， “字符宽度”

19、 为， 其余设置不变。() 用同样方法插入一个邮编和电子邮件文本框， 并根据需要设置“文本域” 和“字符宽度”。() 将光标定位在“性别” 后的单元格内， 执行菜单命令“插入” “表单” “单选按钮组”， 弹出“单选按钮组” 对话框， 设置标签为“男” 和“女”， 如图 所示。 最后单击“确定” 按钮， 即可插入一个单选按钮组， 调整使其水平显示。上一页下一页返回任务三制作在线注册页面() 将光标定位在“照片” 后的单元格内， 执行菜单命令“插入” “表单” “文件域”， 弹出“输入标签辅助功能属性” 对话框， 设置“” 和“标签” 都为，如图 所示。 最后单击“确定” 按钮， 即可插入一个文件域() 将光标定位在“你的兴趣爱好” 后的单元格内， 执行菜单命令“插入” “表单” “复选框组”， 弹出“复选框组” 对话框， 设置标签为“听音乐” “看海” 和“上网”， 如图 所示。 最后单击“确定” 按钮， 即可插入一个复选框组。() 将光标定位在“备注” 后的单元格内， 执行菜单命令“插入” “表单” “文本域”， 选中该文本域， 在文本域“属性” 面板中设置“文本域” 名称为备注，“类型” 为多行， “字符宽度” 设置为， “行数” 为， 其余设置不变， 如图 所示上一页下一页返回任务三制作在线注册页面() 将光标定位在表格的最后一行， 执行菜单命令