5.3 Dreamweaver制作表单

表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息，它也是实现动态网页的一种主要表现形式。下面我们就使用Dreamweaver CS3快速地创建常用的表单页面。

一、什么是表单

表单是网站管理者与访问者之间沟通的桥梁，包含如按钮、文本框、下拉列表框、单选按钮、复选框等表单元素。表单元素用于接受用户的输入并提供一些交互式操作。用户输入的数据可以通过客户端脚本来验证，然后提交给服务器作进一步的处理。

表单在万维网(www)上应用非常广泛，而且仍在不断发展。下面是一个“注册”表单的典型例子，如图1所示。

图1 注册表单页面

二、表单的使用

在Dreamweaver CS3中，如何实现如图1所示的“注册”表单页面？一看图1就知道这是一个表单，所以要插入表单，再仔细看看表单域里面的文字和表单元素是不是都很规整、井然有序？是的，这是什么在起作用？表格，所以这里还使用了表格对表单中的元素进行布局。经过这么一分析，我们基本上知道了图5.13所示的“注册”表单页面是由表单、表格以及表单元素构成的。

下面我们就一步一步地实现如图1所示的表单页面。

1.插入表单

在Dreamweaver中插入表单时，表单以红线显示。用浏览器浏览时，这条线不会出现在网页上，仅在Dreamweaver中编辑时可见。添加到表单的每个项目都必须在表单内部，
否则将视之为另一个表单，了解这一点是非常重要的。为了布局美观，您可以将表格和图形等对象放置到表单标签内。

要将表单插入网页，请执行以下步骤。

(1) 新建空白文档，将插入点放置在“文档”窗口内要插入表单的地方。单击“表单”工具栏中“表单”图标，或在菜单中选择“插入”一“表单”命令。

(2) 此时Dreamweaver即插入一个表单，如图2所示。在“设计”视图中，表单边框线显示为红色。如果未显示红色边框线，请选择“查看”一“可视化助理”一“不可见元素”命令。单击表单边框线或选择“文档”窗口左下角的表单标签（<form>）可以选中整个表单。

(3) 将鼠标放到表单域内或选中表单域，此时在“属性”面板中就可以设置表单域的各项属性，如图2所示。

● 动作：此属性指定表单提交到服务器后，处理表单信息的动态页或脚本文件的位置，一般是一个URL路径，可以单击“浏览文件”图标来选择适当的页面或脚本文件。这里指定为 www.lodidance.com。

● 方法：可指定用于将表单数据提交到服务器的方法。当用户提交表单时，有GET和POST两种方式可将浏览器的信息发送至服务器。选POST方式比较安全。

在设置好表单域的各个属性后，一个表单就创建好了。

2.插入表单元素

(1) 在表单域里单击，然后插入一个10行2列的表格，合并最后1行所有单元格，再合并倒数第2行所有单元格，其他设詈如图3所示。

(2) 在表格的第1、第2、第3和第4行的第1列分别输入文本“登录名：”、“密码：”、“再次输入密码：”和“电子邮箱：”：先把光标定位到要插入表单元素的单元格，然后使用“表单”工具栏，在第2列中分别依次插入一个文本框、两个密码框和一个文本框，属性设置如图4和图5所示。

(3) 在表格的第5行第1列中输入文本：“性别：”；在第2列中插入一个单选按钮组，并调整两个单选按钮的位置，使其处于同一行，然后在相应位置后插入男女图标，其设置如图6所示。

图6 按钮组属性设置

(4) 在表格的第6行第1列中输入文本：“爱好：”；在第2列中插入3个复选框，并在其后输入相应的文本，以提示用户的选择。

(5)在表格的第7行第1列中输入文本：  “出生日期：”；在第2列中插入2个文本框和一个“列表／菜单”。单击“属性”面板中的“列表值”按钮，设置其列表值如图7所示。

图7 列表属性设置

(6) 在表格的第8行第1列和第2列分别插入一个按钮，左边的按钮动作为“重设表单”，右边的按钮动作为“提交表单”，并修改右边按钮的值为“同意以下服务条款，提交注册信息”。

(7) 在表格的第9行，直接插入一个文件域即可。

(8) 在表格的第10行，先插入一个图标“read.gif‘’，然后输入相应文本，最后插入一个多行文本域，其设置如图8所示。

图8 多行文本域属性设置

(9) 把表格的第1列第1行到第9行单元格背景色设为“#E7FBFF”。

最后所有的内容填充完和所有的表单元素插入完的效果如图9所示。

图9 注册表单元素在设计视图里的效果

本节作业：

使用Dreamweaver制作如下图所示的页面效果。

注意事项：

1.灵活运用Dreamweaver属性面板设置。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！

点击下载第五章案例及作业资源 返回《HTML入门经典》教程列表