第13章 表单设计.pptVIP

第13章 表单设计 第13章 表单设计 表单是一个容器，可以存放各种表单元素，如按钮、文本域等。表单是网站管理者和浏览者之间交流的平台。通过表单，可以把用户输入的信息提交给服务器。使用Dreamweaver可以方便的设计表单。本章主要介绍表单的创建，给表单添加对象的方法以及各种表单对象的属性设置等内容。 13.1 定义表单 表单的定义是和动态网页相关的，用表单实现的动态网页必须具备以下两个条件：具有表单对象的页面和表单后的脚本程序。 13.1.1 表单概述 在浏览网页时常常会看到用来收集信息的页面，页面中包含一些按钮、文本框和列表等，这就是表单页面。用户首先在文本框、单选和复选框等表单元素中填写信息，最后通过按钮把信息提交。表单中的元素很多，统称为表单对象。这些对象分别用于实现不同的功能。 13.1 定义表单 插入表单对象的操作步骤如下： ① 把鼠标定位在文档区中要插入表单对象的位置。 ② 选择主菜单【插入】|【表单】，打开如图13.1所示的表单对象子菜单，在该菜单中选择要插入的表单对象。或者把“插入”面板切换到“表单”项(如图13.2所示)，在该面板中选择需要的表单对象。 ③ 在弹出的对话框中进行相应的设置，完成表单对象的插入。 13.1 定义表单 表单面板中的按钮与【插入】菜单下的【表单】子菜单中的命令一一对应，其中各项目的功能介绍如下： 【表单】：添加所有其他表单对象的基本容器。 【文本字段】：添加用来输入文本的单行文本框。 【隐藏域】：添加一个用来存储用户数据的域，该区域用户不可见。 【文本区域】：添加用来输入文本的多行文本框。 【复选框】：添加用于多项选择的复选框。 13.1 定义表单 【单选按钮】：添加用于在网页中多个项之间进行单项选择的单选按钮。 【单选按钮组】：一次添加多个单选按钮。 【列表/菜单】：添加以列表或菜单形式出现的选项。 【跳转菜单】：添加一个用于跳转到其他文件的菜单列表。 【图像域】：添加一个用于替换提交按钮的图像。 【文件域】：添加空白文本域和浏览按钮，作用是使用户浏览本地磁盘上的文件，并上传到服务器。 13.1 定义表单 【按钮】：添加文本按钮，点击触发服务器端脚本处理程序。 【标签】：在表单中插入标签。 【字段集】：使用户在对话框中输入代码，系统可自动将输入的代码加入到表单源代码中。 对于表单页面的总体设计，本章只介绍如何制作表单网页，动态网页部分请读者参考拓展篇。 13.1 定义表单 制作表单网页的大致步骤如下： ① 在页面中插入“表单”。表单是存放其他表单对象的容器，其它表单对象一般应该插入到表单中。 ② 在表单中插入其他表单对象。 ③ 使用表格等排版工具对所有对象进行调整。 13.1 定义表单 13.1.2 定义表单 表单是存放其他表单对象的容器，用来限制其他表单对象的插入范围。定义表单包括表单的插入和表单的属性设置。 1．插入表单 ① 把鼠标定位在文档区中需要插入表单的位置。 ② 使用主菜单【插入】|【表单】|【表单】或点击图13.2中的“表单”按钮，插入后的表单在文档中用红色虚线表示，如图13.3所示。 13.1 定义表单 在文档中插入表单后，如果切换到代码视图，即可看到表单部分的源代码如下： form id=form1 name=form1 method=post action= /form 从代码中可以看出在标记form和/form之间存放表单内容，在其中插入的所有其他表单对象都不能超出该范围。 13.1 定义表单 2．表单的属性设置 插入表单后，选中表单或把插入点放到表单内部，打开属性面板，如图13.4所示。 其中各个选项的含义如下： ◆ 【表单名称】：为表单命名以识别表单。 ◆ 【动作】：在文本框中输入或者浏览处理该表单的动态页或脚本程序，用于处理表单提交的数据。 ◆ 【目标】：设置处理该表单的动态页或脚本程序的打开方式。 13.1 定义表单 【方法】：设置表单数据传输到服务器的方法，有3个选项： ① POST：在HTTP请求中嵌入表单数据。 ② GET：将浏览者提供的信息附加到请求该页的URL中，该方法对信息长度进行了限制且没有保密性，不提倡使用。 ③ 默认：等同于GET。 【MIME类型】：通常和POST方法配合使用，用于指定对提交给服务器进行处理的数据使用MIME编辑类型。 13.2 文本域 插入了表单之后，就可以在该“容器”中插入其他的表单对象了。文本域是常用的表单对象，主要用来收集用户输入的文字信息。文本域可分为单行文本域、多行文本域以及密码文本域。 13.2.1 单行文本域 单行文本域用来填写单行的简单文本信息。多用于输入用户名和其他简单信息。添加方法和添加表单类似。单行文本域的属性面板如图13.5所示。 13.2 文本域 该面板中各