实验七 制作表单

实验七制作表单

【实验目的】

1．熟练掌握网页中表单的制作方法。

2．熟练掌握Dreamweaver CS6用户注册表单网页的制作。

3．熟练掌握添加行为检查表单。

【实验环境】

1.工具软件：Dreamweaver CS6

2．制作如图7-1所示的“用户注册”表单网页。

图7-1

【实验内容】

1．练习表单的制作。

2．制作如图所示的“用户注册”表单网页。

3. 练习检查表单操作。

【实验步骤】

1．创建本地站点。

2.1 创建表单

（1）新建一个网页，将光标定位在希望表单出现的位置上。

（2）执行【插入】->【表单】->【表单】命令，或选择“插入”栏上的“表单”类别，然后单击“表单”按钮。

（3）这时文档中将插入一个空的表单，如图7-2所示。在“设计”视图中，红色的虚轮廓线表示表单。

注意：如果没有看到红色的虚轮廓线，请检查是否选中了【查看】->【可视化助理】->【不可见元素】选项。

图7-2 红色的虚轮廓线表示表单

（4）选定上面的表单，显示表单属性面板，如图7-3所示。

图7-3表单属性面板

表单属性：

•表单名称：标识该表单的惟一名称。命名表单后，就可以使用脚本语言（如JavaScript 或VBScript）引用或控制该表单。

•动作：指定处理该表单的动态网页或脚本的路径（如asp/、php、jsp等）。

可以在“动作”文本框中键入完整路径，也可以单击文件夹图标以选择一个动态网页或脚本。

•方法：选择将表单数据传输到服务器的方法，POST方法将在HTTP请求中嵌入表单数据；GET方法是将值附加到请求该页面的URL中；默认方法是使用浏览器的默认设置将表单数据发送到服务器。

•MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型，默认设置为“application/x-www-form-urlencode”通常与POST方法协调使用。如果要创建文件上传域，需指定“multipart/form-data MIME”类型。

•目标：设置提交表单后的目标浏览器。

2.2 插入文本字段

文本域可以接受任何类型的输入内容。文本可以单行或多行显示，也可以以密码域的方式显示。

插入文本字段步骤如下：

（1）定位光标在表单中，在表单中插入表格，并填充内容，如图7-4所示。

图7-4 在表单中插入表格

（2）将光标定位在“用户名”右边的单元格中，执行【插入】->【表单】->【文本域】命令，或选择“插入”栏上的“表单”类别，然后单击“文本字段”图标，显示“输入标签辅助功能属性”对话框，如图7-5所示。

图7-5 “输入标签辅助功能属性”对话框

（3）若以后不想在插入表单元素时显示“输入标签辅助功能属性”对话框，单击对话框下面的链接文字“请更改…辅助功能‟首选参数”，显示“首选参数”对话框，如图7-6所示，取消“表单对象选项”。

图7-6 取消“表单对象选项”

（4）单击“确定”按钮，保持“输入标签辅助功能属性”对话框中的值不变，单击“确定”按钮，

文本字段被插入文档中，如图7-7所示。

图7-7文本字段被插入文档中

（5）选择该文本域，显示文本域属性面板，如图7-8所示。

图7-8 文本域属性面板

文本域属性：

•文本域：指定该文本域惟一的名称。

•字符宽度：设置文本域中最多可显示的字符数。

•最多字符数：设置单行文本域中最多可输入的字符数。

•换行：选中了“多行”选项，指定当用户输入的信息较多时如何换行显示。

•类型：指定文本域为单行、多行还是密码域。

•初始值：指定在载入表单时文本域中要显示的内容。

（6）为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】->【表单】->【文本字段】命令，插入一个文本字段。选中该文本字段，在属性面板中将“类型”由“单行”改为“密码”，则创建一个密码域。

（7）为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】->【表单】->【文本字段】命令，插入一个文本字段。选中该文本字段，在属性面板中将“类型”由“单行”改为“多行”，则创建一个多行文本域。此时文档中页面效果如图7-9所示。

图7-9 插入多行文本字段文档中页面效果

（8）保存，按快捷键F12预览，在文本字段中输入文字，效果如图7-10所示。

图7-10 预览并在文本字段中输入文字

注意：要插入多行文本字段也可以直接执行【插入】->【表单】->【文本区域】命令，效果和插入多行文本字段一样。

2.3 插入单选按钮

使用单选按钮，只能在一组选项中选择一个选项，单选按钮通常成组出现，并且同一组中的所有单选按钮必须具有相同的名称。插入单选按钮步骤如下：

（1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】->【表单】->【单选按钮】命令，插入一个单选按钮。选中该单选按钮，属性面板如图7-11所示。

图7-11 单选按钮属性面板

单选按钮属性：

单选按钮：在文本框中，为该对象指定一个名称。

选定值：设置在该单选按钮被选中时发送给服务器的值。

初始状态：当在浏览器中载入表单时，该单选按钮是否被选中。

（2）选中该单选按钮，在属性面板中将“初始状态”由“未选中”改为“已选中”，并在该单选按钮右边输入文字说明。

（3）再插入一个单选按钮，并在该单选按钮右边输入文字说明，此时文档中页面效果如图7-12所示。

图7-12 插入单选按钮

2.4 插入单选按钮组

插入单选按钮可以一个一个地插入，也可以用插入单选按钮组的方法一次插入多个