第14章 表单 在制作动态网页时,要实现信息交互,常常用到表单。 常见的表单有搜索表单、用户登录注册表单、调查表 单、留言簿表单等。本章节将和大家一起探讨在表单 的基本概念和各个元素,以及在Dreamweaver CS4中 如何创建表单,并通过实例掌握表单制作的方法。
14.1 关于表单 表单是浏览网页的用户与网站管理者进行交互的主要窗口,Web管理者和用户 之间可以通过表单进行信息交流。表单内有多种可以与用户进行交互的表单 元素,如文本框、单选框、复选框、提交按钮等元素。在服务器端,信息处 理由CGI(Common Gete Way Interface)、JSP(Javaserver Page)或ASP (Active Server Page)等应用程序处理。 下面是几个表单应用的例子,邮箱用户注册表单如图14.1所示,搜索引擎表 单如图14.2所示,在线测试表单如图14.3所示。
14.2 表单元素 使用Dreamweaver CS4可以创建各种表单元素,如文 本框、滚动文本框、单选框、复选框、按钮、下拉菜 单等。在“插入”工具栏的“表单”类别中列出了所 有表单元素,如图14.4所示。
14.2.1 插入表单 (1)将光标放在“编辑区”中要插入表单的位置;然后在“插入”工具栏的“表单”类 别中,单击“表单”按钮;此时一个红色的虚线框出现在页面中,表示一个空表单,如图 14.5所示。 (2)单击红色虚线,选中表单;在“属性检查器”中,“表单名称”文本框中输入表单 名称,以便脚本语言Javascript通过名称对表单进行控制;在“方法”下拉列表框中,选 择处理表单数据的传输方法,“Post”方法是在信息正文中发送表单数据,“Get”方法 是将值附加到请求该页面的URL中;在“目标”下拉列表框选择服务器返回反馈数据的显 示方式,这里选择“_blank”,即在新窗口打开;“MIME类型”下拉列表框指定提交服务 器处理数据所使用MIME编码类型。默认设置 “application/x-www-form-urlencode”与 POST方法一起使用,如图14.6所示。
14.2.2 插入文本字段 文本字段是表单中常用的元素之一,主要包括单行文本字段、密码文本字段、多行文本区 域三种。 1.单行文本字段与密码文本字段 网页中最常见的单行文本字段与密码文本字段就要属用户登录框了,如图14.7所示。用户 名一项应用的就是单行文本字段,密码一项应用的就是密码文本字段。 2.多行文本区域
14.2.3 插入复选框 复选框是在一组选项中,允许用户选中多个选项。复 选框是一种允许用户选择对勾的小方框,用户选中某 一项,与其对应的小方框就会出现一个对勾。再单击 鼠标,小对勾将消失,表示此项已被取消。使用复选 框的表单效果如图14.18所示。
14.2.4 插入单选按钮 单选按钮是在一组选项中,只允许选择一个选择项, 例如性别、文化程度等选项。使用单选按钮的表单如 图14.23所示。
14.2.5 插入列表/菜单 列表和菜单也是表单中常用的元素之一,它可以显示 多个选项,用户通过滚动条在多个选项中选择。下面 是一个简单的菜单的例子,如图14.30 所示。
14.2.6 插入跳转菜单 跳转菜单实际上是一种下拉菜单,在菜单中显示当前 站点的导航名称,单击某个选项,即可跳转到相应的 网页上,从而实现导航的目的,如图14.39所示。
14.2.7 插入文件域 在表单中,经常会出现文件域。文件域能使一个文件 附加到正被提交的表单中,比如表单中的上传照片或 图片、邮件中添加附件就是使用了文件域,如图 14.50所示。
14.2.8 插入按钮 在表单中,按钮是用来控制表单的操作。使用按钮可以将表单数据传送给服务器,或者重 新设置表单中的内容。在Dreamweaver CS4中,表单按钮可分为三类:提交按钮、重置按 钮和普通按钮等。应用三种按钮的表单,如图14.53所示。 提交按钮:是把表单中的所有内容发送到服务器端的指定应用程序。 重置按钮:用户在填写表单的过程中,若希望重新填写,单击该按钮使全部表单元素的 值还原为初始值。 普通按钮:该按钮没有内在行为,但可以用JavaScript等脚本语言为其指定动作。