《dreamweaver-网页设计制作表单页面》由会员分享，可在线阅读，更多相关《dreamweaver-网页设计制作表单页面（38页珍藏版）》请在金锄头文库上搜索。
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方式提交表单。
4、Get 将浏览者提供的信息附加在URL地址的后面提交到服务器，为默认提交方式，但不能超过8192个字符，且不具有保密性。,7.2.1插入表单,第2讲 插入各种表单元素,要点： 1. 插入：“快捷工具栏” “表单” “文本字段” 2. 文本字段接受任何类型单字母、数字、文本。 3. “表单名”应尽量使用英文，不应含有空格(建议使用驼峰式的规范命名方法)。文本域的名称是程序处理时的依据，因此应尽量与收集内容一致。例如：txtUsername、txtPassword。,7.2.2插入单行文本域,第2讲 插入各种表单元素,3. “字符宽度”：文本框显示在页面上的长度。长度单位为英文字符数(2个英文字符
5、1个中文字符)。 4. “最大字符数”：文本框内所能填写的最多的字符数。长度单位为英文字符数。 5. “初始值”：默认状态下填写在文本框的文字，即页面载入时显示在文本框中的内容。,7.2.2插入单行文本域,第2讲 插入各种表单元素,要点： 1. 插入：“快捷工具栏” “表单” “文本字段”类型选择“密码” 2. 用于填写秘密等机密内容时使用 3. 密码框中的内容将以特殊字符显示，默认为“*”或“” 4. 密码框的属性与单行文本框的属性完全一致。,7.2.3插入密码域,第2讲 插入各种表单元素,多行文本域(textarea)：可输入多行文本的文本域，相当于一个属性为多行的单行文本域。,7.2.4
6、插入多行文本域,第2讲 插入各种表单元素,要点： 1. 插入：“快捷工具栏” “表单” “文本区域” 2. 基本属性同单行文本框相同（“命名”、“字符宽度”、“初始值”） 3. “行数(rows)”：文本域的行数。,7.2.4插入多行文本域,第2讲 插入各种表单元素,3. “换行(wrap)”：是否允许文字换行。 关(off)：不允许使用换行 虚拟(virtual)：当文本超过文本框宽度时，自动换行，但传送数据时不会将换行符传出。 实体(physical)：当文本超过文本框宽度时，自动换行，当传送数据时换行符也会被传出。,7.2.4插入多行文本域,第2讲 插入各种表单元素,复选框(checkb
7、ox)：可以提供浏览者进行多项选择的选择框。要点： 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. “替换”：设置替换文本。 当图像无法下载时，图像位置会插入替换文本；当图像下载完整，鼠标移至图像上方，替换文字会显示出来，起到说明作用。,7.2
12、.10插入图像域,第2讲 插入各种表单元素,跳转菜单是创建链接的一种形式,但比真正的链接，跳转菜单可以节省很大的空间。,7.2.11插入跳转菜单,第2讲 插入各种表单元素,要点： 1.插入： “快捷工具栏” “表单”“跳转菜单”,7.2.11插入跳转菜单,第2讲 插入各种表单元素,2. “文本”：显示在页面上的选项内容。 3. “选择时，转到URL”：选择文本时，跳转到的地址。 4. “菜单之后插入前往按钮”：在页面跳转菜单后插入一个“前往”按钮，浏览者选择项目后，需要点击“前往”按钮进行跳转。,7.2.11插入跳转菜单,练习思考,1. 简述表单的处理过程。答：当用户填写了表单并单击“提交”按
13、钮后，填写的信息会被发送到服务器上，服务器端脚本或应用程序对信息进行处理，并将成功结果反馈浏览者，或执行某些特定的程序。,简答,练习思考,2. 制作表单页面的第一步是什么？答：每个表单都是由一个表单域和若干个表单元素组成的，所有的表单元素要放到表单域中才会有效，因此，制作表单页面的第一步是插入表单域。,简答,练习思考,3. 表单提交有哪两种方法？答：两种方法是Post和Get。 Post表单信息将以文件的形式提交 Get将浏览者提供的信息附加在URL地址的后面提交到服务器,简答,练习思考,4. 如果需要获取登录的用户输入的密码，在表单文本字段的“属性”面板上应选择（ ）。 A B C D答：B,选择,制作如右图所示的表单页面,
