Dreamweaver_网页设计制作表单页面(38张)课件.ppt

《Dreamweaver_网页设计制作表单页面(38张)课件.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver_网页设计制作表单页面(38张)课件.ppt（39页珍藏版）》请在三一办公上搜索。

1、Dreamweaver 网页设计,第7章 制作表单页面,Dreamweaver 网页设计第7章 制作表单页面,本章内容,了解表单的工作原理制作表单插入各种表单元素,本章内容了解表单的工作原理,第1讲 表单的概念,表单的作用就是收集用户的信息 用于调查、注册、定购等 在使用搜索引擎查找信息时，查找的关键字也是通过表单提交到服务器上 利用表单，可以帮助Internet服务器从用户处收集信息,第1讲 表单的概念 表单的作用就是收集用户的信息,第1讲 表单的概念,表单的工作过程如下： 访问者在浏览有表单的网页时，可填写必须的信息，然后单击“提交”按钮。 这些信息通过Internet传送到服务器上。 服

2、务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。 当数据完整无误后，服务器反馈一个输入完成信息。,工作过程,第1讲 表单的概念表单的工作过程如下：工作过程,第1讲 表单的概念,交互式表单收集用户信息，将其提交到服务器，从而实现与客户的交互，一个完整的表单应该包含两个部分： 在网页中进行描述的表单对象 应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。,表单的组成,第1讲 表单的概念 交互式表单收集用户信息，将,第1讲 表单的概念,浏览器处理表单的过程一般是：1. 用户在表单中输入数据，然后提交表单2. 浏览器根据表单体中的设置处理用户输入

3、的数据,第1讲 表单的概念 浏览器处理表单的过程一般是,第1讲 表单的概念,服务器端处理 若表单指定通过服务器端的脚本程序进行处理，则该程序处理完毕后将结果反馈给浏览器（即用户看到的反馈结果） 客户端处理 若表单指定通过客户端（即用户方）的脚本程序处理，则处理完毕后也会将结果反馈给用户。,表单的处理方式,第1讲 表单的概念 服务器端处理表单的处理方式,第1讲 表单的概念,服务器端方式：主要优点是能全方位地处理用户输入的数据，但占用服务器的资源 客户端方式：优点是不占用服务器资源，反馈结果快，但只能对用户输入的数据进行有限的处理。,两种表单数据处理的优缺点,第1讲 表单的概念 服务器端方式：主要

4、优点是能全方位地处理用,第2讲 插入各种表单元素,表单的组成： 一个表单域 若干个表单元素(文本框、单选按钮、下拉菜单、多选按钮等) 所有的表单元素要放到表单域中才有效。,7.2.1插入表单,第2讲 插入各种表单元素 表单的组成：7.2.,第2讲 插入各种表单元素,动作：用于设置处理表单的服务器端脚本的文件路径。,7.2.1插入表单,第2讲 插入各种表单元素动作：用于设置处理表单的服务器端脚本,第2讲 插入各种表单元素,方法：表单提交的方法 Post 表单信息将以文件的形式提交，一般建议使用Post方式提交表单。 Get 将浏览者提供的信息附加在URL地址的后面提交到服务器，为默认提交方式，但

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

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

