网页设计与制作使用教程第11章

注意：1. 如果要处理表单数据，我们需要在服务器端（
即放置网页的远程计算机上）编写程序（如ASP程序）， 这部分内容已经超出了本书的范围，有兴趣的同学可以 参考其他的动态网页编程的书籍，后面我们只是对多种 动态网页技术做个简单的介绍。
2．具体使用哪种数据发送方式取决于服务器类型，可以 询问管理员来决定。如果方式任意，默认是Get方法，大 部分HTML设计者偏好使用Post方法。
虽然用服务器端程序处理表单数据是通用的方法， 但是当我们只需要收集简单的信息时，而不需要及时完 成交互时，我们可以采用电子邮件的方式传送表单信息 。方法为：将“动作”属性设置为“mailto：E-Mail邮箱 名”，“方法”属性设置为“Post”，同时将“MIME类 型”属性设置为“multipart/form-data MIME”。具体效果 读者可以自行尝试。

列表值：在“列表/菜单”中显示的选项值。 单击按 钮 ，弹出“列表值”对话框，
项目标签：在列表中显示的文本。 值：用户选择该项时将发送到服务器的数据。

初始化时选定：在浏览器中首次载入该表单域时，使 列表中的某一项处于选中状态
（6）按钮 按钮分为提交按钮，重置按钮和一般按钮，它们可 以用来提交表单（把表单获取的数据送出到服务器）、 重置表单数据（使所有表单域的值恢复到初始值）和执 行预定义的脚本语句。 在新建的表单内点击鼠标，确定插入位置，然后点 击插入面板上的 的按钮，插入一按钮
动作（Action）：指定处理已提交表单数据的程序（ 能处理表单数据，一般是动态技术网页，如ASP、JSP 、PHP等）。它可以是一个URL地址或一个电子邮件地 址。 方法（Method）：指明提交表单的HTTP方法（发送 数据的方法）。可能的值为POST和GET。
提示：POST方法将表单数据作为一个数据整体发送给服 务器。发送时将数据按照一定的编码方法编码作为HTTP 内容发送。 GET方法把“名称－值”对加在动作（Action）的URL后 面并且把新的URL送至服务器，即在URL的末尾附加要向 服务器发送的消息。这是向前兼容的缺省值。通常默认 方法为GET方法。
注：插入文本框的HTML代码为： ＜input type="text" name="..." size="..." maxlength="..." value="..."＞
文本域：文本框的名称。该名称是存储该域的值（输入 的数据）的变量名，必须在该表单内唯一。 字符宽度：指定文本框的最大长度，即该表单域一次最 多可显示的字符数。默认宽度是20个字符。 最大字符数：限定用户可在文本域中输入的最大字符数 。如果保留为空，则可以输入任意数量的文本。如果字 符个数超过域的字符宽度，文本将滚动显示。如果用户 输入超过最大字符数，则表单将产生警告声。 初始值：文本框中默认显示的文本，即该表单一加载就 显示的文本。

选中该“列表/菜单”域，在属性面板中进行相应的属 性设置。
列表/菜单：该名称是存储该域的值（选定值）的变量名，必须 在该表单内唯一。 类型：类型有2个可选值： 菜单：用户只能从多个预设值中选择一个值，并且该菜 单域只占一个选项的高度。
列表：用户可以从多个预设值中选择一个或者多个值，由“ 选定范围”决定。该列表域的可以同时显示多个选项，其值由“ 高度”值决定，单位为一个选项的高度。
注：插入单选钮的HTML代码为＜INPUT type="radio" name="..." value="..."＞ 选中该单选钮，在属性面板中进行相应的属性设置
单选按钮：该名称是存储该域的值（选定值）的变量 名，必须在该表单内唯一。要保证数据的准确采集， 单选钮都是以组为单位使用的，在同一组中的单选钮 必须用同一个名称。 选定值：定义该单选钮的值。当选中该单选钮时，此 “选定值”就随表单一起提交，作为该单选钮的当前 值。 初始状态：在浏览器中首次载入该表单时该单选钮的 状态。如果选择“已勾选”，则该单选钮一加载就是 选中状态

