第9章表单使用

1、$ 知识目标知识目标 88 能力目标能力目标表单基础知识表单基础知识 网页中的表单用于网页中的表单用于创建：创建： 问卷问卷 注册信息注册信息 简答题简答题 调查调查 表单在网页中用于向网站的访问者请求信息 9.1 表单的基本概念表单的基本概念表单表单(form)主要用来收集用户的信息，并将其提交到服务器，主要用来收集用户的信息，并将其提交到服务器，从而实现网站管理者与客户之间的交互。如信息搜索、订单，问从而实现网站管理者与客户之间的交互。如信息搜索、订单，问卷、调查表、会员注册等。卷、调查表、会员注册等。表单一般由两个部分组成，表单一般由两个部分组成，一是在网页中用来收集信息的一是在网页中用

2、来收集信息的表单对象，包括表单、文本字表单对象，包括表单、文本字段、复选框、单选钮、列表菜段、复选框、单选钮、列表菜单等；二是对表单内容进行处单等；二是对表单内容进行处理的应用程序，可以是基于服理的应用程序，可以是基于服务器的，也可以是客户端的。务器的，也可以是客户端的。在“文档”窗口中创建的表单边框演示：插入表单的步骤第二步第一步9.2 表单的创建表单的创建表单表单属性属性 设置表单名称 设置表单动作设置表单方法 选择表单边框以查看其属性 表单元素表单元素 表单元素用于给网页增添表单元素用于给网页增添 可交互性可交互性 表单元素包括：表单元素包括： 文本字段文本字段 复选框复选框 单选按钮单

3、选按钮 按钮按钮 下拉菜单下拉菜单/列表框列表框访问者将使用这些元素将数据输入到表单中访问者将使用这些元素将数据输入到表单中表单对象指构成表单的元素。在表单对象指构成表单的元素。在“插入插入”栏的栏的“表单表单”类别中，包含了构成表单的所有元素，也可以通过菜单类别中，包含了构成表单的所有元素，也可以通过菜单“插入插入”|“表单表单”命令，选择子菜单中的表单对象。命令，选择子菜单中的表单对象。从左到右，各按钮依次为：表单、文本字段、隐藏域、从左到右，各按钮依次为：表单、文本字段、隐藏域、文本区域、复选框、单选钮、单选按钮组、列表文本区域、复选框、单选钮、单选按钮组、列表/菜单、跳菜单、跳转菜单、

4、图像域、文件域、按钮、标签和字段集。转菜单、图像域、文件域、按钮、标签和字段集。 表单创建的说明表单创建的说明一、表单的构成一、表单的构成向文档中插入表单的操作为：向文档中插入表单的操作为：1定位光标在文档中要插入表单的位置。定位光标在文档中要插入表单的位置。2执行以下操作之一：执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“表单表单”命令命令在在“插入插入”栏的栏的“常用常用”类别中，单击类别中，单击“表单表单”按钮按钮3向文档中插入了表单标签，添加表单标签后的文档会出现一个向文档中插入了表单标签，添加表单标签后的文档会出现一个红色的虚线框如图所示。红色的虚线框如图所

5、示。二、二、 插入表单插入表单单击表单红色的框线或单击窗口左下角标签选择器中单击表单红色的框线或单击窗口左下角标签选择器中的的标签，就可以选中表单，并在属性检查器（如图）标签，就可以选中表单，并在属性检查器（如图）中对其进行设置。中对其进行设置。三、三、 表单的属性表单的属性演示：插入表单元素的步骤文本框密码框文本域9.3 创建文本域创建文本域文本域有：单行文本域、多行文本域和密码域。文本域有：单行文本域、多行文本域和密码域。1创建单行文本域或密码域创建单行文本域或密码域（1）定位光标要插入文本域的位置。如在）定位光标要插入文本域的位置。如在“用户名用户名”右侧单元格右侧单元格里定位光标。里定

