当前位置:文档之家› 网页设计与制作使用教程第11章

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


注:插入单选钮的HTML代码为<INPUT type="radio" name="..." value="..."> 选中该单选钮,在属性面板中进行相应的属性设置
单选按钮:该名称是存储该域的值(选定值)的变量 名,必须在该表单内唯一。要保证数据的准确采集, 单选钮都是以组为单位使用的,在同一组中的单选钮 必须用同一个名称。 选定值:定义该单选钮的值。当选中该单选钮时,此 “选定值”就随表单一起提交,作为该单选钮的当前 值。 初始状态:在浏览器中首次载入该表单时该单选钮的 状态。如果选择“已勾选”,则该单选钮一加载就是 选中状态
注:多个复选框可以共用一个名称,一个复选框名称变量也可以 拥有多个值(多个值在提交时用逗号隔开)。多个复选框可以共用一 个名称时,被选中的多个复选框的值将作为该复选框名称变量的当前 值提交到服务器
(4)单选钮 单选钮允许用户在待选项中选择唯一的答案。 在新建的表单内点击鼠标,确定插入位置,然后点击插入 面板上的按钮 ,插入一单选钮
注意:1. 如果要处理表单数据,我们需要在服务器端(
即放置网页的远程计算机上)编写程序(如ASP程序), 这部分内容已经超出了本书的范围,有兴趣的同学可以 参考其他的动态网页编程的书籍,后面我们只是对多种 动态网页技术做个简单的介绍。
2.具体使用哪种数据发送方式取决于服务器类型,可以 询问管理员来决定。如果方式任意,默认是Get方法,大 部分HTML设计者偏好使用Post方法。
,所输入的文本被替换为星号或项目符号,以隐藏该文 本,保护这些信息不被看到。

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

(2)隐藏域


隐藏域是用来收集或发送信息的不可见元素,对 于网页的访问者来说,隐藏域是不可见的。当表单被 提交时,隐藏域就会将信息用你建立时定义的名称和 值发送到服务器。隐藏域一般用作搜集特定信息以及 在网页间传递参数等。 在新建的表单内点击鼠标,确定插入位置,然后点 击插入面板上的按钮 ,插入一隐藏域
3 .表单
通过前面的介绍,相信大家对表单有了初 步的了解。接下来我们将逐步并详细的介绍表 单的创建、编辑和应用。 1.Form标签 如果要在网页中添加表单域,应首先添加表 单,即定义表单的数据采集的范围。 (1)表单的创建 在插入面板上选择“表单”标签,点击 按钮 ,表单将插入到页面中
插入表单后效果如图

选中该“列表/菜单”域,在属性面板中进行相应的属 性设置。
列表/菜单:该名称是存储该域的值(选定值)的变量名,必须 在该表单内唯一。 类型:类型有2个可选值: 菜单:用户只能从多个预设值中选择一个值,并且该菜 单域只占一个选项的高度。
列表:用户可以从多个预设值中选择一个或者多个值,由“ 选定范围”决定。该列表域的可以同时显示多个选项,其值由“ 高度”值决定,单位为一个选项的高度。
注意: 1.插入表单的HTML语法为: <FORM Action="URL" Method="GET|POST" Enctype="MIME类型" TARGET="..."> . . .(表单元素) </FORM> 2.FORM标签不能嵌套,即表单不能嵌套。
(2)表单的属性设置 在页面中选中表单(如果不能选中整个表单,可以在页 面的左下侧点击 中的 “<form>”实现表单的快速选 择),在属性面板中出现表单的属性选项
虽然用服务器端程序处理表单数据是通用的方法, 但是当我们只需要收集简单的信息时,而不需要及时完 成交互时,我们可以采用电子邮件的方式传送表单信息 。方法为:将“动作”属性设置为“mailto:E-Mail邮箱 名”,“方法”属性设置为“Post”,同时将“MIME类 型”属性设置为“multipart/form-data MIME”。具体效果 读者可以自行尝试。

(5)列表/菜单 列表/菜单”域允许用户在一个有限的空间内 设置多个选项,并且可以从中选择一个或者多 个选项。其功能和单选钮/复选框类似。 在新建的表单内点击鼠标,确定插入位置,然 后点击插入面板上的按钮 ,插入一“列表/菜 单”域
注:插入列表的HTML代码为 <select name=“...” size=“..." multiple> <option value="..." selected>...</option> ... </select>
提交表单:在单击该按钮时,将表单获得的数据送出,以便 服务器的处理程序完成数据的处理。 重设表单:在单击该按钮时,重设表单,使所有表单域的当 前 值恢复到初始值。 无:在单击该按钮时,根据处理脚本激活一种操作
4. 实例:建立表单

