《网页表单的编辑》word版.docx

《网页表单的编辑》word版.docx

《《网页表单的编辑》word版.docx》由会员分享，可在线阅读，更多相关《《网页表单的编辑》word版.docx（24页珍藏版）》请在冰豆网上搜索。

《网页表单的编辑》word版

第六章网页表单的编辑

表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，被广泛地应用于各种信息的搜集和反馈。

本章主要讲解利用Dreamweaver8制作编辑表单。

通过本章的学习，读者应该掌握以下内容：

●认识网页表单

●如何创建表单

●表单属性的设置方法

●表单元素的应用

●表单的检查方法

●利用HTML编辑表单

6．1认识表单

网页是一种平面传播工具，没有表单，面对华丽，生动的画面，浏览者只能照单全收而不能参与其中。

使用表单可以收集来自用户的信息，它是网站管理者与浏览者之间沟通的桥梁。

平时用户上网登录E-mail信箱，填写，提交各种个人资料等都应用了表单的各种功能。

通过表单收集到的用户反馈信息，通常是一些分隔符（如逗号、分号等）分隔的文字资料。

这些资料可以导入数据库或电子表格进行统计、分析，成为具有重要参考价值的信息。

表单有两个重要的组成部分：

一是描述表单的HTML源代码：

一是用于处理用户在表单域中输入的信息的服务器端应用程序或客户端正脚本，如CGI、ASP等。

网站访问者在页面上看到的表单元素，仅供输入信息而已，当访问者按下表单的“提交”按扭之后，表单内容会上传到服务器上，服务器端脚本或应用程序对这些信息进行处理。

通常通过网关接口（CGI）脚本、ColdFusion页，JavaServerPage（JSP）或ASP来处理信息，最后服务器再将处理结果发送到访问者的浏览器中，这就是访问者送出表单之后出现的页面。

如图所示。

由此可见，表单必须依赖于服务器端才能真正发挥其作用。

Dreamweaver不但可以创建表单，在表单中添加对象（比如，文本域、密码域、单选按钮、复选框、按钮等），而且还可以通过使用行为来验证用户输入的信息的正确性（比如，可以检查电子邮件地址中是否含有“@”符号，某些项目为必须输入内容等）。

③生成一个新的HTML

文件并发送回访问者

②服务器端脚

本对表单内容进行

处理

①访问者填写表单内

容并提交Web服务器

图6-1表单信息的处理

6．1．1表单网页实例

图6-2所示为网页中一个表单应用的实例，表单中应用了系统提供的大量表单元素。

比如，文本框、单选按钮、复选框、文本区域、列表、按钮等。

图6-2“表单”样例

6.1.2表单对象

在Dreamweaver中，表单输入类型为表单对象。

可以通过选择“插入”→“表单对象”来插入表单对象，或者选择“窗口”→“插入”（或Ctrl+F2键）打开如图6-3所显示的“插入”面板的“表单”选项卡，单击“表单”选项卡来访问各种表单对象。

图6-3“表单”选项卡

在“表单”选项卡中提供了下列按钮。

表单

：

在文档中插入表单。

Dreamweaver在HTML源代码中插入开始和结束form标签。

任何其他表单对象，如文本域、按钮等，都必须插入到两个form标签之中，这样所有浏览器才能正确处理这些数据。

文本字段

：

在表单中插入文本字段。

文本字段可接受任何类型的字母数字项。

输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。

隐藏域

：

在文档中插入一个可以存储用户数据的域。

隐藏域以存储用户输入的信息，如姓名、电子邮件地址……，然后在该用户下次访问站点时使用这些数据。

复选框

：

在表单中插入复选框。

复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。

单选按钮

：

在表单中插入单选按钮。

单选按钮代表互相排斥的选择。

选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。

例如，用户可以选择“是”或“否”。

单选按钮组

：

插入共享同一名称的单选按钮的集合。

列表/菜单

：

