Dreamweaver网页设计制作表单页面页

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

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

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

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

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

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

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

8、应具有相同的名称。建议采用驼峰式命名方式。7.2.6插入单选按钮第2讲 插入各种表单元素3. “选定值”：单选框选项的值。单选框所提交的内容为单选框的值，而不是单选框的名称。4. “初始状态”：页面载入时，单选框的状态。可通过“已勾选”、“未选中”来区分。7.2.6插入单选框第2讲 插入各种表单元素 列表和菜单可以将多个项目以特殊的方式罗列在网页上，但又节省了网页的空间。列表：可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以拖动滚动条来观看各选项。菜单：一种最节省空间的罗列选项的方式，正常状态只能看到一个选项，单击按钮打开才能看到全部选项。7.2.7插入列表/菜单第2讲

9、 插入各种表单元素7.2.7插入列表/菜单第2讲 插入各种表单元素要点：1. 插入：“快捷工具栏” “表单” “列表/菜单”2. “类型”：在属性中选择使用“菜单”或“列表”3. “列表值”：项目标签是页面上显示的内容，值是项目传递时的内容。4. “选定范围”：“列表”可以设置该参数，勾选“允许多项”以同时选定多个选项。浏览者按Ctrl或Shift实现多选.7.2.7插入列表/菜单第2讲 插入各种表单元素文件域：实现将文件从客户端提交到服务器(网站)，文件域的外观由一个“文本框”和一个“浏览按钮”构成。7.2.8插入文件域第2讲 插入各种表单元素要点：1. 插入： “快捷工具栏” “表单”“文

10、件域”2. “文件域名称”：以英文命名，并于文件域内容相关，建议使用驼峰式命名方法。3.“字符宽度”：设定文件域文本框的宽度，单位是英文字符。4. “最多字符数”：设定文件域文本框中所能添加的最多字符数。7.2.8插入文件域第2讲 插入各种表单元素按钮的作用：1. 激发提交表单的动作(表单域的动作)2. 将表单恢复到初始状态7.2.9插入按钮第2讲 插入各种表单元素要点：1. 插入： “快捷工具栏” “表单”“按钮”2. “动作”：设置单击按钮时触发的动作。提交表单：将动作提交到表单属性的“动作”所指定的路径。重置表单：清楚表单中现有的内容。无：单击无动作，可以通过脚本语言赋予按钮的新功能。7

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