表单_基础知识

表单表单form是Internet和服务器之间进行信息交流的一种重要工具。

包括按钮、文本框、单选按钮、复选按钮等，它们被称之为表单对象。

表单的使用包括两部分：一是用户界面，提供用户输入数据的元件；另一部分是处理程序，可以是客户端程序而在浏览器执行，也可以是服务器程序，处理用户提交的数据，返回结果。

一.可插入的表单对象Dreamweaver中，在“插入”面板中，有一个“表单”分类，选择该分类，可插入的表单对象快捷按钮就会出现。

如下图：可插入的对象，从左至右，包括：∙表单∙文本字段∙隐藏域∙文本区域∙复选框∙单选按钮∙单选按钮组∙列表/菜单∙跳转菜单∙图像域∙文件域∙按钮1.插入表单域要在网页中插入表单对象，首先应该插入一个表单域，否则服务器将无法处理用户填写的信息。

操作步骤如下：步骤1：“插入”面板中，选择“表单”分类，单击左边第1个“表单”按钮，随即插入到网页中一个表单域，表单域在设计视图中显示为一个红色虚线框的范围。

如图所示：如果没有红色虚线框，执行菜单栏“查看/可视化助理/不可见元素”命令即可。

步骤2：设置表单域属性。

使用鼠标单击虚线的边框，此时虚线框内出现黑色区域，表示该表单域被选中，属性面板如下：表单域属性面板包括：∙表单名称：标识表单的唯一名称。

∙动作：指定处理该表单的动态页或脚本的路径。

可以键入完整的路径，也可以单击“浏览文件”按钮指定到同一站点中包含该脚本或应用程序页的相应文件夹。

如果没有相关程序支持的话，也可以使用E-mail的方式来传输表单信息，这种方式在动作文本框中键入：“mailto：电子邮件地址”。

表示提交的信息将会发送到作者的邮箱中。

比如∙方法：用于选择表单数据传输到服务器的方法。

可选择速度快但携带数据量小的GET方法，或者数据量大的POST方法。

一般使用POST方法。

∙目标：指定打开窗口的方式。

∙MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型。

∙类：定义好的CSS样式。

2.插入文本域当浏览者浏览网页需要输入文字资料时，像姓名、地址、E-mail或稍长一些的个人介绍等栏目，在制作时就可以使用文本域，它在浏览器中将显示为一个文本框。

具体操作如下：步骤1：插入文本域前请确定首先插入了一个表单域，并且将光标放入表单域中。

如果在表单域外插入文本域，Dreamweaver会弹出提示框，是否创建一个表单域。

步骤2：在“插入”面板中，选择“表单”分类，单击左边第2个“文本字段”按钮，随即插入到网页中一个文本域。

可以在文本域前加入说明的文字，如“用户名”，告知浏览者需要填入的内容的类型。

步骤3：单击文本域，对文本域的属性面板进行设置：文本域：输入文本字段的名称，该名称在该网页中是唯一的名称。

名称不能包含空格或特殊字符，可以使用字母数字字符和下划线的任意组合。

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

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

如果是空白，则可以输入任意数量的文本。

（最好对不同内容的文本域进行不同数量的限制，防止个别浏览者恶意输入大量数据，维护系统的稳定性。

）初始值：输入文本域中默认状态时显示的内容，当浏览者键入资料时初始文本被替代。

类型：显示了当前文本域的类型，包括“单行”、“多行”和“密码”。

其中，---单行是默认选项，只显示一行文本。

---多行表示插入的文本可显示多行（如图）。

多行文本域的属性面板如下图所示。

>行数：设置多行文本域的可见行数。

可用于输入较多内容的栏目，如“意见或建议”。

>换行：设置当前文本域中的内容超过一行时的换行方式，有默认、关、虚拟和实体4种。

---密码用于输入密码的单行文本域，输入内容以星号（*）显示。