可以在列表中创建用户选项。

“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。

“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。

跳转菜单

：

插入可导航的列表或弹出式菜单。

跳转菜单允许插入一种菜单，在这种菜单中的每个选项都可以链接到相关的文档或文件。

图像域

：

可以在表单中插入图像。

可以使用图像域替换“提交”按钮，以生成图形化按钮。

文件字段

：

在文档中插入空白文本域和“浏览”按钮。

文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。

按钮

：

在表单中插入文本按钮。

在单击按钮时执行任务，如提交或重置表单。

可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。

6.2利用Dreamweaver8编辑表单

6．2．1创建表单

（1）将光标置于要插入表单的位置。

（2）单击“插入”→“表单”或选择“插入”面板上的“表单”选项卡，然后单击“表单”图标

，这时Dreamweaver插入一个表单，当页面处于“设计视图”中时，用红色的虚轮廓线指示表单。

如果没有看到此轮廓线，请检查是否选中了“查看”→“可视化助理”→“不可见元素”

这时，文档窗口中就会出现所创建的表单，如图6-4所示。

图6-4新建表单

6．2．2设置表单属性

在“设计视图”窗口中，单击该表单轮廓以选择该表单，或者在标签选择器中选择〈form>标签（标签选择器位于“设计视图”窗口的左下角）〉如果“设计视图”窗口下方没有表单属性面板，那么在菜单栏中单击“窗口”“属性”（或按ctrl+f3）打开如图的表单属性面板。

图6-5表单属性面板

在表单属性面板中按以下方法设置表单属性。

（1）在属性面板的“表单名称”域中，键入一个惟一名称以标识该表单，命名表单后，就可以使用脚本语言。

（如JavaScript或vbscript）引用或控制该表单，如果不命名表单，则Dreamweaver使用语法form生成一个名称，并在向添加每个表单时递增n的值，（如form2,form3,……）

（2）在属性面板的“动作”域中指定到处理该表单的动态页或脚本的路径。

可以在“动作”域中键入完整的路径，也可以单击文件夹图标定们到包含该脚本或应用程序页的适当文件夹。

（3）在“方法”弹出式菜单中，选择将表单数据传输到服务器的方法。

●POST：

在HTTP请中嵌入表单数据。

●GET：

将值加到请求该页的URL中。

●默认：

使用浏览器的默认设置将表单数据发送到服务器。

通常，默认方法为GET方法。

注意：

所使用的WEB或应用程序服务器中可能会限制对方法的选择。

不要使用GET方法发送长表单，URL的长度限制在8192个字符以内。

如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。

而且，在发送机密用名和密码、信用卡号或其他机密信息进，不要使用GET方法，用GET方法传递信息不安全。

（4）“MIME类型”弹出式菜单可以指定对提交给服务器进行处理的数据使用MIME编码类型。

默认设置application/x-www-form-recode通常与POST方法协同使用，如果要创建文件上传域，请指定multipart/form-dataMIME类型。

（5）“目标”弹出式菜单指定一个窗口，在该窗口中显示调用程序所返回的数据。

如果命名的窗口尚未打开，则一个具有该名称的新窗口。

目标值有以下几个。

●-blank：

在未命名的新窗口中打开目标文档。

●-parent：

在显示当前文档的窗口的父窗口中打开目标文档。

-

●-self：

在提交表单所使用的窗口中打开目标文档。

●-top：

在当前窗口的窗体内打开目标文档。

此值可用于确保目标文档占用整个窗口，即可使原始文档显示在模框架中。

6．2．3插入表单对象

1.文本框

单击“插入”面板中“表单”选项卡的“文本字段”按钮，可插入文本框。

文本框用于接受所输入的文本，字母或数字，输入的文本可以是一行或多行，也可以是项目符号或星号（口令保护）的显示形式。

文本框属性面板中各选项的含义如下。

文本域：

给文本区域命名。

每个文本区域必须有一个自己的名称。

