网页制作案例教程7-8章

第七章 问卷调查

【任务综述】

本任务是一个问卷调查网

页，效果如图7-1所示，通

过本任务主要实现：

1．创建表单

2．添加表单对象

3．检查表单

【任务实现】

步骤一：创建表单域操作步骤：

(1) 建立站点。将本书配套光盘中的案例素材文件夹ch7中的所有文件

及子文件夹复制到站点文件夹下。

(2) 打开站点下wenjuan.html文件，将光标置于中间的空白单元格内，然后单击【表单】插入栏中的“表单”按钮 ，插入一个红色的虚轮廓线框，即表单域。(3) 将光标置于表单域内，单击【常用】插入栏中的“表格”按钮 ，弹

出【表格】对话框。在弹出的对话框中将行数设置为10、列数设置

为2、表格宽度设置为510像素、边框粗细设置为1、单元格边距设

置为0，单击“确定”按钮。然后在【属性】面板的“对齐”下拉列表

中选择“居中对齐”选项。

(4)在左侧各个单元格内输入文字，然后在【属性】面板中将第一列单元格宽度设置为165，如图7-2所示。

(5)选中第一列单元格并在【属性】面板中按照图7-3

所示进行设置。

步骤二：为“姓名”添加“Spry验证文本域”表单对象操作步骤：

(1) 将光标置于“姓名”右侧的单元格内，然后单击【表单】插入栏中的

“Spry验证文本域”按钮 ，弹出【输入标签辅助功能属性】对话框，

在“标签文字”文本框中输入“文本域”前面要显示的文字，在“样式”和“位置”选项组中选择标签样式和显示位置，也可以不做任何设置，单击“确定”按钮，即插入了一个Spry验证文本域构件。

(2) 选中插入的Spry验证文本域，然后在【属性】面板中“文本域”下面的

文本框中输入“姓名”，如图7-4所示：

(3) 单击Spry验证文本域上方的蓝色区域，在【属性】面板的“预览状态”下拉列表中选择“必填”选项；在“最小字符数”文本框中输入4，然后按下“Enter”键；在“最大字符数”文本框中输入15，然后按下“Enter”键；最后选中“onBlur”复选框。如图7-5

所示。

步骤三：为“性别”添加“单选按钮”表单对象操作步骤：

(1) 将光标置于“

性别

”右侧的单元格内，然后单击【表单】插入栏中的“单

选按钮”按钮 ，在弹出的【输入标签辅助功能属性】对话框中单击“

确定”按钮，插入一个单选按钮。选中插入的单选按钮，然后在【属性】面板中按照图7-6所示进行设置。

(2) 将光标置于单选按钮右侧，然后输入文字“男”，选中文字并在【属性】面板按照图7-7所示进行设置。

(3) 将光标置于“男”的右侧，单击【表单】插入栏中的“单选按钮”按钮 ，再插入一个单选按钮。选中插入的单选按钮，然后在【属性】

面板中按照图7-8所示进行设置。

(4) 将光标置于单选按钮右侧，然后输入文字“女”，选中文字并在【属性】面板中按照图7-7所示进行设置。

步骤四：为“年龄”添加“单选按钮组”表单对象操作步骤：(1) 将光标置于

“年龄”右侧的单元格内，然后单击【表单】插入栏中的

“单

选按钮组”按钮 ，弹出“单选按钮组”对话框，单击 按钮可以增加选项。按照图7-9所示进行设置。

(2) 单击“确定”按钮后按照图7-10所示调整按钮组的位置。

(3) 分别选中4个单选按钮右侧的文字，并在【属性】面板中按照图7-7

所示进行设置。

步骤五：为“职业”添加“Spry验证选择”表单对象操作步骤：

(1) 将光标置于“职业”右侧的单元格内，然后单击【表单】插入栏中的“Spry验证选择”按钮 ，在弹出的【输入标签辅助功能属性】对话框中单击“确定”按钮，插入一个Spry验证选择构件。选中插入的Spry验证选择，然后在【属性】面板中的“列表/菜单”下面的文本框中输入“职业”，在“类型”选中“列表”选项，并将“高度”设置为5。单击“列表值”按钮打开【列表值】对话框，单击对话框顶部的 按钮可以添加相应的列表值。按照图7-11所示进行设置然后单击“确定”按钮。

(2) 单击Spry验证选择上方的蓝色区域，然后在【属性】面板的“预览

状态”下拉列表中选择“必填”选项；最后选中“onBlur”复选框。

步骤六：为“地区”添加“Spry验证选择”表单对象

操作步骤：

(1) 将光标置于“地区”右侧的单元格内，然后单击【表单】插入栏中的“Spry验证选择”按钮 ，在弹出的【输入标签辅助功能属性】对话框中单击“确定

”按钮，插入一个Spry验证选择构件。选中插入的Spry验证选择，然后在【属性】面板中的“列表/菜单”下面的文本框中输入“地区”，单击“列表值”按钮打开“列表值”对话框，单击对话框顶部的 按钮可以添加相应的列表值。按照图7-12所示进行设置然后单击“确定”按钮。

(2) 单击Spry验证选择上方的蓝色区域，然后在【属性】面板的“预览状态”下拉列表中选择“必填”选项；最后选中“onBlur”复选框。

步骤七：为“联系电话”添加“Spry验证文本域”表单对象操作步骤：

(1) 将光标置于“联系电话”右侧的单元格内，然后单击【表单】插入栏中的“Spry验证文本域”按钮 ，在弹出的【输入标签辅助功能属性】对话框中单击“确定”按钮，插入一个Spry验证文本域构件。选中插入的Spry验证文本域，然后在【属性】面板中“文本域”下面的文本框中输入“联系电话”。

(2) 单击Spry验证文本域上方的蓝色区域，在【属性】面板的“类型”下拉列表中选择“电话号码”选项；在“格式”下拉列表中选择“自定义模式”选项；在“预览状态”下拉列表中选择“必填”选项；最后选中“onBlur”复选框。

”添加“Spry验证文本域”表单对象步骤八：为“E-mailE-mail”操作步骤：

(1) 将光标置于“E-mail”右侧的单元格内，然后单击【表单】插入栏中的“Spry验证文本域”按钮 ，在弹出的【输入标签辅助功能属性】对话框中单击“确定”按钮，插入Spry验证文本域构件。选中插入的Spry验证文本域，然后在【属性】面板中“文本域”下面的文本框中输入“email”。

(2) 单击Spry验证文本域上方的蓝色区域，在【属性】面板的“类型”下拉列表中选择“电子邮件地址”选项；在“预览状态”下拉列表中选择“无效格式”选项；最后选中“onBlur”复选框。