dreamweaver-网页设计制作表单页面

1、Dreamweaver 网页设计,第7章 制作表单页面,本章内容,了解表单的工作原理 制作表单 插入各种表单元素,第1讲 表单的概念,表单的作用就是收集用户的信息 用于调查、注册、定购等 在使用搜索引擎查找信息时，查找的关键字也是通过表单提交到服务器上 利用表单，可以帮助Internet服务器从用户处收集信息,第1讲 表单的概念,表单的工作过程如下： 访问者在浏览有表单的网页时，可填写必须的信息，然后单击“提交”按钮。 这些信息通过Internet传送到服务器上。 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。 当数据完整无误后，服务器反馈一个输入完成信息。,

2、工作过程,第1讲 表单的概念,交互式表单收集用户信息，将其提交到服务器，从而实现与客户的交互，一个完整的表单应该包含两个部分： 在网页中进行描述的表单对象 应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。,表单的 组成,第1讲 表单的概念,浏览器处理表单的过程一般是： 1. 用户在表单中输入数据，然后提交表单 2. 浏览器根据表单体中的设置处理用户输入的数据,第1讲 表单的概念,服务器端处理 若表单指定通过服务器端的脚本程序进行处理，则该程序处理完毕后将结果反馈给浏览器（即用户看到的反馈结果） 客户端处理 若表单指定通过客户端（即用户方）的脚本程序处理，则处理完毕后

3、也会将结果反馈给用户。,表单的处理方式,第1讲 表单的概念,服务器端方式：主要优点是能全方位地处理用户输入的数据，但占用服务器的资源 客户端方式：优点是不占用服务器资源，反馈结果快，但只能对用户输入的数据进行有限的处理。,两种表单数据处理的优缺点,第2讲 插入各种表单元素,表单的组成： 一个表单域 若干个表单元素(文本框、单选按钮、下拉菜单、多选按钮等) 所有的表单元素要放到表单域中才有效。,7.2.1插入表单,第2讲 插入各种表单元素,动作：用于设置处理表单的服务器端脚本的文件路径。,7.2.1插入表单,第2讲 插入各种表单元素,方法：表单提交的方法 Post 表单信息将以文件的形式提交，一

4、般建议使用Post方式提交表单。 Get 将浏览者提供的信息附加在URL地址的后面提交到服务器，为默认提交方式，但不能超过8192个字符，且不具有保密性。,7.2.1插入表单,第2讲 插入各种表单元素,要点： 1. 插入：“快捷工具栏” “表单” “文本字段” 2. 文本字段接受任何类型单字母、数字、文本。 3. “表单名”应尽量使用英文，不应含有空格(建议使用驼峰式的规范命名方法)。文本域的名称是程序处理时的依据，因此应尽量与收集内容一致。例如：txtUsername、txtPassword。,7.2.2插入单行文本域,第2讲 插入各种表单元素,3. “字符宽度”：文本框显示在页面上的长度。

5、长度单位为英文字符数(2个英文字符1个中文字符)。 4. “最大字符数”：文本框内所能填写的最多的字符数。长度单位为英文字符数。 5. “初始值”：默认状态下填写在文本框的文字，即页面载入时显示在文本框中的内容。,7.2.2插入单行文本域,第2讲 插入各种表单元素,要点： 1. 插入：“快捷工具栏” “表单” “文本字段”类型选择“密码” 2. 用于填写秘密等机密内容时使用 3. 密码框中的内容将以特殊字符显示，默认为“*”或“” 4. 密码框的属性与单行文本框的属性完全一致。,7.2.3插入密码域,第2讲 插入各种表单元素,多行文本域(textarea)：可输入多行文本的文本域，相当于一个属

6、性为多行的单行文本域。,7.2.4插入多行文本域,第2讲 插入各种表单元素,要点： 1. 插入：“快捷工具栏” “表单” “文本区域” 2. 基本属性同单行文本框相同（“命名”、“字符宽度”、“初始值”） 3. “行数(rows)”：文本域的行数。,7.2.4插入多行文本域,第2讲 插入各种表单元素,3. “换行(wrap)”：是否允许文字换行。 关(off)：不允许使用换行 虚拟(virtual)：当文本超过文本框宽度时，自动换行，但传送数据时不会将换行符传出。 实体(physical)：当文本超过文本框宽度时，自动换行，当传送数据时换行符也会被传出。,7.2.4插入多行文本域,第2讲 插入

