在Dreamweaver中，制作表单可以通过表单对象实现，表单对象位于“插入”工具栏的“表单”分类中。

【例12-2】制作“会员登记表”，效果如图12-10所示。

1.新建并保存网页

（1）启动Dreamweaver，在本地站点的contact文件夹下新建一个空白网页文档。

（2）单击“文件”菜单→“保存”命令，将该网页命名为member.html。

2.插入表格

在创建表单之前，先插入一个用于布局的表格，然后在表格中插入表单。这样可以对表单进行准确定位，且表单外框的大小也容易控制。

（1）单击＜body＞标签，单击“属性”面板中的“居中对齐”按钮设置页面为居中对齐。

（2）单击“插入”菜单→“表格”命令，插入一个2行1列的表格，宽度为600像素。由于该表格仅用于布局，所以将表格的边框粗细设置为0。

图12-10　“会员登记表”表单实例

（3）将光标定位于表格的第1行，设置对齐方式为居中对齐，字体设置为“隶书”，大小为36px，输入“四季春水果行会员登记表”。

3.插入表单

在创建表单对象之前，必须先在页面中添加表单。向文档添加表单的操作步骤如下：

（1）将光标定位于表格的第2行，设置对齐方式为居中对齐。

（2）在“插入”工具栏的“表单”分类中单击“表单”按钮。

（3）在“属性”面板中命名表单名称为memberform，插入的表单如图12-11所示。表单区域的边界为红色虚线外框，只有在红色虚线内才能插入表单对象，而红色虚线在浏览器中是不可见的。

图12-11　插入表单

4.插入文本框

（1）将光标定位在表单中，输入文字“您的姓名：”。

（2）在“插入”工具栏的“表单”分类中单击“文本字段”按钮，插入一个单行文本框。在“属性”面板中设置“文本域”为xm，“字符宽度”和“最多字符数”均为10，“类型”为“单行”，如图12-12所示。

图12-12　设置姓名文本框的属性

（3）按下Shift+Enter键产生一个软回车，输入文字“输入密码：”。

（4）单击“文本字段”按钮，插入第二个单行文本框。在“属性”面板中设置“文本域”为password，“字符宽度”和“最大字符数”均为10，“类型”为“密码”，如图12-13所示。这样用户将来输入的密码以“*”显示。

图12-13　设置密码文本框的属性

5.插入单选按钮组

在要求用户从一组选项中只能选择一个选项时，需使用单选按钮。单选按钮通常成组使用。一个组中的所有单选按钮必须具有相同的名称，而且必须包含不同的域值。

（1）按回车键换行，输入提示信息“性别：”。

（2）在“插入”工具栏的“表单”分类中，单击“单选按钮组”按钮，打开“单选按钮组”对话框。

（3）在对话框中设置单选按钮组的名称为xb，两个单选按钮的标签（Label）分别设置为“男”和“女”，提交值（Value）也分别设置为“男”和“女”，布局使用“换行符”，如图12-14所示。

（4）单击“确定”按钮后，如果生成的单选按钮组在位置上发生错位，这是由于在“单选按钮组”对话框中选择使用的布局是“换行符”造成的。因为换行符自动在单选按钮之间插入＜br/＞标签，引起单选按钮的换行。将光标定位到单选按钮“男”之后，按Delete键删除＜br/＞标签，即可解决以上问题。

图12-14　“单选按钮组”对话框

（5）按回车键换行，按照上述方法再制作一个“最爱吃的水果：”的单选按钮组。

6.插入复选框(www.daowen.com)

复选框允许用户从一组选项中选择多个选项。

（1）按回车键换行，输入提示信息“经常吃的水果：”。

（2）在“插入”工具栏的“表单”分类中单击“复选框”按钮，插入一个复选框。在“属性”面板中设置“复选框名称”为txg，“选定值”为txg，“初始状态”为“未选中”，如图12-15所示。在复选框后面输入文字“苹果”。

（3）按照同样的方法在“苹果”复选框后，接着制作其他复选框。

图12-15　设置复选框属性

7.插入下拉菜单

（1）按回车键换行，输入提示信息“您的年龄：”。

（2）在“插入”工具栏的“表单”分类中单击“列表/菜单”按钮插入一个下拉菜单。在“属性”面板中设置菜单的名称为age，“类型”设置为“菜单”，然后单击“列表值”按钮，在“列表值”对话框中输入菜单的全部选项，如图12-16所示。

（3）单击“确定”按钮，完成菜单选项的定义。

（4）在“属性”面板中设置“初始化时选定”的值为“20～40岁”，如图12-17所示。

图12-16　“列表值”对话框

图12-17　设置下拉菜单显示的初始值

8.插入电子邮件文本字段

在“您的年龄：”下拉菜单右侧输入提示信息“电子邮件：”，然后插入一个文本字段。在“属性”面板中命名文本字段的名字为email，“字符宽度”为30，“类型”为“单行”，如图12-18所示。

图12-18　设置电子邮件文本字段的属性

9.插入文本域

文本域也叫多行文本框，能够为用户提供更多的空间，输入更多的信息。

（1）按回车键换行，输入提示信息“您的意见和建议”，然后按Shift+Enter键产生一个软回车。

（2）在“插入”工具栏的“表单”分类中单击“文本区域”按钮，插入一个文本域。

（3）在“属性”面板中，命名“文本域”的名字为about，设置“字符宽度”为50，“行数”为4，“换行”为“默认”，“类型”为“多行”（默认），如图12-19所示。

图12-19　设置文本域属性

10.插入按钮

（1）按回车键换行，在“表单”分类中单击“按钮”按钮，插入一个按钮。

（2）在“属性”面板中，设置“按钮名称”、“值”、“动作”均为系统默认值，如图12-20所示。

图12-20　添加“提交”按钮

（3）在“提交”按钮的右侧插入中文全角空格，单击“按钮”按钮插入另一个按钮。在“属性”面板中先设置“动作”为“重设表单”，此时按钮的“值”自动改为“重置”，只需改变“按钮名称”为reset即可，如图12-21所示。

11.保存并预览网页

单击“文件”菜单→“保存全部”命令，将页面保存，按F12键预览网页。

图12-21　添加“重置”按钮