6、位光标。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“文本字段文本字段”命令；命令；在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“文本字段文本字段”按钮按钮 。（3）单击选中己创建的文本域，在属性检查器中设置文本域属性。）单击选中己创建的文本域，在属性检查器中设置文本域属性。9.3 创建文本域创建文本域（4）重复上述方法，创建）重复上述方法，创建“密码、密码、“出生年月出生年月”及及“地址地址”的文本域。设置完成的表单如图所示。的文本域。设置完成的表单如图所示。2创建多行文本域创建多行文本域（1）定位光标要插入文本域的位置。在

7、）定位光标要插入文本域的位置。在“个人简介个人简介”右侧右侧单元格里定位光标。单元格里定位光标。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“文本区域文本区域”命令。命令。在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“文本区域文本区域”按钮按钮 。（3）单击选中文本域，在属性检查器中设置文本域的属性，）单击选中文本域，在属性检查器中设置文本域的属性，如图。如图。演示：插入表单元素的步骤三种类型的按钮9.4 创建按钮创建按钮1、标准表单按钮、标准表单按钮 标准表单按钮通常标准表单按钮通常 标记为标记为“提交提交”，“重置重置”，

8、“发送发送”，方法如下：，方法如下： （1）定位光标在最下面的单元格里。）定位光标在最下面的单元格里。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“按钮按钮”命令。命令。在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“按钮按钮” 。（3）向文档中插入一个按钮，选中按钮，在属性检查器）向文档中插入一个按钮，选中按钮，在属性检查器进行设置。进行设置。 （4）重复上述操作创建）重复上述操作创建“重置重置”按钮。按钮。9.4 创建按钮创建按钮（1）定位光标在插入图像域的位置。）定位光标在插入图像域的位置。（2）执行以下操作之一：）执行以

9、下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“图像域图像域”在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“图像域图像域”按钮按钮 。（3）打开）打开“选择图像源选择图像源”的对话框，选择图像确定后，则的对话框，选择图像确定后，则向表单中添加一个图像。向表单中添加一个图像。 （1）定位光标在）定位光标在“上传形象上传形象”右侧的单元格里。右侧的单元格里。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“文件域文件域”在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“文件域文件域”按钮按钮 。（3）向文

10、档中插入）向文档中插入“文件域文件域”项，如图所示。项，如图所示。 1、插入单选按钮、插入单选按钮 （1）定位光标在）定位光标在“男男”或或“女女”的前面。的前面。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“单选按钮单选按钮”命令。命令。在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“单选按钮单选按钮” 。9.5 插入单选按钮与复选框插入单选按钮与复选框 （3）单击选中单选按钮，在属性检查器中设置属性，）单击选中单选按钮，在属性检查器中设置属性，设置方法同复选框。将设置方法同复选框。将“男男“选项设为选项设为“己勾选己勾选”，

11、如图，如图所示。所示。 （4）重复上述方法向单元格中插入另外一个单选按钮，作）重复上述方法向单元格中插入另外一个单选按钮，作为为“性别性别”的的“女女”选项。选项。9.5 插入单选按钮与复选框插入单选按钮与复选框2、插入复选框、插入复选框 （1）定位光标在）定位光标在“爱好爱好”右侧单元格内的右侧单元格内的“体育体育”前面。前面。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“复选框复选框”命令。命令。在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“复选框复选框”按钮按钮 。（3）单击选中复选框，在属性检查器中设置属性如图。）单击

12、选中复选框，在属性检查器中设置属性如图。 （4）重复上述方法向单元格中插入多个复选框，作为）重复上述方法向单元格中插入多个复选框，作为“爱爱好好”的备选选项。如图。的备选选项。如图。9.5 插入单选按钮与复选框插入单选按钮与复选框 （1）定位光标在插入单选按钮的位置。）定位光标在插入单选按钮的位置。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“单选按钮组单选按钮组”命令。命令。在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“单选按钮组单选按钮组”按按钮钮 。（3）打开）打开“单选按钮组单选按钮组”的对话框，如图所示。的对话框，如