三种类型的文本框实例如下：3.插入隐藏域可以使用隐藏域存储并提交非浏览者输入的信息，该信息浏览者是看不到的。

插入方法：步骤1：将光标置于页面中需要插入隐藏域的位置。

步骤2：在“插入”面板中，选择“表单”分类，单击左边第3个“隐藏域”按钮，随即插入一个隐藏域的标记到网页中，如下图所示。

单击隐藏域标记，属性面板如下图所示：4.插入文本区域文本区域是一个多行的文本域，插入后的效果如下图所示：属性面板如下图：文本区域在属性面板中默认的名称是textarea，文本域默认的名称是textfield。

这是它们唯一的区别。

文本区域的设置参照文本域中多行的设置。

5.插入复选框如果想让浏览者可以从一组选项中选择多个选项，如兴趣、特长等问题，则可以使用复选框。

步骤1：将光标置于页面中需要插入复选框的位置。

步骤2：在“插入”面板中，选择“表单”分类，单击左边第5个“复选框”按钮，随即一个复选框便插入到网页中，如下图所示。

步骤3：单击复选框，属性面板如下图所示：复选框实例：6.插入单选按钮如果要求浏览者只能从一组选项中选择一个选项时，可以使用单选按钮。

步骤1：将光标置于页面中需要插入单选按钮的位置。

步骤2：在“插入”面板中，选择“表单”分类，单击左边第6个“单选按钮”按钮，随即一个单选按钮便插入到网页中，如下图所示。

步骤3：单击单选按钮，属性面板如下图所示：单选按钮实例：浏览器中的浏览效果：7.插入单选按钮组单选按钮组相当于多个名称相同的单选按钮，它们之间是没有任何区别的，只是创建的方法不同。

步骤1：将光标置于页面中需要插入单选按钮组的位置。

步骤2：在“插入”面板中，选择“表单”分类，单击左边第7个“单选按钮组”按钮，随即弹出“单选按钮组”对话框，如下图所示。

输入相应的值，比如：步骤3：单击确定，即插入到网页中，如下图所示：8.插入列表/菜单除了复选框和单选按钮外，在遇到需要制作选项时，还可以使用列表/菜单。

在拥有较多选项，并且网页空间又比较有限的情况下，列表/菜单将会发挥出最大的作用。

步骤1：将光标置于页面中需要插入列表/菜单的位置。

步骤2：在“插入”面板中，选择“表单”分类，单击左边第8个“列表/菜单”按钮，随即一个列表/菜单插入到了网页中，如下图所示。

步骤3：接下来，设置列表/菜单的属性。

单击列表/菜单，属性面板如下：属性面板中有以下选项：--列表值：单击属性面板中的“列表值”，用加减号，可以添加/删除选项。

选项中可添加一个“请选择”，在初始化设定中，可以把它设为初始值。

---类型。

有两种，一是菜单，一是列表。

如果选择列表，可以设置高度，项目数如果多于高度，可以滚动显示。

选择列表还可以在“选定范围”中“允许多选”选项，浏览者可以从列表中选择多个项目，方法是按住键盘上的Shift或Ctrl键。

菜单类型浏览效果列表类型浏览效果9.插入跳转菜单跳转菜单可以看做是一种链接的集合，通过弹出式下拉菜单在网页中展现出来。

跳转菜单内的链接没有类型上的限制，可以是内部链接、外部链接、E-mail链接、锚记链接等上面讲到的任何类型的链接。

下面，以NBA中国网站首页为例，创建一个“跳转菜单”，具体步骤如下所述：步骤1：打开网页9nba.htm，在设计视图中，将光标置入需要插入“跳转菜单”的位置，如图所示：步骤2：选择“插入”快捷栏中的“表单”分类，并单击其中的“跳转菜单”快捷按钮，如图所示：步骤3：单击该按钮后弹出“插入跳转菜单”对话框，如下图所示：现对该对话框中各选项说明如下：●“菜单项”：列出了所有存在的菜单。