也就是说，有多个文本区域时，名称不能相同。

字符宽度：

设置文本区域可以显示的最大字符数，这个数字可以比最多字符小，最多字符指定文本区域可以输入的最大字符数。

最大字符/行数：

设置文本区域可以输入的最大字符数和多行文本区域可以输入的最多行数。

类型：

指定文本区域为单行、多行或密码域。

（1）选择单行“得到”INPUT“标记，其类型属性设置为TEXT。

“字符宽度”设置被映射为SIZE属性，“最多字符”设置被映射为MAXLENGTH属性，其属性面板如图6-6所示。

图6-6单行文本属性面板

（2）选择“多行”得到“TEXTAREA”标记。

“字符宽度”被映射为COLS属性。

“最多行数”设置被映射为ROWS属性。

在多行文本域中可以输入多行文本。

在创建多行文本区域时，可以指定用户可输入的文本行数。

其属性面板如图所示。

图6-7多行文本属性面板

①在“字符宽度”域中，执行下列操作之一。

●接受默认设置，将文本域的长度设置为20个字符。

●指定文本域的最大长度，文本域的最大长度是该一次最多可显示的字符数。

例如，如果“字符宽度”设置为20，而用户输入100个字符，则在该文本域中只能看到其中的20个字符，请注意，虽然无法在该域中看到这些字符，但域对象可以识别它们，而且它们会被发送到服务器进行处理。

②在“行数”域中指定要显示的最大行数。

默认情况下设置的是两行的文本域。

③从“换行”弹出式菜单中，选择一种设置，确定当用户输入的信息太多，无法在定义的文本区域内显示时，如何显示用户的输入内容。

换行选项有以下设置值。

关闭或默认：

防止文本换行到下一行。

当用户输入的内容超过文本区域的右边界时，文本将向左侧滚动，用户必须按RETURN键才能将插入点移到支文本区域的下一行。

“虚拟”：

在文本区域中设置自动换行。

当用户输入内容超过文本区域的右边界时，文本换到一行。

当提交数据进行处理时，自动换行并不应用到数据中，数据作为一个数据字符串进行提交。

“实体”：

在文本区域设置自动换行，当提交数据进行处理时，也对这些数据设置自动换行。

④“初始值”指定当表单首次被载入时显示在文本区域中的值。

如果希望在域中显示默认文本值，请在属性面板的“初始值”域中输入默认文本。

在用户浏览器中首次载入此表单时，文本域中将显示此文本，例如，通过饮食说明或示例值，可以指示用户在域中输入信息。

若要为页面内的域添加标签，请将插入点放在该对象的旁边，然后输入需要的文本。

可以将文本格式设置应用于表单对象标签。

（3）选择“密码”类型，“字符宽度”和“最大字符数”设置的映射与单行文本区域相同。

当用户在密码文本区域中输入时，输入内容被显示为黑点或星号，以防其他人看到，其属性面板如图6-8所示。

图6-8密码文本属性面板

2.按钮

在表单选项卡中单击“按钮”，显示按钮属性面板。

按钮用于执行标准任务，如提交，重新设置表单内容或完成自定义的功能，其属性面板如图6-9所示。

图6-9按钮属性面板

（1）按钮名称：

Dreamweaver有Submit和Reset两个保留名称。

Submit指示表单提交表单数据给处理程序或脚本。

Reset恢复所有表单域为各自的初值。

（2）标签：

输入希望在该按钮上显示的初值。

（3）动作：

确定按钮名被单击时发生什么动作。

本属性有3个单选按钮供选择：

选择“提交表单”自动设置按钮名为Submit;选择“重设表单”自动设置按钮名为Reset；选择“无”不发生任何动作，即当单击按钮时，提交和重设动作都不发生。

3.复选框

在表单选项卡中单击“复选框”按钮

。

可插入“复选框”。

