网页设计与制作表单的使用课件.pptx

1、第第6章章 表单的使用表单的使用学习目标：学习目标：通过这章的学习，可以应用表单收集来自用户的信息，包括网上调查、网上订单和建立搜索界面等等。主要内容包括表单和表单对象概念、创建表单和添加表单对象。第第6章章 表单的使用表单的使用 简单地说，表单就是用户可以在网页中填写信息的表格，其作用是接收访问者信息并将提交给Web服务器上特定的程序进行处理。表单是收集访问者反馈信息的有效方式，是网站与浏览者实现互动的重要手段。在网络中应用非常广泛。目前大多数的网站，尤其是专业型的网站，都需要与访问者进行动态的交流。要实现与访问者的交互，表单是必不可少的板块。例如，在线申请、在线购物和在线调查问卷等。表单架

2、设了网站和访问者之间进行沟通的桥梁。这些过程就是需要填写一系列表单，并将其发送到网站的后台服务器，交由服务器的脚本或应用程序来处理。第第6章章 表单的使用表单的使用v6.1 表单插入面板表单插入面板v6.2 表单的创建表单的创建v6.3 表单对象的创建表单对象的创建6.1 表单插入面板表单插入面板 一般的表单由文本域、复选框、按钮、文件域等部分组一般的表单由文本域、复选框、按钮、文件域等部分组成，而所有的部分，都包含在一个成，而所有的部分，都包含在一个标识符标志的表标识符标志的表单结构内。单结构内。v（表单体）：添加其他表单对象的基本容器。（表单体）：添加其他表单对象的基本容器。v（文本字段）

3、：在表单中建立文本输入框的工具。（文本字段）：在表单中建立文本输入框的工具。v（隐藏域）：在网页的表单中包含隐藏的信息。（隐藏域）：在网页的表单中包含隐藏的信息。v（文本区域）：在表单中建立输入多行文本输入的工具。（文本区域）：在表单中建立输入多行文本输入的工具。v（复选框）：供用户在提供的多个选项中做出复选。（复选框）：供用户在提供的多个选项中做出复选。v（单选按钮）：用于创建单个按钮。（单选按钮）：用于创建单个按钮。v（单选按钮组）：用于创建多个单选按钮，并使这些单选按（单选按钮组）：用于创建多个单选按钮，并使这些单选按钮成为一钮成为一组组6.1 表单插入面板表单插入面板v（列表（列表/菜

4、单）：可以在网页中以列表的形式为用户提供一菜单）：可以在网页中以列表的形式为用户提供一系列的预设选择项。系列的预设选择项。v（跳转菜单）：提供一个包含跳转动作的菜单列表。（跳转菜单）：提供一个包含跳转动作的菜单列表。v（图象域）：可用于替换表单中的标准按钮对象。（图象域）：可用于替换表单中的标准按钮对象。v（文件域）：在网页中建立一个文件地址的输入选择栏。（文件域）：在网页中建立一个文件地址的输入选择栏。v（按钮）：用于触发服务器脚本处理程序的工具。（按钮）：用于触发服务器脚本处理程序的工具。v（标签）：当用户单击该按钮时，文档窗口则会显示为文档（标签）：当用户单击该按钮时，文档窗口则会显示为

5、文档v和代码同进显示模式，并在源代码中添加和代码同进显示模式，并在源代码中添加标签和标签和v标签，在这两个标签之间用户可以输入相应的代码。标签，在这两个标签之间用户可以输入相应的代码。v（字段集）：用于让用户在对话框中输入代码，然后系统自（字段集）：用于让用户在对话框中输入代码，然后系统自v动将这些代码加入到表单源代码中。动将这些代码加入到表单源代码中。6.2 表单的创建表单的创建 表单最重要的用途是和用户进行交互，表单最重要的用途是和用户进行交互，所以表单必须有非常方便的用户界面。使所以表单必须有非常方便的用户界面。使用表单可以使你搜索来自用户的信息，从用表单可以使你搜索来自用户的信息，从而

