网页设计与制作第五章表单的应用.ppt

* 第五章表单的应用 表单和表单对象 创建表单 插入表单对象 Spry类表单对象 表单和表单对象的应用 ?掌握使用表单对象设计网页界面 掌握使用Spry类表单对象设计网页界面 一个网站不仅需要各种供用户浏览的网页，而且还需要与用户进行交互的表单。表单是实现用户调查、产品订单和对象搜索设置等功能的重要手段。利用表单处理程序，可以收集、分析用户的反馈意见，做出科学的、合理的决策。 通常，一个表单中包含多个对象，这些对象有时也称为控件或表单元素，如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框以及用于显示列表项的列表框等。 表单实现了浏览器和服务器之间的信息传递，它使网页由单向浏览变成了双向交互。 表单（Form）是一种结构化的文件，用于收集用户信息，并将其提交到服务器，从而实现与用户的交互。 一个完整的表单应该包含两个部分：一是在网页中进行描述的表单对象；二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。浏览器处理表单的过程一般是这样的：用户在表单输入数据，然后提交表单，浏览器根据表单体中的设置处理用户输入的数据。若表单指定通过服务器端的脚步程序进行处理，则该程序处理完毕后将结果反馈给浏览器；若表单指定通过客户端的脚本程序处理，则处理完后也会将结果反馈给用户。 表单对象 页面处于“设计”视图，将插入点放在希望表单出现的位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”→“表单”→“表单”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“表单”按钮 。 一个表单插入到网页中后，在编辑窗口中显示为一个红色虚线框，其他的表单对象必须放入这个框内才能起作用。如果看不见到页面中的此轮廓线。请检查是否选中了“查看”→“可视化助理”→“不可见元素”。 设置表单属性 将鼠标指针置于表单的轮廓线上单击选中表单，即可看到表单的“属性”面板 表单“属性”面板 5.4.1插入文本字段 操作步骤如下： 页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”→“表单”→“文本域”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“文本字段”按钮 。 将弹出“输入标签辅助功能属性”对话框 单击“确定”按钮，在表单的光标位置插入一个 文本域。 页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”→“表单”→“文本区域”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“文本区域”按钮 。 弹出“输入标签辅助功能属性”对话框，单击“确定”按钮，在表单的光标位置插入一个 文本区域。 操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”→“表单”→“复选框组”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“复选框组”按钮 。 （2）弹出“复选框组”对话框，如图5-11所示，在对话框，可以按 增加复选框或按 减少复选框，按 移动复选框的位置。复选框的“值”（即“属性”面板中的“选定值”）用来设置在该复选框被选中时发送给服务器的。 （3）单击“确定”按钮，在表单的光标位置插入一个复选框组，包括两个复选框， “复选框组”对话框 操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”→“表单”→“单选按钮组”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“单选按钮组”按钮 。 （2）弹出“单选按钮组”对话框，对话框，可以按 增加单选按钮或按 减少单选按钮，按 按钮可以调整单选按钮的排列顺序。单选按钮的“值”（即“属性”面板中的“选定值”）用来设置在该单选按钮被选中时发送给服务器的值。 （3）单击“确定”按钮，在表单的光标位置插入一个单选按钮组，包括两个单选按钮. 操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”→“表单”→“列表/菜单”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“列表/菜单”按钮 。 （2）将弹出“输入标签辅助功能属性”对话框，单击“确定”按钮，在表