（5）列表/菜单 列表/菜单”域允许用户在一个有限的空间内 设置多个选项，并且可以从中选择一个或者多 个选项。其功能和单选钮/复选框类似。 在新建的表单内点击鼠标，确定插入位置，然 后点击插入面板上的按钮 ，插入一“列表/菜 单”域
注：插入列表的HTML代码为 ＜select name=“...” size=“..." multiple＞ ＜option value="..." selected＞...＜/option＞ ... ＜/select＞
（4）按钮：可以创建3种类型的按钮：提交按钮（ Submit按钮，单击该按钮可以提交表单）、重置按钮 （Reset按钮，单击该按钮可以使所有表单域恢复其初 始值）和普通按钮。 （5）列表/菜单：“列表/菜单”使用户可以从列举的多 个值中选择一个（菜单）或多个值（列表）。可以设 置“初始化值”来给出默认信息。 （6）文件选择框：文件选择框使用户可以选择文件，以 便这些文件（以文件的路径名称提交）可以与表单一 起提交。 （7）隐藏域：隐藏域并不在表单中显示，但其值能与表 单一起提交。该表单域通常用于保存一些特定信息。
注：插入隐藏域的HTML代码为<input name="…" type="hidden" value="…">
选中该隐藏域，在属性面板中进行相应的属性设置
隐藏区域：隐藏域的名称。该名称是存储该域的值（ 预先设置的值）的变量名，必须在该表单内唯一。 值：定义隐藏域的值，该值可以是固定值，也可以是 函数值（可变
2 .表单域的类型
HTML定义了以下类型的表单域： （1）文本框：文本框可以接受用户的输入信息。文本框 分为两种：单行文本字段、密码框和多行的文本区域 。对于任何一种文本框，所输入的文本将作为该表单 域的当前值 （2）复选框：复选框使用户可以选择信息。对于多个具 有同一名称的复选框，用户可以选中其中的一个或多 个。 （3）单选钮：单选钮与复选框类似，也用于选择信息。 但是，对于具有同一名称的多个单选钮，用户只能选 择其中一个。
注：插入提交按钮的HTML代码为<input type="submit" name="…" value="…">
选中该“按钮”域，在属性面板中进行相应的属 性设置
• 按钮名称：该名称是存储该域的值的变量名，必须在该 表单内唯一。 • 标签：在该按钮上显示的文本。 • 动作：该按钮可执行的操作。可选择的操作有：
第十一章
动态网页设计
本章学习目标



理解表单的作用 掌握表单及表单域的使用方法 掌握服务器环境的配置 掌握简单留言本的制作方法
1. 表单
1.什么是表单 2.wenku.baidu.com单域的类型 3.表单
1.
什么是表单
表单是用于实现网页浏览者与服务器之间信息 交互的一种页面元素，在WWW上它被广泛用作各 种信息的收集和反馈 。如图所示是两个表单
提交表单：在单击该按钮时，将表单获得的数据送出，以便 服务器的处理程序完成数据的处理。 重设表单：在单击该按钮时，重设表单，使所有表单域的当 前 值恢复到初始值。 无：在单击该按钮时，根据处理脚本激活一种操作
4. 实例：建立表单