6、达到进行交互的目的。而达到进行交互的目的。根椐需要设置如下参数：根椐需要设置如下参数：v【表单名称表单名称】：用于设置表单的名称，可：用于设置表单的名称，可在下面的编辑框中输入一个名字。在下面的编辑框中输入一个名字。v【动作动作】：用于指定处理表单的应用程序。：用于指定处理表单的应用程序。v【方法方法】：用于指定处理表单的方法：用于指定处理表单的方法6.2 表单的创建表单的创建v默认，使用浏览器默认的方法（一般为默认，使用浏览器默认的方法（一般为GET）。）。v选择选择GET，追加表单值到，追加表单值到URL，并发送服务器，并发送服务器GET请求，请求，vURL限制长度为限制长度为819个字符

7、，超出长度的部分会被去掉，所以不要对长个字符，超出长度的部分会被去掉，所以不要对长v表单使用表单使用GET方法，也不要用方法，也不要用GET方法传送用户名、密码、信用卡账号方法传送用户名、密码、信用卡账号v或其他机密信息，因为或其他机密信息，因为GET方法不是传送信息的安全方式。方法不是传送信息的安全方式。v选择选择POST，在，在HTTP request的消息正文中发送表单的值，并发送服务器的消息正文中发送表单的值，并发送服务器POST请求。请求。v【目标目标】：指定打开链接文件的框架或窗口。：指定打开链接文件的框架或窗口。v【MIME类型类型】：指定提交服务器处理的数据的：指定提交服务器处

8、理的数据的MIME编码方式，与编码方式，与vPOST方法连用的一般是方法连用的一般是application/x-www-form-urlencode。如果创建。如果创建v的是文件上载区域，则指定的是文件上载区域，则指定multipart/form-data MIME格式。格式。6.2 表单的创建表单的创建(1)表单的HTML基本语法 .6.3 表单对象的创建表单对象的创建 在创建表单之后，就可以通过表单工具面栏在表单中插入各种表单对象，也可以通过相应的菜单在表单中插入相应的表单对象。在表单中可以插入单行文本域、隐藏文本域、多行文本域、单选按钮、复选框、单选按钮组、列表菜单以及跳转菜单等多种表单

9、对象。6.3.1 插入文本字段和文本区域 文本字段和文本区域如图文本字段和文本区域如图6-7所示，用来输入文本，如姓名、所示，用来输入文本，如姓名、密码等内容。密码等内容。v【文本域文本域】：给文本域分配一个名字。每一个文本域必须对应：给文本域分配一个名字。每一个文本域必须对应不同的名字。不同的名字。v【字符宽度字符宽度】：设置文本域内可以显示字符的最大数目。这个：设置文本域内可以显示字符的最大数目。这个值可以小于值可以小于【最多字符数最多字符数】文本框的值文本框的值v【最多字符数最多字符数】：设置单行文本域内一行所能显示的最多字符：设置单行文本域内一行所能显示的最多字符数目或多行文本域所能显

10、示的最大行数。数目或多行文本域所能显示的最大行数。v【初始值初始值】：设置文本域第一次显示时的文字。：设置文本域第一次显示时的文字。v【类型类型】：设置文本域为单行文本域、多行文本域或密码文本：设置文本域为单行文本域、多行文本域或密码文本域。域。v【单行单行】：在代码中加入：在代码中加入TYPE属性为属性为TEXT的的INPUT标记。标记。v【多行多行】：在代码中加入：在代码中加入TEXTAREA标记。标记。v【密码密码】：在代码中加入：在代码中加入TYPE属性为属性为PASSWORD的的IUPUT标记。标记。6.3.2 插入单选按钮 当用户单击单选按钮组中的某个按钮时，其他按钮就会被当用户单

