【网页设计与制作教程】第11章动态网页设计.ppt

第十一章 动态网页设计 本章学习目标 理解表单的作用 掌握表单及表单域的使用方法 掌握服务器环境的配置 掌握简单留言本的制作方法 1. 表单 1.什么是表单 2.表单域的类型 3.表单 什么是表单 不论是什么类型的表单，基本的工作原理都一样。当浏览者浏览该表单页面，填写或选择相应的信息后，点击“提交”按钮，将填写或选择的信息以指定的方式发送到服务器端，由服务器端特定的程序处理，处理的结果是向客户端返回一个页面（例如通知注册成功页面）或者在服务器端完成相应的操作（例如数据库操作）。因此，动态网页技术不仅需要表单，还需要服务器端处理程序来共同实现动态效果。 通过对比，我们可以总结出典型的表单组成内容： （1）表单标签：这里面包含了处理表单数据所用程序的URL地址和数据提交到服务器的方法。 （2）表单域：包含了文本字段、密码框、隐藏域、多行文本区域、复选框、单选钮、下拉选择框和文件上传框等类型。用于接受用户输入或选择的信息。 （3）表单按钮：包括提交按钮、复位按钮和一般按钮。用于将数据传送到服务器或者取消输入，还可以用表单按钮来控制其他脚本处理语句的处理工作 2 .表单域的类型 HTML定义了以下类型的表单域： （1）文本框：文本框可以接受用户的输入信息。文本框分为两种：单行文本字段、密码框和多行的文本区域。对于任何一种文本框，所输入的文本将作为该表单域的当前值 （2）复选框：复选框使用户可以选择信息。对于多个具有同一名称的复选框，用户可以选中其中的一个或多个。 （3）单选钮：单选钮与复选框类似，也用于选择信息。但是，对于具有同一名称的多个单选钮，用户只能选择其中一个。 （4）按钮：可以创建3种类型的按钮：提交按钮（Submit按钮，单击该按钮可以提交表单）、重置按钮（Reset按钮，单击该按钮可以使所有表单域恢复其初始值）和普通按钮。 （5）列表/菜单：“列表/菜单”使用户可以从列举的多个值中选择一个（菜单）或多个值（列表）。可以设置“初始化值”来给出默认信息。 （6）文件选择框：文件选择框使用户可以选择文件，以便这些文件（以文件的路径名称提交）可以与表单一起提交。 （7）隐藏域：隐藏域并不在表单中显示，但其值能与表单一起提交。该表单域通常用于保存一些特定信息。 3 .表单 通过前面的介绍，相信大家对表单有了初步的了解。接下来我们将逐步并详细的介绍表单的创建、编辑和应用。 1．Form标签 如果要在网页中添加表单域，应首先添加表单，即定义表单的数据采集的范围。 （1）表单的创建 在插入面板上选择“表单”标签，点击 按钮，表单将插入到页面中 （2）表单的属性设置在页面中选中表单（如果不能选中整个表单，可以在页面的左下侧点击 中的 “form”实现表单的快速选择），在属性面板中出现表单的属性选项 提示：POST方法将表单数据作为一个数据整体发送给服务器。发送时将数据按照一定的编码方法编码作为HTTP内容发送。GET方法把“名称－值”对加在动作（Action）的URL后面并且把新的URL送至服务器，即在URL的末尾附加要向服务器发送的消息。这是向前兼容的缺省值。通常默认方法为GET方法。 注意：1. 如果要处理表单数据，我们需要在服务器端（即放置网页的远程计算机上）编写程序（如ASP程序），这部分内容已经超出了本书的范围，有兴趣的同学可以参考其他的动态网页编程的书籍，后面我们只是对多种动态网页技术做个简单的介绍。2．具体使用哪种数据发送方式取决于服务器类型，可以询问管理员来决定。如果方式任意，默认是Get方法，大部分HTML设计者偏好使用Post方法。 虽然用服务器端程序处理表单数据是通用的方法，但是当我们只需要收集简单的信息时，而不需要及时完成交互时，我们可以采用电子邮件的方式传送表单信息。方法为：将“动作”属性设置为“mailto：E-Mail邮箱名”，“方法”属性设置为“Post”，同时将“MIME类型”属性设置为“multipart/form-data MIME”。具体效果读者可以自行尝试。注意：提交表单的用户机器上必须使用Outlook Express作为默认邮件客户端，否则无法正常使用。 2．表单域 表单（Form）定义了数据采集的范围，表单域则是采集用户输入或选择的数据的接口。表单域包含文本框、隐藏域、复选框、单选钮和菜单/列表等，下面分别讲述这些表单域的创建方法和属性设置。 文本域：文本框的名称。该名称是存储该域的值（输入的数据）的变量名，必须在该表单内唯一。字符宽度：指定文