1.实例创意 2.制作步骤
1．实例创意 表单是实现用户和网页交换信息的工具，但是表单效 果的实现一般需要结合相应的动态网页处理程序。当 我们在表单内填写好有关信息后，点击提交按钮，表 单会按照一定的编码方式把搜集到的数据送出，供表 单“动作”属性所指明的动态网页来进行数据的处理 。目前我们还没有涉及到动态网页的相关知识，为了 理解表单数据提交的形式和数据搜集的结果，本例通 过把表单数据提交到邮箱来进行此过程的模拟
3 .表单
通过前面的介绍，相信大家对表单有了初 步的了解。接下来我们将逐步并详细的介绍表 单的创建、编辑和应用。 1．Form标签 如果要在网页中添加表单域，应首先添加表 单，即定义表单的数据采集的范围。 （1）表单的创建 在插入面板上选择“表单”标签，点击 按钮 ，表单将插入到页面中
插入表单后效果如图
注：多个复选框可以共用一个名称，一个复选框名称变量也可以 拥有多个值（多个值在提交时用逗号隔开）。多个复选框可以共用一 个名称时，被选中的多个复选框的值将作为该复选框名称变量的当前 值提交到服务器
（4）单选钮 单选钮允许用户在待选项中选择唯一的答案。 在新建的表单内点击鼠标，确定插入位置，然后点击插入 面板上的按钮 ，插入一单选钮
类型：文本框有以下3种类型。效果如图11-1-7所示。 单行文本框：通常提供单字或短语响应，如姓名或地址
多行文本框：为访问者提供一个较大的区域，供其输入
响应。可以指定访问者最多可输入的行数以及对象的字 符宽度。如果输入的文本超过这些设置，则该域将按照 换行属性中指定的设置进行滚动。
密码框：特殊类型的文本框。当用户在密码框中键入时
通过对比，我们可以总结出典型的表单组成内容： （1）表单标签：这里面包含了处理表单数据所用程序的 URL地址和数据提交到服务器的方法。 （2）表单域：包含了文本字段、密码框、隐藏域、多行 文本区域、复选框、单选钮、下拉选择框和文件上传 框等类型。用于接受用户输入或选择的信息。 （3）表单按钮：包括提交按钮、复位按钮和一般按钮。 用于将数据传送到服务器或者取消输入，还可以用表 单按钮来控制其他脚本处理语句的处理工作
注意：提交表单的用户机器上必须使用Outlook Express
作为默认邮件客户端，否则无法正常使用。
2．表单域 表单（Form）定义了数据采集的范围，表单域则是 采集用户输入或选择的数据的接口。表单域包含文本框 、隐藏域、复选框、单选钮和菜单/列表等，下面分别讲 述这些表单域的创建方法和属性设置。 （1）文本框 文本框是一种让访问者自己输入内容的表单对象，通 常被用来填写单个字或者简短的回答，如姓名、地址等。 在新建的表单内点击鼠标，确定插入位置，然后点击 插入面板上的 按钮，插入一文本框
目标（Target）：指定超链接页面目标地址。 MIME类型：指明用来把表单数据提交给服务器时的 MIME 编码类型。缺省值是“application/x-wwwform-urlencode” ，即URL编码方法，通常与 POST 方法协同使用。如果要创建文件上传域，请指定 “multipart/form-data MIME”类型。
，所输入的文本被替换为星号或项目符号，以隐藏该文 本，保护这些信息不被看到。

当文本框的类型设置为“多行”时，属性面板发生变 化，即文本框从“文本字段”变为“文本区域” 其属性设置和“单行”类型相似，只是更新了2个属性

（2）隐藏域


隐藏域是用来收集或发送信息的不可见元素，对 于网页的访问者来说，隐藏域是不可见的。当表单被 提交时，隐藏域就会将信息用你建立时定义的名称和 值发送到服务器。隐藏域一般用作搜集特定信息以及 在网页间传递参数等。 在新建的表单内点击鼠标，确定插入位置，然后点 击插入面板上的按钮 ，插入一隐藏域
注意： 1．插入表单的HTML语法为： ＜FORM Action="URL" Method="GET|POST" Enctype="MIME类型" TARGET="..."＞ . . .（表单元素） ＜/FORM＞ 2．FORM标签不能嵌套，即表单不能嵌套。
（2）表单的属性设置 在页面中选中表单（如果不能选中整个表单，可以在页 面的左下侧点击 中的 “<form>”实现表单的快速选 择），在属性面板中出现表单的属性选项
（3）复选框

复选框允许用户在待选项中选择多个选项。 在新建的表单内点击鼠标，确定插入位置，然后点击 插入面板上的按钮，插入一复选框
注：插入复选框的HTML代码为＜INPUT type="checkbox" name="..." value="..."＞
选中该复选框，在属性面板中进行相应的属性设置 。复选框名称：该名称是存储该域的值（选定值）的变 量名，必须在该表单内唯一。 选定值：定义该复选框的值。当选中该复选框时，此“ 选定值”就随表单一起提交，作为该复选框的当前值。 初始状态：在浏览器中首次载入该表单时该复选框的状 态。如果选择“已勾选”，则该复选框一加载就是选中 状态。