11、击单选按钮组中的某个按钮时，其他按钮就会被取消选中状态。单选按钮使用起来很方便，但适用的范围有限。取消选中状态。单选按钮使用起来很方便，但适用的范围有限。只有预知所有答案的各种可能项，且只有一项被选中时，才能只有预知所有答案的各种可能项，且只有一项被选中时，才能使用单选按钮使用单选按钮.【单选按钮单选按钮】：输入单选按钮的名字，同一组中的单选按钮必：输入单选按钮的名字，同一组中的单选按钮必须用同一个名字。须用同一个名字。【选定值选定值】：设置选中的单选按钮的值。当用户提交这个表单：设置选中的单选按钮的值。当用户提交这个表单时，这个值将会被发送至服务器的应用程序中，同一组中的每时，这个值将会被发

12、送至服务器的应用程序中，同一组中的每个单选按钮必须设置不同的值。个单选按钮必须设置不同的值。【初始状态初始状态】：设置该单选按钮在第一次载入时的状态，有：设置该单选按钮在第一次载入时的状态，有【已勾选已勾选】与与【未选中未选中】两个选项。在一组单选按钮中，只能两个选项。在一组单选按钮中，只能将一个单选按钮设置为选中状态。将一个单选按钮设置为选中状态。6.3.2 插入单选按钮相应的相应的HTML基本语法为：基本语法为：6.3.3 添加列表/菜单 菜单单击它右侧的按钮时，将弹出一个菜单单击它右侧的按钮时，将弹出一个下拉列表，可以在弹出的列表中选择任一选下拉列表，可以在弹出的列表中选择任一选项，如图

13、项，如图6-12所示。列表与菜单的不同点在所示。列表与菜单的不同点在于它始终显示了一个或多个选项，如图于它始终显示了一个或多个选项，如图6-13所示，它要比菜单直观一些，但占用的空间所示，它要比菜单直观一些，但占用的空间要大于菜单。它就像是单选按钮与菜单的折要大于菜单。它就像是单选按钮与菜单的折衷方案。衷方案。6.3.3 添加列表/菜单v【列表列表/菜单菜单】：设置列表或菜单的名字。：设置列表或菜单的名字。v【类型类型】：设置插入的是列表还是菜单。对于列表，可以在：设置插入的是列表还是菜单。对于列表，可以在【高高度度】文本框中设置其高度（即列表中一次可以显示的项目数文本框中设置其高度（即列表中

14、一次可以显示的项目数v量）；如果选中量）；如果选中【允许多选允许多选】复选框，则可以在列表中一次选中复选框，则可以在列表中一次选中多个项目。多个项目。v【初始化时选定初始化时选定】：默认选中的列表项或菜单项。：默认选中的列表项或菜单项。v【列表值列表值】：单击该按钮，打开：单击该按钮，打开【列表值列表值】对话框，如图对话框，如图6-16所所示。示。v在此对话框中添加或删除列表（或菜单）中的项目。列表中的每在此对话框中添加或删除列表（或菜单）中的项目。列表中的每个项目都有一个标签和一个值。若没有指定值，则标签会代替值，个项目都有一个标签和一个值。若没有指定值，则标签会代替值，将发送至应用程序进行

15、处理。将发送至应用程序进行处理。v单击或按钮，可添加或删除列表中的项目；单击或按钮，可将选单击或按钮，可添加或删除列表中的项目；单击或按钮，可将选中的项目在列表中重新排列。中的项目在列表中重新排列。6.3.4插入复选框 复选框提供了多个选项，以便访问者选择。选复选框提供了多个选项，以便访问者选择。选中某个复选框时，在其相应的方框内标有中某个复选框时，在其相应的方框内标有“”；去掉去掉“”，则表示不选中该复选框。打个比方说，则表示不选中该复选框。打个比方说，复选框就像标准化考试中的多项选择题，如图复选框就像标准化考试中的多项选择题，如图6-17所示。所示。v【复选框名称复选框名称】：设置复选框的