13、图所示。 “名称名称”：输入该单选按钮组的名称。：输入该单选按钮组的名称。“+”和和“”：用于增加和删除单选按钮项目。增加一个单：用于增加和删除单选按钮项目。增加一个单选按钮，输入标签和选定值。选按钮，输入标签和选定值。“向上向上”或或“向下向下”箭头：用于调整按钮的排序。箭头：用于调整按钮的排序。 “布局，使用布局，使用”：选择在：选择在Dreamweaver8中对这些按钮进中对这些按钮进行布局时使用的格式。行布局时使用的格式。（4）设置完成后，单击）设置完成后，单击“确定确定”，创建了单选按钮组，如，创建了单选按钮组，如图所示。图所示。演示：插入表单元素的步骤9.6 列表列表/菜单菜单 1

14、、插入列表、插入列表/菜单菜单 如如“出生年月日出生年月日”中的中的“月月”和和“日日”，“月月”的选项以的选项以112作为备选月份，作为备选月份，“日日”选项则设定选项则设定131，以避免用户随意，以避免用户随意添写。创建列表添写。创建列表/菜单的操作为：菜单的操作为：（1）定位光标在）定位光标在“月月”或或“日日”的前面。的前面。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“列表列表/菜单菜单”命令。命令。在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“列表列表/菜单菜单”按钮按钮 。（3）单击选中列表）单击选中列表/菜单，

15、在属性检查器中设置属性。菜单，在属性检查器中设置属性。9.6 列表列表/ /菜单菜单 “列表列表/菜单菜单”：为列表：为列表/菜单输入唯一标识的名称。菜单输入唯一标识的名称。“类型类型”：有：有“菜单菜单”和和“列表列表”两种类型。两种类型。“列表值列表值”：点击：点击“列表值列表值”按钮，会弹出设置列表值的对按钮，会弹出设置列表值的对话框，如图所示。话框，如图所示。（4）使用）使用“+”来增加项目，用来增加项目，用“-”来删除项目；输入每个来删除项目；输入每个项目的标签文本和可选值。使用向上或向下箭头按钮重新排列项目的标签文本和可选值。使用向上或向下箭头按钮重新排列列表中的项。列表中的项。（

16、5）分别为）分别为“月月”添加添加“1-12”备选选项，为日添加备选选项，为日添加“1-31”备选选项。备选选项。 （1）定位光标在）定位光标在“友情链接友情链接”右侧的单元格里。右侧的单元格里。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“表单表单”|“跳转菜单跳转菜单”命令。命令。在在“插入插入”栏的栏的“表单表单”类别中，单击类别中，单击“跳转菜单跳转菜单”按钮按钮 。（3）打开）打开“插插入跳转菜单入跳转菜单”对话框。对话框。2、创建跳转菜单创建跳转菜单 “+”或或“-”按钮：用来增加或减少菜单选项。按钮：用来增加或减少菜单选项。“向上向上”或或“

17、向下向下”箭头按钮：用于向上或向下改变菜单项箭头按钮：用于向上或向下改变菜单项在列表中的位置。在列表中的位置。“文本文本”：输入跳转菜单的名称或要链接文档的名称。：输入跳转菜单的名称或要链接文档的名称。“选择时，转到选择时，转到URL”：选择或输入菜单项要链接的文件的：选择或输入菜单项要链接的文件的路径，如输入路径，如输入http:/，可以建立指向，可以建立指向“网易网易”的的链接。链接。“打开打开URL于于”：选择打开文档的目标窗口；：选择打开文档的目标窗口；（4）完成上述设置后，点击）完成上述设置后，点击“确定确定”按钮，则在文档中插按钮，则在文档中插入了跳转菜单如图所示。入了跳转菜单如图

18、所示。（5）跳转菜单的属性设置同）跳转菜单的属性设置同“列表列表/菜单菜单”的设置。的设置。1单击菜单栏中单击菜单栏中“窗口窗口”|“行为行为”命令，打开行为面板。命令，打开行为面板。2在文档中选择用户名文本域在文档中选择用户名文本域“name”。3点击行为面板中的点击行为面板中的“+”，在弹出地快捷菜单中选择，在弹出地快捷菜单中选择“检检查表单查表单”命令，将弹出检查表单对话框，如图所示。命令，将弹出检查表单对话框，如图所示。4设置设置“name“文本域的文本域的“值值”是是“必需的必需的”，即选中该，即选中该复选框；在复选框；在“可接受可接受”的范围里选择的范围里选择“任何东西任何东西”；5点击点击“确定确