中文版-Dreamweaver-CS6网页设计教程-第9章.ppt

第9章 表单的使用 本章主要内容 创建表单。 创建表单对象。 本章重点 创建表单的方法。 表单对象的使用方法。 9.1 表 单 概 述 在服务器端，数据信息由通用网关接口程序(GGI)、ColdFusion、Java Server Page (JSP)或者Active Server Page (ASP)等程序脚本进行处理。图9-2所示为处理表单的流程。 使用Dreamweaver CS6可以创建各种表单对象，如文本域、复选框、单选按钮、列表/菜单等。同时，Dreamweaver CS6内置的“检查表单”行为可以检查表单内容的合法性，提示用户输入正确的数据，如图9-3所示。 9.1 表 单 概 述 在Dreamweaver CS6中，使用相关面板和命令可以插入各种表单对象。单击“表单”标签，将其切换到“表单”分类。可以看到，各种“表单”对象都罗列在这个面板中，只需单击对应的图标按钮，就可以在页面中插入表单对象，如图9-4所示。 另外，选择Dreamweaver CS6菜单栏中的“插入”|“表单”命令也可以插入表单，如图9-5所示。 9.2 创 建 表 单 在插入栏“表单”选项卡中单击“表单”按钮，在页面中插入表单。插入表单后，在文档窗口中出现红色虚框线，如图9-6所示。 在访问服务器端数据库时，表单的属性有着很重要的作用。将光标移到表单域的红色范围线上单击，这时属性面板如图9-7 所示。 9.3 表单对象的设计 插入表单后，就可以添加表单对象了。在HTML代码中，表单对象都添加在form和/form之间。常见的表单对象不外乎文本域、隐藏域、复选框、单选按钮、列表和菜单、跳转菜单、图像域、文件域、按钮等。下面介绍这些表单元素的创建方法及属性设置的相关知识。 9.3.1 创建文本域 文本域中可以输入任何类型的文本、字母或数字。文本域有三种类型，即单行文本域、多行文本域和密码域。输入的文本可以显示为单行、多行、星号，其中在密码域中输入的文本将显示为星号，从而保护密码。图9-8所示为三种类型的文本域示例。 1. 单行文本域及其属性设置 2. 密码域 3. 多行文本域及其属性设置 9.3.2 创建隐藏域 1. 插入隐藏域 执行下列步骤之一插入隐藏域。 选择“插入”|“表单”|“隐藏域”命令。 在插入栏中单击“表单”选项卡中的按钮。 将图标从“插入”面板上拖放到文档窗口中。 在文档中出现隐藏域标识符，如图9-15所示。 2. 设置隐藏域属性 单击隐藏域标识符，出现隐藏域“属性”面板，如图9-16所示。 9.3.3 创建复选框 复选框可以使用户在多个选项中进行多重选择，如图9-17所示。 1. 插入复选框 2. 设置复选框属性 9.3.4 创建单选按钮 1. 插入单个单选按钮 2. 插入一组单选按钮 3. 设置单选按钮属性 9.3.5 创建列表和菜单 1. 滚动列表及其属性设置 2. 下拉菜单及其属性设置 9.3.6 创建跳转菜单 1. 插入跳转菜单 下面是在表单中创建跳转菜单的操作步骤。 (1) 将光标放在表单框线内，选择下列操作之一。 选择“插入”|“表单”|“跳转菜单”命令。 在插入栏中单击“表单”选项卡中的按钮。 将图标从“插入”面板上拖放到文档窗口中。 (2) 打开“插入跳转菜单”对话框，如图9-30所示。 (3) 设置完成后，单击“确定”按钮退出“插入跳转菜单”对话框，在表单中插入跳转菜单。 9.3.6 创建跳转菜单 2. 设置跳转菜单属性 选择插入的跳转菜单，可以看到跳转菜单的“属性”面板实际上与列表/菜单的“属性”面板一样，如图9-31所示。 跳转菜单的属性设置方法和列表/菜单的相同，请参照前面相关的内容。此外，单击 “属性”面板上的“列表值”按钮，弹出“列表值”对话框，可编辑跳转菜单的菜单项，如图9-32所示。 9.3.7 创建图像域 使用图像域可以创建漂亮的图像按钮来替代普通的按钮，如图9-33所示。 下面是创建图像域及设置其属性的操作步骤。 (1) 选择以下操作之一。 选择“插入”|“表单”|“图像域”命令。 在插入栏中单击“表单”选项卡中的按钮。 将图标从“插入”面板上拖放到文档窗口中。 (2) 打开“选择图像源文件”对话框，在磁盘上选择图像文件，如图9-34所示。 (3) 选择图像文件后单击“确定”按钮，插入图像域，如图9-35所示。 (4) 插入图像域后在文档窗口下方出现图像域“属性”面板，如图9-36所示。 9.3.8 创建文件域 下面是插入文件域及设置其属性的具体操作步骤。 (1) 单击文档窗口下方标签栏中的form标签，选择表单，打开表单“属性”面板，在“属性”面板中将“方法”设置为POST；在“编码类型”下拉列表框中选择multipart/form-da