16、名字：设置复选框的名字v【选定值选定值】：设置选中的复选框的值。当用户提交：设置选中的复选框的值。当用户提交这个表单时，这个值将会被发送至服务器端的应用这个表单时，这个值将会被发送至服务器端的应用程序中。程序中。v【初始状态初始状态】：设置该复选框在第一次显示时的状：设置该复选框在第一次显示时的状态，有态，有【已勾选已勾选】与与【未选中未选中】两个选项。两个选项。6.3.5 插入文件地址域 文件地址域能够在网页中建立一个文件地址的输入选择文件地址域能够在网页中建立一个文件地址的输入选择栏。栏。Dreamweaver MX提供了直接在文档中插入文件地址提供了直接在文档中插入文件地址域的功能。文件

17、地址域如图域的功能。文件地址域如图6-19所示，包括了一个文本字段所示，包括了一个文本字段和一个和一个【浏览浏览】按钮，该域用来选择本地文件。在浏览器中按钮，该域用来选择本地文件。在浏览器中单击单击【浏览浏览】按钮，可以打开按钮，可以打开【打开打开】对话框，在目录列表对话框，在目录列表中可以选择需要的文件。中可以选择需要的文件。v【文件域名称文件域名称】：设置文件域的名字。每一个文件域必须对：设置文件域的名字。每一个文件域必须对应不同的名字。应不同的名字。v【字符宽度字符宽度】：设置文件域内可以显示的最大字符数目。这：设置文件域内可以显示的最大字符数目。这个值可以小于个值可以小于【最多字符数最

18、多字符数】文本框中设置的值。文本框中设置的值。v【最多字符数最多字符数】：设置文件域一行内所能输入的最大字符数：设置文件域一行内所能输入的最大字符数目。可以使用这个属性限制文件域的长度。目。可以使用这个属性限制文件域的长度。6.3.6 插入按钮对象 表单中的按钮对象是用于触发服务器脚本处理程序的工表单中的按钮对象是用于触发服务器脚本处理程序的工具。只有通过按钮的触发，才能把用户填的信息传送到服务具。只有通过按钮的触发，才能把用户填的信息传送到服务器端去。常见的按钮有提交按钮和重置。提交按钮用来发送器端去。常见的按钮有提交按钮和重置。提交按钮用来发送表单中填写的数据；重置按钮用来清除表单中填写的

19、数据。表单中填写的数据；重置按钮用来清除表单中填写的数据。v【按钮名称按钮名称】：设置按钮的名字。按钮名有提交和重置两个：设置按钮的名字。按钮名有提交和重置两个保留名。提交用于将表单信息提交至处理信息的应用或脚本；保留名。提交用于将表单信息提交至处理信息的应用或脚本；重置用于以原始值重新设置所有的表单区。重置用于以原始值重新设置所有的表单区。v【标签标签】：设置在按钮上显示的文本。：设置在按钮上显示的文本。v【动作动作】：指定在单击这个按钮时发生的事件。选择：指定在单击这个按钮时发生的事件。选择【提交提交表单表单】单选按钮，将会自动将按钮标签设置为单选按钮，将会自动将按钮标签设置为【提交提交】

20、；选；选择择【重设表单重设表单】阅览单选按钮，将会自动将按钮标签设置为阅览单选按钮，将会自动将按钮标签设置为【重置重置】；选择；选择【无无】单选按钮，则表示在按钮被单击后，单选按钮，则表示在按钮被单击后，既不提交表单也不重置表单。既不提交表单也不重置表单。6.3.7 跳转菜单 跳转菜单是一个下拉菜单，其中的每个选项都可以说是一个超级链接，所以既可创建一个站内的链接，也可以创建一个站外的链接，还可以创建E-mail链接或图片链接，或者是到任意一种能在浏览器中打开的文件的链接。一个跳转菜单通常包括3个组成部分：v菜单说明。用来说明其中的选项都是属于哪一类的链接。v一系列的选项。其中每个选项都是超级链接，选中每一个选项都将打开一个链接。v一个跳转按钮。6.3.7 跳转菜单v1添加一个跳转菜单 v2修改跳转菜单 第第6章章 表单的使用表单的使用操作题操作题:新建一个文档，在该文档中建立一个个人资料的表单。该表单如下图所示。