当前位置:文档之家› 表单_基础知识

表单_基础知识

表单表单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代码,以确保输入正确的数据类型。

相关主题