7、各种表单元素,复选框(checkbox)：可以提供浏览者进行多项选择的选择框。 要点： 1. 插入：“快捷工具栏” “表单” “单选按钮” 2. 名称(name)：在验证用户提交表单或服务器脚本处理表单时用于区分复选框内容。同一组复选框应使用统一的名称。建议采用驼峰式命名方式。,7.2.5插入复选框,第2讲 插入各种表单元素,3. “选定值”：复选框选项的值。复选框所提交的内容为复选框的值，而不是复选框的名称。 4. “初始状态”：页面载入时，复选框的状态。可通过“已勾选”、“未选中”来区分。,7.2.5插入复选框,第2讲 插入各种表单元素,单选按钮：用于在多个选项中选择一个项目。 要点： 1

8、. 插入：“快捷工具栏”表单“单选按钮” 2. 名称(name)：在验证用户提交表单或服务器脚本处理表单时用于区分单选框内容。同一组单选按钮应具有相同的名称。建议采用驼峰式命名方式。,7.2.6插入单选按钮,第2讲 插入各种表单元素,3. “选定值”：单选框选项的值。单选框所提交的内容为单选框的值，而不是单选框的名称。 4. “初始状态”：页面载入时，单选框的状态。可通过“已勾选”、“未选中”来区分。,7.2.6插入单选框,第2讲 插入各种表单元素,列表和菜单可以将多个项目以特殊的方式罗列在网页上，但又节省了网页的空间。 列表：可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览

9、者可以拖动滚动条来观看各选项。 菜单：一种最节省空间的罗列选项的方式，正常状态只能看到一个选项，单击按钮打开才能看到全部选项。,7.2.7插入列表/ 菜单,第2讲 插入各种表单元素,7.2.7插入列表/ 菜单,第2讲 插入各种表单元素,要点： 1. 插入：“快捷工具栏” “表单” “列表/菜单” 2. “类型”：在属性中选择使用“菜单”或“列表” 3. “列表值”：项目标签是页面上显示的内容，值是项目传递时的内容。 4. “选定范围”：“列表”可以设置该参数，勾选“允许多项”以同时选定多个选项。浏览者按Ctrl或Shift实现多选.,7.2.7插入列表/ 菜单,第2讲 插入各种表单元素,文件域

10、：实现将文件从客户端提交到服务器(网站)，文件域的外观由一个“文本框”和一个“浏览按钮”构成。,7.2.8插入文件域,第2讲 插入各种表单元素,要点： 1. 插入： “快捷工具栏” “表单”“文件域” 2. “文件域名称”：以英文命名，并于文件域内容相关，建议使用驼峰式命名方法。 3.“字符宽度”：设定文件域文本框的宽度，单位是英文字符。 4. “最多字符数”：设定文件域文本框中所能添加的最多字符数。,7.2.8插入文件域,第2讲 插入各种表单元素,按钮的作用： 1. 激发提交表单的动作(表单域的动作) 2. 将表单恢复到初始状态,7.2.9插入按钮,第2讲 插入各种表单元素,要点： 1. 插

11、入： “快捷工具栏” “表单”“按钮” 2. “动作”：设置单击按钮时触发的动作。 提交表单：将动作提交到表单属性的“动作”所指定的路径。 重置表单：清楚表单中现有的内容。 无：单击无动作，可以通过脚本语言赋予按钮的新功能。,7.2.9插入按钮,第2讲 插入各种表单元素,使用默认的按钮形式往往让人觉得单调。网页可以使用插入图像按钮功能，创建和网页整体效果相统一的图像提交按钮。,7.2.10插入图像域,第2讲 插入各种表单元素,要点： 1. 插入： “快捷工具栏” “表单”“按钮” 2. “替换”：设置替换文本。 当图像无法下载时，图像位置会插入替换文本；当图像下载完整，鼠标移至图像上方，替换文

12、字会显示出来，起到说明作用。,7.2.10插入图像域,第2讲 插入各种表单元素,跳转菜单是创建链接的一种形式,但比真正的链接，跳转菜单可以节省很大的空间。,7.2.11插入跳转菜单,第2讲 插入各种表单元素,要点： 1.插入： “快捷工具栏” “表单”“跳转菜单”,7.2.11插入跳转菜单,第2讲 插入各种表单元素,2. “文本”：显示在页面上的选项内容。 3. “选择时，转到URL”：选择文本时，跳转到的地址。 4. “菜单之后插入前往按钮”：在页面跳转菜单后插入一个“前往”按钮，浏览者选择项目后，需要点击“前往”按钮进行跳转。,7.2.11插入跳转菜单,练习思考,1. 简述表单的处理过程。 答：当用户填写了表单并单击“提交”按钮后，填写的信息会被发送到服务器上，服务器端脚本或应用程序对信息进行处理，并将成功结果反馈浏览者，或执行某些特定的程序。,简答,练习思考,2. 制作表单页面的第一步是什么？ 答：每个表单都是由一个表单域和若干个表单元素组成的，所有的表单元素要放到表