“复选框”对象用于确认一组选项中的多个选定响应，它能实现在一组选项中选定多个选项。

其属性面板如图6-10所示。

图6-10复选框属性面板

在复选框属性面板中可以设置以下属性。

复选框名称：

给复选框命名。

选定值：

设置确认框被选择时的取值。

当用户提交表单时，该值被子传送给服务器端应用程序（如CGI脚本）

初始状态：

设置首次载入表单时复选框是“已勾通选”还是“未勾选”。

4.单选按钮

在表单选项卡中单击“单选”按钮

，可插入“单选”按钮。

“单选”按钮用于确认一组选项中的单个选定响应，单击该按钮后，只能在一组选项中选定一个选项，其属性面板如图6-11所示。

图6-11单选属性面板

“单选”属性面板中可以设置以下属性。

●单选按钮：

给单选按钮命名，同一组的单选按钮的名称必须相同。

●选定值：

设置单选按钮被选时的取值。

当用户提交表单时，该值被传送给处理程序（如CGI脚本）。

应赋值给同组的每个单选按钮不同的值。

●初始状态：

指定首次载入表单时单选按钮是“已勾选”还是“未勾选”。

一组单选按钮中，只能有一个单选按钮的初始状态被设置为选中。

5.列表/菜单属性

在表单选项卡中单击“列表/菜单”按钮

，可插入下拉列表对象，它用于列出一系列可以选择的值，该对象可以设成一个弹出菜单，也可以设成一个列表框，在表单中选择列表，显示列表属性面板，如图6-12所示。

图6-12下拉列表框属性面板

列表属性面板中各项的含义如下。

●列表/菜单名：

给列表或菜单命名。

本项必须设置，且名称必须惟一。

●类型：

指定此对象是弹出菜单还是滚动列表，对于列表，可以设置高度，即在不滚动情况下显示出来的选项数：

通过“允许复制”复选框，也可以设置是否允许用户从列表中选择多项。

图6-13“列表值”对话框

●列表值：

打开列表值对话框，如图6-13所示，在此对话框中，可以添加选项到列表或弹出菜单中，列表中的每个选项有一个标签（出现在列表中的文本）和一个值（当选项被选择时传送给处理程序的信息）。

使用“加号”

或“减号”

按钮，添加或删除列表中的选项，选项的排列顺序与列表值对话框中的排列顺序相同。

当网页被载入浏览器时，列表中的第一项是被选项。

使用上，下箭头按钮，可重新排列列表的选项。

6.文件域

利用表单的文件域可以从本地计算机向服务器上传文件。

表单的文件域包括一个文本框和一个“浏览”按钮。

在浏览器中单击“浏览”按钮，打开选择文件的对话框，在对话框中选择相应的文件，然后单击表单中的Submit按钮便可将文件发送到服务器上。

在表单中，插入文件域的操作步骤如下。

（1）在表单中适合的位置确定插入点，然后在表单卡中单击“文件域”按钮

。

（2）在网页编辑窗口的插入点处可以看到一个文本框和一个“浏览”按钮，如图6-14所示。

图6-14表单的文件域

（3）选中文件域时其属性面板如图6-15所示。

图6-15“文件域”属性面板

在文件区域属性面板可以设置以下属性。

●文件域名称：

给文件区域命名。

本项必须设置，名称必须惟一。

●字符宽度：

设置文件域可显示的最大字符数，这个数字可以比“最多字符数”小。

●最多字符数：

设置文件域可以输入的最大字符数。

使用此项属性限制文件名长度。

注意：

在使用文件域前，应确认你的服务器管理员允许匿名文件上传，如果用Dreamweaver插入文件域，必须在FORM标签中手工插入ENCTYPE=“multipart/form-data”以保证文件被正确编码。

7．图像域

图像域是一个比较有用的表单域，其主体是一个图片。

在浏览是单击这个图片，表单就会向服务器发送表单中各个表单域的值。