7、码域,第2讲 插入各种表单元素,多行文本域(textarea)：可输入多行文本的文本域，相当于一个属性为多行的单行文本域。,7.2.4插入多行文本域,第2讲 插入各种表单元素多行文本域(textarea)：可输,第2讲 插入各种表单元素,要点：1. 插入：“快捷工具栏” “表单” “文本区域”2. 基本属性同单行文本框相同（“命名”、“字符宽度”、“初始值”）3. “行数(rows)”：文本域的行数。,7.2.4插入多行文本域,第2讲 插入各种表单元素要点：7.2.4插入多行文本域,第2讲 插入各种表单元素,3. “换行(wrap)”：是否允许文字换行。关(off)：不允许使用换行虚拟(vir

8、tual)：当文本超过文本框宽度时，自动换行，但传送数据时不会将换行符传出。实体(physical)：当文本超过文本框宽度时，自动换行，当传送数据时换行符也会被传出。,7.2.4插入多行文本域,第2讲 插入各种表单元素3. “换行(wrap)”：是否允许,第2讲 插入各种表单元素,复选框(checkbox)：可以提供浏览者进行多项选择的选择框。要点：1. 插入：“快捷工具栏” “表单” “单选按钮”2. 名称(name)：在验证用户提交表单或服务器脚本处理表单时用于区分复选框内容。同一组复选框应使用统一的名称。建议采用驼峰式命名方式。,7.2.5插入复选框,第2讲 插入各种表单元素复选框(ch

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

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

11、打开才能看到全部选项。,7.2.7插入列表/菜单,第2讲 插入各种表单元素 列表和菜单可以将多个,第2讲 插入各种表单元素,7.2.7插入列表/菜单,第2讲 插入各种表单元素7.2.7插入列表/,第2讲 插入各种表单元素,要点：1. 插入：“快捷工具栏” “表单” “列表/菜单”2. “类型”：在属性中选择使用“菜单”或“列表”3. “列表值”：项目标签是页面上显示的内容，值是项目传递时的内容。4. “选定范围”：“列表”可以设置该参数，勾选“允许多项”以同时选定多个选项。浏览者按Ctrl或Shift实现多选.,7.2.7插入列表/菜单,第2讲 插入各种表单元素要点：7.2.7插入列表/,第2

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

13、1. 激发提交表单的动作(表单域的动作)2. 将表单恢复到初始状态,7.2.9插入按钮,第2讲 插入各种表单元素按钮的作用：7.2.9插入按钮,第2讲 插入各种表单元素,要点：1. 插入： “快捷工具栏” “表单”“按钮”2. “动作”：设置单击按钮时触发的动作。提交表单：将动作提交到表单属性的“动作”所指定的路径。重置表单：清楚表单中现有的内容。无：单击无动作，可以通过脚本语言赋予按钮的新功能。,7.2.9插入按钮,第2讲 插入各种表单元素要点：7.2.9插入按钮,第2讲 插入各种表单元素,使用默认的按钮形式往往让人觉得单调。网页可以使用插入图像按钮功能，创建和网页整体效果相统一的图像提交按

14、钮。,7.2.10插入图像域,第2讲 插入各种表单元素 使用默认的按钮形式往,第2讲 插入各种表单元素,要点：1. 插入： “快捷工具栏” “表单”“按钮”2. “替换”：设置替换文本。当图像无法下载时，图像位置会插入替换文本；当图像下载完整，鼠标移至图像上方，替换文字会显示出来，起到说明作用。,7.2.10插入图像域,第2讲 插入各种表单元素要点：7.2.10插入图像域,第2讲 插入各种表单元素,跳转菜单是创建链接的一种形式,但比真正的链接，跳转菜单可以节省很大的空间。,7.2.11插入跳转菜单,第2讲 插入各种表单元素 跳转菜单是创建链接的,第2讲 插入各种表单元素,要点：1.插入： “快

15、捷工具栏” “表单”“跳转菜单”,7.2.11插入跳转菜单,第2讲 插入各种表单元素要点：7.2.11插入跳转菜单,第2讲 插入各种表单元素,2. “文本”：显示在页面上的选项内容。3. “选择时，转到URL”：选择文本时，跳转到的地址。4. “菜单之后插入前往按钮”：在页面跳转菜单后插入一个“前往”按钮，浏览者选择项目后，需要点击“前往”按钮进行跳转。,7.2.11插入跳转菜单,第2讲 插入各种表单元素2. “文本”：显示在页面上的选项内,练习思考,1. 简述表单的处理过程。答：当用户填写了表单并单击“提交”按钮后，填写的信息会被发送到服务器上，服务器端脚本或应用程序对信息进行处理，并将成功

16、结果反馈浏览者，或执行某些特定的程序。,简答,练习思考1. 简述表单的处理过程。简答,练习思考,2. 制作表单页面的第一步是什么？答：每个表单都是由一个表单域和若干个表单元素组成的，所有的表单元素要放到表单域中才会有效，因此，制作表单页面的第一步是插入表单域。,简答,练习思考2. 制作表单页面的第一步是什么？简答,练习思考,3. 表单提交有哪两种方法？答：两种方法是Post和Get。Post表单信息将以文件的形式提交Get将浏览者提供的信息附加在URL地址的后面提交到服务器,简答,练习思考3. 表单提交有哪两种方法？简答,练习思考,4. 如果需要获取登录的用户输入的密码，在表单文本字段的“属性”面板上应选择（ ）。A BC D答：B,选择,练习思考4. 如果需要获取登录的用户输入的密码，在表单文本字,制作如右图所示的表单页面,制作如右图所示的表单页面,态度决定一切细节影响成败谢谢您的关注！,态度决定一切,