1.实例创意 2.制作步骤
1.实例创意 表单是实现用户和网页交换信息的工具,但是表单效 果的实现一般需要结合相应的动态网页处理程序。当 我们在表单内填写好有关信息后,点击提交按钮,表 单会按照一定的编码方式把搜集到的数据送出,供表 单“动作”属性所指明的动态网页来进行数据的处理 。目前我们还没有涉及到动态网页的相关知识,为了 理解表单数据提交的形式和数据搜集的结果,本例通 过把表单数据提交到邮箱来进行此过程的模拟
注:插入文本框的HTML代码为: <input type="text" name="..." size="..." maxlength="..." value="...">
文本域:文本框的名称。该名称是存储该域的值(输入 的数据)的变量名,必须在该表单内唯一。 字符宽度:指定文本框的最大长度,即该表单域一次最 多可显示的字符数。默认宽度是20个字符。 最大字符数:限定用户可在文本域中输入的最大字符数 。如果保留为空,则可以输入任意数量的文本。如果字 符个数超过域的字符宽度,文本将滚动显示。如果用户 输入超过最大字符数,则表单将产生警告声。 初始值:文本框中默认显示的文本,即该表单一加载就 显示的文本。
注:插入提交按钮的HTML代码为<input type=&" value="…">
选中该“按钮”域,在属性面板中进行相应的属 性设置
• 按钮名称:该名称是存储该域的值的变量名,必须在该 表单内唯一。 • 标签:在该按钮上显示的文本。 • 动作:该按钮可执行的操作。可选择的操作有:
目标(Target):指定超链接页面目标地址。 MIME类型:指明用来把表单数据提交给服务器时的 MIME 编码类型。缺省值是“application/x-wwwform-urlencode” ,即URL编码方法,通常与 POST 方法协同使用。如果要创建文件上传域,请指定 “multipart/form-data MIME”类型。
2 .表单域的类型
HTML定义了以下类型的表单域: (1)文本框:文本框可以接受用户的输入信息。文本框 分为两种:单行文本字段、密码框和多行的文本区域 。对于任何一种文本框,所输入的文本将作为该表单 域的当前值 (2)复选框:复选框使用户可以选择信息。对于多个具 有同一名称的复选框,用户可以选中其中的一个或多 个。 (3)单选钮:单选钮与复选框类似,也用于选择信息。 但是,对于具有同一名称的多个单选钮,用户只能选 择其中一个。
动作(Action):指定处理已提交表单数据的程序( 能处理表单数据,一般是动态技术网页,如ASP、JSP 、PHP等)。它可以是一个URL地址或一个电子邮件地 址。 方法(Method):指明提交表单的HTTP方法(发送 数据的方法)。可能的值为POST和GET。
提示:POST方法将表单数据作为一个数据整体发送给服 务器。发送时将数据按照一定的编码方法编码作为HTTP 内容发送。 GET方法把“名称-值”对加在动作(Action)的URL后 面并且把新的URL送至服务器,即在URL的末尾附加要向 服务器发送的消息。这是向前兼容的缺省值。通常默认 方法为GET方法。
注:插入隐藏域的HTML代码为<input name="…" type="hidden" value="…">
选中该隐藏域,在属性面板中进行相应的属性设置
隐藏区域:隐藏域的名称。该名称是存储该域的值( 预先设置的值)的变量名,必须在该表单内唯一。 值:定义隐藏域的值,该值可以是固定值,也可以是 函数值(可变

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

初始化时选定:在浏览器中首次载入该表单域时,使 列表中的某一项处于选中状态
(6)按钮 按钮分为提交按钮,重置按钮和一般按钮,它们可 以用来提交表单(把表单获取的数据送出到服务器)、 重置表单数据(使所有表单域的值恢复到初始值)和执 行预定义的脚本语句。 在新建的表单内点击鼠标,确定插入位置,然后点 击插入面板上的 的按钮,插入一按钮
通过对比,我们可以总结出典型的表单组成内容: (1)表单标签:这里面包含了处理表单数据所用程序的 URL地址和数据提交到服务器的方法。 (2)表单域:包含了文本字段、密码框、隐藏域、多行 文本区域、复选框、单选钮、下拉选择框和文件上传 框等类型。用于接受用户输入或选择的信息。 (3)表单按钮:包括提交按钮、复位按钮和一般按钮。 用于将数据传送到服务器或者取消输入,还可以用表 单按钮来控制其他脚本处理语句的处理工作
注意:提交表单的用户机器上必须使用Outlook Express
作为默认邮件客户端,否则无法正常使用。
2.表单域 表单(Form)定义了数据采集的范围,表单域则是 采集用户输入或选择的数据的接口。表单域包含文本框 、隐藏域、复选框、单选钮和菜单/列表等,下面分别讲 述这些表单域的创建方法和属性设置。 (1)文本框 文本框是一种让访问者自己输入内容的表单对象,通 常被用来填写单个字或者简短的回答,如姓名、地址等。 在新建的表单内点击鼠标,确定插入位置,然后点击 插入面板上的 按钮,插入一文本框
相关主题