图像域可以代替Submit按钮，一个图像域有两个值，分别表示单击图像域时鼠标指针的纵坐标和横坐标。

在表单中，插入图像域的操作步骤如下。

（1）在表单中适合的位置确定插入点，然后在表单选项卡中单击“图像域”按钮

。

（2）在打开的“选择图像源”对话框中选取择一个图片将其插入致电表单中。

（3）在图像的属性面板中可以设置表单的图像属性，设置方法同操作普通图像类似。

“图像域”属性面板图6-16所示。

图6-16“图像域”属性面板

在图像域属性面板中可以设置以下属性。

●图像区域：

给图像域指定名称。

●宽、高：

设置图像的宽度和高度。

●源文件：

给图像域设置源文件。

单击文件夹图标，在硬盘上浏览找到个图像文件。

●替代：

为文本浏览器或设置为手动下载图像的浏览器指定替代图像的文件。

当浏览器过图像时，这一文本也显示出来。

●对齐：

该下拉式的列表框用于设置选定图片的对齐方式。

●编辑图像：

该按钮用于打开外编辑器Fireworks,编辑该图像。

8．隐藏域

隐藏域是一种在浏览器上看不到的表单域，也不用对其执行操作，利用隐藏可以实现浏览器同服务器在后台交换信息。

在表单中，插入隐藏表单的操作步骤如下。

（1）在表单中合适的位置选定插入点，然后在表单选项卡中单击“隐藏域”按钮

。

（2）在网页编辑窗口的插入点处可以看一个

图标。

（3）选中

图标时，其属性面板如图6-17所示。

图6-17“隐藏域”属性面板

隐藏表单域属性面板的基本参数意义如下。

●隐藏区域：

给隐藏域命名。

本项必须设置，且名称必须惟一。

●值：

设置隐藏域的初始值。

如果看不到隐藏区域，可选择“查看”“可视化助理”“不可见元素”命令。

除了插入表单对对象以外，还可以利用线、段落、预格式的文本或者表格来将表单格式化。

也可以在一个页面中放入多个表单，但是不能在表单中再加入表单（不允许表单嵌套）。

在表单中使用表格可以使表单中的对象和域的位置无论在水平方向还是在垂直方向更容易控制，表单也可以更为美观，不过在表单中使用表格时，千万要注意，表格的标签必须在表单的标签之间。

6．2．4验证表单的正确性

如果网站需要收集用户的信息，那么肯定希望用户能按要求认真的填写内容。

这时，最简单有效的方法就是得用“检查表单”行为，验证用户在文本输入框中输入的信息是否正确，以避免接收垃圾信息。

下面以一个实例来介绍利用“检查表单”行为来验证表单信息，当用户在文本框中输入的信息不符合规定进，弹出一个对话框提示输入错误。

操作步骤如下。

（1）启动Dreamweaver8，创建一个新的空白页面。

（2）在“插入”面板的“表单”选项卡中单击“表单”对象，在表单域中插入一个六行两列的表格。

（3）单击“插入”面板，“常用”选项卡上的“表格”对象，在表单域中插入一个六行两列的表格。

（4）按样图所示合并表格中的单元格，并在表格中依次输入文本，插入文本框和按钮，并将表格居中显示。

（5）在上文档窗口中选定文本框，在对应的属性面板中为每一个文本输入框定义一个名称：

姓名（name）、年龄（age）E-mail（mail）、电话号码（ tale）。

（6）在主菜单上选择“窗口”→“行为”或者使用键盘快捷键Shift+f3打开“行为”活动面扳，选定最后一个文本输入框，然后单击位于行为浮动面板顶端的“+”按钮，从弹出的下拉菜单中选择“检查表单”命令（如图6-19所示），打开如图6-20所示的“检查表单”对话框，用户可以页面中每一个文本输入框设置规定。

图6-18设置好的主文档窗口图6-19检查表单命令

（7）各个文本框的设置方式如下。

