第二十四节 表单

第二十四节 表单

表单的作用就是能使访问者与网站或网站管理人交互。利用表单，可根据访问者输入的信息，自动生成页面反馈给访问者；利用表单，还可以为网站收集访问者输入的信息。表单的使用其实可分为两部分。一部分是表单本身，即怎样把表单作为页面元素加入到网页页面。另一部分为表单的处理，即调用服务器端的脚本程序，或使以电子邮件的方式发送。本节内容主要是如何将表单加入网页页面。

点击Objects面板上方的form按钮，弹出一个选框。点击head，则Objects面板切换到form模式。

下图是一个表单制作的例子。本节将具体分析这个实例，来说明表单的制作。

显然，这个表单由两个文本框和一个文本域构成。

下面是制作步骤。 首先切换Objects面板到Forms模式，点击图标，在Dreamweaver主窗口上画出一个表单区域。 点击表单区域红色的边框，即选中这个表单。此时，表单的Proprties面板如下图所示。

在Properties面板的Form Name下面填入对这个表单的命名。这里，我们填入a。 Action是设置你相应的服务器端脚本程序的地址，或是设置用Email发送至指定的信箱。
Method后设置表单的提交方式，一般是在其后的下拉选框中选择POST。 表单的整体属性设置完毕。

输入文本“你的Email：”，并设置好其大小、颜色等属性。 点击Objects面板Forms模式上的图标，这时Dreamweaver主窗口上出现一个文本框。选中这个文本框，文本框的Properties面板如下图所示。

　

在文本框Propertis面板的TextField下面填入给这个文本框的命名。这里，我们填入a。 在Char Width后设置文本框的宽度。这里，我们可设为20。 Max Chars是设置文本框可输入的最大文字数，Init Val后填入文本框被显示时的初始文本。这两项我们可不加设置。 要访问者输入Email的文本框设置完毕。


按Shift+Enter键换行，接着输入文本“你的主页：”，并设置好其大小、颜色等属性。 这时，设置要访问者输入网址的文本框。这个文本框，除命名外，设置方法同上。


按Shift+Enter键换行，接着输入文本“内容简介：”，并设置好其大小、颜色等属性。 点击Objects面板Forms模式上的图标，这时Dreamweaver主窗口上出现一个文本框。选中这个文本框，在文本框的Properties面板上选择Type后Multi line前的选框，把这个文本框转换成文本域。此时，文本域的properties面板如下图所示。

在文本域Properties面板的TextField下面填入对这个文本域的命名。这里，我们可填入e。 在Char Width后设置文本域的宽度。这里，我们可设为20。 在Num Lines后设置此文本域所占的行数。这里，我们可设为5。 Wrap是设置文本的换行方式，就选择Default即可。Init Val是设置文本域被显示时的初始文本，这里可不填。 文本域设置完毕。


按Shift+Enter键换行。 点击Objects面板Forms模式上的图标，这时Dreamweaver主窗口上出现一个按钮。选中这个按钮，按钮的Properties面板可参见下图。
在按钮Properties面板的Button Name下面填入对这个按钮的命名。这里，我们可填入f。 我们要使这个按钮起提交表单的作用，故在Action后选择Submit form。 Lable是设置这个按钮显示的文本。这里，我们填入“确认”。
接下来，设置第二个按钮。这里，设置这个按钮的命名为g，在Action后选择Reset form，在Lable后设置这个按钮显示的文本为重写。 两个按钮也设置完毕。


最后，可设置对表单的验证。 要求访问者在填入网址时，必须有内容，在填入邮件地址时，所填内容必须含有符号@。

点击菜单栏的Window\Behavior，或使用快捷键F8，弹出Behavior面板。 点击面板上的 + 按钮，在弹出的选单上点击Validate Form，弹出一个对话框。

在前面，这个表单的被命名为a。我们给要求访问者填入Email的文本框命名为a，故这个文本框在Validate Form对话框中对应TextField a in Form a。我们给要求访问者填入网址的文本框命名为b，故这个文本框在Validate Form对话框中对应的是TextField b in Form a。 选中TextField a in Form a这项，然后选中Value和Required之间的选框，再选中Accept后面的Email Address这一项。 选中TextField b in Form a这项，然后选中Value和Required之间的选框。