●“文本”：文本框中输入要在菜单列表中显示的文本。

●“选择时，转到URL”：单击该文本框右侧的“浏览”按钮，在弹出的“选择文件”对话框中选择要链接到的文件，单击确定后，文本框中即填入了该文件的地址。

●打开URL：在下拉列表中选择文件的打开位置，有“主窗口”和“框架”两种。

如选择“主窗口”，则在同一窗口中打开文件，如“框架”，则在所选框架中打开文件。

●菜单名称：为了便于记忆和理解，可键入名称。

●勾选“菜单之后插入前往按钮”复选框，可在页面中的“跳转菜单”后添加一个“前往”按钮。

●如果要使用菜单选择提示（比如：请选择球队），请勾选“更改URL后选择第一个项目”项。

利用“插入跳转菜单”对话框中的加减号，上下箭头，可以添加多个菜单项，或者移动菜单项的位置。

设置完成后，效果如图：步骤4：选中“跳转菜单”按钮，查看属性面板如下：步骤5：利用属性面板可以设置初始值等，进行修改。

步骤6：至此，设置完毕。

10.插入按钮就表单而言，按钮是非常重要的，它能够控制对表单内容的操作，如“提交”或者“重置”。

要将表单内容发送到远端服务器上，请使用“提交”按钮；要清除现有的表单内容，请使用“重置”按钮。

步骤1：将光标置于页面中需要插入按钮的位置。

步骤2：在“插入”面板中，选择“表单”分类，单击右边第3个“按钮”按钮，随即一个按钮插入到了网页中，如下图所示。

步骤3：接下来，设置按钮的属性。

单击选中设计视图中的按钮，属性面板如下：属性面板中的“动作区域”，用来确定单击按钮时发生的操作，有3中选择：“提交表单”表示单击按钮时将提交表单数据内容至表单域“动作”属性中指定的页面或脚本，“重设表单”表示单击该按钮将清除表单中的所有内容。

“无”表示指定单击该按钮时要执行的操作，例如添加一个javascript脚本。

11.插入图像域如果觉得前面讲到的按钮视觉效果不太好，可以使用图像域将一副图像作为一个按钮。

步骤1：将光标置于页面中需要插入图像域的位置。

步骤2：在“插入”面板中，选择“表单”分类，单击右边第5个“图像域”按钮，随后弹出“选择图像源文件”对话框。

在对话框中选择一副作为按钮的图像，单击确定。

随即插入到了网页中，如下图所示。

步骤3：接下来，设置图像按钮的属性。

单击选中设计视图中的图像按钮，属性面板如下：我们可以将“10.插入按钮”中的实例，将其中的“填好发送”按钮替换为图像按钮，并且设置图像按钮的“替换”属性为“填好发送”，设置完成后，浏览效果如下：说明：默认的图像按钮只具有提交表单的功能，如果想要改变其用途，则需要将某种“行为”附加至表单对象中。

12.插入文件域文件域使浏览者可以选择其计算机上的文件，如图像文件或word文档，并将该文件上传到服务器。

文件域的外观与文本域类似，只是文件域还包含一个“浏览”按钮。

浏览者可以手动输入要上传的文件的路径，也可以使用“浏览”按钮定位并选择该文件。

步骤1：将光标置于页面中需要插入文件域的位置。

步骤2：在“插入”面板中，选择“表单”分类，单击右边第4个“文件域”按钮，随后一个文件域插入到了网页中，可以在文件域前加入说明文字，如“上传图片”，说明此文件域的功能，如下图所示。

步骤3：接下来，设置文件域的属性。

单击选中设计视图中的文件域，属性面板如下：设置好后，浏览效果如下图：二.验证表单数据Dreamweaver可添加用于检查指定文本域中内容的JavaScript代码，以确保输入正确的数据类型。