图6-20设置“name”文本框的属性

图6-21设置“age”文本框的属性

图6-22设置“mail”文本框的属性

图6-22设置“tale”文本框的属性

图6-24输入错误信息提示

图6-25正确填写的表单信息

6.3利用HTML编辑表单

利用HTML也可以创建表单,这样创建的表单通常由两类元素构成,一类是普通的页面元素,例如表格、图像、文字等，另一类是用于接收信息的特定页面元素，也就是所谓的表单控件。

控件是表单中用于接收用户输入或处理的元素，典型的控件有文本框、复选框、单选框、选项菜单等。

每个控件都具有一个指定的名称（由控件的name属性指定），该名称的有效范围是所在的表单。

对于每个控件，都具有一个初始值和一个当前值，这两个值都是字符串。

控件的初始值是预先指定的，而当前值则根据用户的交互操作确定。

当服务器端程序处理表单数据时，通常都是根据控件的这些值进行。

创建表单时要用到表单标记符和表单输入标记符。

6.3.1表单标记符

HTML中表单标记符为FORM,其主要作用是设定表单的起止位置距程序的URL地址。

其基本语法结构如下：

其中Action用于设事实上处理表单数距程序URL的地址。

并指定处理表单数method，指定数据传送到服务器的方式。

有两种主要的方式，当method=“GET”时，将输入数据加在action指定的地址后面传送到服务器；当method=“POST”时则将输入数据按照HTTP输送协议中的POST中传输方式传送到服务器。

6.3.2表单输入标记符

INPUT是表单输入标记符,在表单创建中使用频繁,大部分表单内容需要用到此标记符。

其语法结构如下：

Type决定了输入数据的类型。

其选项较多，各项的意义如下。

text表示输入单行文本。

textarea表示输入多行文本。

password表示输入数据为密码，用“*”表示。

 checkbox表示复选框。

radio表示单选框。

submit表示提交按钮，数据将被送到服务器。

reset表示清除表单数据，以利于重新输入。

file表示插入一个文件。

hidden表示隐藏按钮。

image表示插入一个图像。

button表示普通按钮。

6.3.3表单控件的定义

HTML定义这些控件的方法如下.

1.文本框和口令框

如果需要浏览输入单行文本（例如输入姓名、年龄等信息），则应在表单中使用单行文本框。

创建单行文本框的基本语法如下：

其中name属性指定了控件的名称，value属性指定了控件的初始值（将在文本框中作为默认数据显示，如果用户填写了数据，则表单提交时使用填写的数据作为value的值进行处理），这两个属性的取值都是程序处理表单数据时需要使用的。

Size属性指定了文本框的宽度。

maxlength属性指定了在方便框中可以输入的最长文本数。

如“会员注册”中的“用户名”文本框描述为：

如果需要隐藏用户在文本框中输入的内容（例如设置密码时），那么应使用口令框。

口令与单行文本框类似，但在其中输入的所有文本显示出来都是星号（*）。

口令框的创建与单行文本框类似，不同的是需要将INPUT标记符的type属性指定为password,如下所示：

例如图6-2中所示的：

“会员注册”中“密码”框的HTML表述为：

2.复选框与单选按钮

复选框和单选按钮都是允许用户进行选择的控件，常用于选择多种选项或选择互斥的选项。

创建复选框和单选按钮也是使用INPUT标记符，语法分别如下：

Type属性为checkbox,说明该控件是一个复选框，type属性为radio，说明该控件是一具单选按钮，name属性和value属性的值都有是程序处理表单数据时需要的；checked属性是可选的，选择checked意味着浏览器在第一次显示表单时将这个复选框或单选框按钮显示为“被选中状态”，否则不被选中。

例如“会员注册”中“爱好”复选框的HTML为：

3.按钮

当用户完成了表单的填写后，如果需要提交数据，则可以单击表单中的提交按钮；如果希望恢复表单为填写前的状态，以便重新填