网页设计与制作第五章表单的应用.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）将弹出“输入标签辅助功能属性”对话框，单击“确定”按钮，在表