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

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

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

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

4、单选按按钮、下下拉菜单单、多选选按钮等等)所有的表表单元素素要放到到表单域域中才有有效。7.2.1插入表单单第2讲 插入入各种表表单元素素动作：用于设置置处理表表单的服服务器端端脚本的的文件路路径。7.2.1插入表单单第2讲 插入入各种表表单元素素方法：表单提交交的方法法Post表单信息息将以文文件的形形式提交交，一般般建议使使用Post方式提交交表单。Get将浏览者者提供的的信息附附加在URL地址的后后面提交交到服务务器，为为默认提提交方式式，但不不能超过过8192个字符，且不具具有保密密性。7.2.1插入表单单第2讲 插入入各种表表单元素素要点：1.插入：“快捷捷工具栏栏”“表单单”“文本

5、本字段”2.文本字段段接受任任何类型型单字母母、数字字、文本本。3.“表单名”应尽量量使用英英文，不不应含有有空格(建议使用用驼峰式的规范命命名方法法)。文本域域的名称称是程序序处理时时的依据据，因此此应尽量量与收集集内容一一致。例例如：txtUsername、txtPassword。7.2.2插入单行行文本域域第2讲 插入入各种表表单元素素3.“字符宽度度”：文本本框显示示在页面面上的长长度。长长度单位位为英文文字符数数(2个英文字字符1个中文字字符)。4.“最大字符符数”：文本本框内所所能填写写的最多多的字符符数。长长度单位位为英文文字符数数。5.“初始值”：默认认状态下下填写在在文本框框

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

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

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

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

10、列在网页上上，但又又节省了了网页的的空间。列表：可以显示示一定数数量的选选项，如如果超出出了这个个数量，会自动动出现滚滚动条，浏览者者可以拖拖动滚动动条来观观看各选选项。菜单：一种最节节省空间间的罗列列选项的的方式，正常状状态只能能看到一一个选项项，单击击按钮打打开才能能看到全全部选项项。7.2.7插入列表表/菜单第2讲 插入入各种表表单元素素7.2.7插入列表表/菜单第2讲 插入入各种表表单元素素要点：1.插入：“快捷捷工具栏栏”“表单单”“列表表/菜单”2.“类型”：在属性性中选择择使用“菜单”或“列列表”3.“列表值”：项目标标签是页页面上显显示的内内容，值值是项目目传递时时的内容容。4

11、.“选定范围围”：“列表表”可以以设置该该参数，勾选“允许多多项”以以同时选选定多个个选项。浏览者者按Ctrl或Shift实现多选选.7.2.7插入列表表/菜单第2讲 插入入各种表表单元素素文件域：实现将将文件从从客户端端提交到到服务器器(网站)，文件域域的外观观由一个个“文本本框”和和一个“浏览按按钮”构构成。7.2.8插入文件件域第2讲 插入入各种表表单元素素要点：1.插入：“快捷捷工具栏栏”“表单单”“文件域域”2.“文件域域名称”：以英文文命名，并于文文件域内内容相关关，建议议使用驼驼峰式命命名方法法。3.“字符宽宽度”：设定文文件域文文本框的的宽度，单位是是英文字字符。4.“最多字字

12、符数”：设定文文件域文文本框中中所能添添加的最最多字符符数。7.2.8插入文件件域第2讲 插入入各种表表单元素素按钮的作作用：1.激发提交交表单的的动作(表单域的的动作)2.将表单恢恢复到初初始状态态7.2.9插入按钮钮第2讲 插入入各种表表单元素素要点：1.插入：“快捷捷工具栏栏”“表单单”“按钮”2.“动作”：设置单单击按钮钮时触发发的动作作。提交表单单：将动作作提交到到表单属属性的“动作”所指定定的路径径。重置表单单：清楚表表单中现现有的内内容。无：单击无无动作，可以通通过脚本本语言赋赋予按钮钮的新功功能。7.2.9插入按钮钮第2讲 插入入各种表表单元素素使用默认认的按钮钮形式往往往让人

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

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