《Dreamweaver网页设计与制作》-第 １４ 章 　表 单 的 应 用

１４.１表单基础１.什么是表单表单在网页中为网站和访问者提供开展互动的窗口，它在网页中的作用不可小视，主要负责数据采集的功能，比如采集访问者的名字和电子邮件地址、调查表信息、留言簿信息等。这些数据都需要通过表单在网页中进行发送和接收。２.表单的组成表单有３个基本组成部分：（１）表单标签：包含处理表单数据所用ＣＧＩ程序的ＵＲＬ以及数据提交到服务器的方法。（２）表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等，用于采集用户输入或选择的数据。下一页返回１４.１表单基础（３）表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的ＣＧＩ脚本或者取消输入，还可以控制其他定义了处理脚本的处理工作。上一页返回１４.２生成表单１.创建表单表单的创建有两种方式，操作方法分别如下。１）通过菜单栏创建表单首先，建立一个网页文档。其次，将插入点放置到要插入表单的位置。最后，使用主菜单中的“插入”／“表单”／“表单”命令。２）通过“插入”栏创建表单首先，建立一个网页文档。其次，将插入点放置到要插入表单的位置。最后，将“插入”栏切换到“表单”类别，单击其中的“表单”按钮，即可插入相应的表单，如图１４－１所示。下一页返回１４.２生成表单２.设置表单属性需要在表单的“属性”面板中设置表单，如图１４－２所示。各属性的作用说明如下：（１）表单名称：设置表单的名称，可用于处理程序的调用。（２）动作：在文本框中输入或者浏览处理该表单的动态页或脚本程序，用于处理表单提交的数据。（３）目标：指定一个目标窗口来处理表单的动态页或脚本程序的打开方式。（４）方法：指定将表单数据传输到服务器的方法，有３个选项：“ＰＯＳＴ（发送）”“ＧＥＴ（获取）”和“默认”。上一页返回１４.３通过设计工具添加表单对象根据上述方法，可以在表单中添加具体对象。各个对象间有什么区别？如何应用？下面分别说明。１４.３.１文本域１.文本域说明文本域有３种类型：（１）单行文本域：文本内容可见，但只能输入在一行之中。（２）密码域：文本内容不可见，通常只输入在一行之中。（３）多行文本域：文本内容可见，并可实现多行输入。各文本域的效果如图１４－３所示。下一页返回１４.３通过设计工具添加表单对象２.单行文本域单行文本域用来填写单行文本信息，不允许用户对文字进行换行。添加步骤如下：（１）将光标插入到要添加文本域的表单内。（２）执行“插入”／“表单”／“文本域”命令，或将插入工具栏切换到“表单”类别，单击“文本域”，即可在光标所在处添加文本域。（３）选中“文本域”表单对象，在其“属性”面板中选择“单行”文本域类型，如图１４－４所示。上一页下一页返回１４.３通过设计工具添加表单对象３.多行文本域多行文本域提供输入多行文本信息的文本框，用于设置留言板等文字较多的部分。其添加步骤同单行文本域的添加步骤。设置效果如图１４－５所示。４.密码域密码域用来让用户输入密码，输入的字符以占位符“●”显示，以隐藏原始内容。１４.３.２单选按钮和单选按钮组１.单选按钮用户在一组选项中只能选择单个选项时用到单选按钮，如图１４－６所示。上一页下一页返回１４.３通过设计工具添加表单对象添加单选按钮的步骤如下：（１）将光标插入到要添加单选按钮的表单中。（２）执行“插入”／“表单”／“单选按钮”命令。（３）在弹出的对话框中输入标签文字，并选择文字所在的位置，最后单击“确定”按钮。２.单选按钮组单选按钮组是为了方便插入一组单选按钮。插入单选按钮组的具体操作步骤如下：（１）将光标插入到要添加单选按钮组的表单中。（２）执行“插入”／“表单”／“单选按钮组”命令，或将插入工具栏切换到“表单”类别，单击“单选按钮组”按钮，弹出“单选按钮组”对话框，如图１４－７所示。上一页下一页返回１４.３通过设计工具添加表单对象１４.３.３复选框复选框具有多选性，允许在一组选项中选择一个或多个选项，如图１４－８所示。添加复选框的具体操作步骤如下：（１）将光标放在表单中要添加复选框的位置。（２）执行“插入”／“表单”／“复选框”命令，或将插入工具栏切换到“表单”类别，单击“复选框”按钮，即可插入复选框。复选框显示为一个小方块，在它后面可以加上说明文字。（３）选中添加的某个“复选框”对象，可以在“属性”面板中进行相关设置，如图１４－９所示。上一页下一页返回１４.３通过设计工具添加表单对象１４.３.４列表／菜单当需要选择的项目比较多时，为了节省空间，可以把这些选项集中到一个“列表／菜单”的表单对象中，浏览者可以通过列表或菜单提供的选项选择适当的值。在列表中允许用户选择多个选项，而菜单只允许访问者从中选择一项。其效果如图１４－１０、图１４－１１所示。１.插入列表／菜单（１）将光标放到表单中要插入列表／菜单的位置。（２）执行“插入”／“表单”／“列表／菜单”命令，即查插入相应的对象；或将插入工具栏切换到“表单”类别，然后单击“列表／菜单”，即可在网页中插入列表／菜单对象。上一页下一页返回１４.３通过设计工具添加表单对象２.设置列表／菜单属性列表／菜单的“属性”面板如图１４－１２所示。（１）列表／菜单：设置列表／菜单的名称。（２）类型：指定此对象是列表还是菜单。如果是列表，用户可以设置其高度，即在不滚动的情况下显示出来的选项数；选定“允许多选”复选框，也可以设置是否允许用户从列表中选择多项。（３）高度：该项只用于列表类型，指定列表中可显示的行数。（４）选定范围：选中“允许多选”后，可以结合Ｓｈｉｆｔ键对列表中的项目进行多选，否则为单选。（５）初始化选定：指定列表／菜单开始显示时定位在哪一个选项上。上一页下一页返回１４.３通过设计工具添加表单对象（６）列表值：单击该按钮，可打开“列表值”对话框，在“项目标签”下可输入列表／菜单的内容，单击按钮添加新内容，单击按钮删除内容；添加完成后，可单击“确定”按钮。如图１４－１３所示即添加后的列表值。３.跳转菜单跳转菜单的外观和列表／菜单中的菜单类型差不多，不同的是跳转菜单具有超级链接的功能，在其中选择一个选项，将跳转到相应的页面中，如图１４－１４所示。创建跳转菜单的具体操作步骤如下：（１）将光标放到要插入跳转菜单的位置。上一页下一页返回１４.３通过设计工具添加表单对象（２）执行“插入”／“表单”／“跳转菜单”命令，或单击“表单”类别工具栏中的“跳转菜单”按钮，打开“插入跳转菜单”对话框，如图１４－１５所示。１４.３.５添加按钮网页文档中存在３种不同类型的按钮，它们分别是：（１）提交按钮：单击时将表单数据提交到表单域Ａｃｔｉｏｎ属性所指定的服务器端程序或一个Ｅ-ｍａｉｌ地址。（２）重置按钮：单击后表单中各项数据恢复为初始状态。（３）命令按钮：必须为它编制相应的脚本程序，将按钮链接到特定的函数，否则在默认状态下，添加的按钮是一个提交按钮。上一页下一页返回１４.３通过设计工具添加表单对象１.添加按钮添加按钮的具体操作步骤如下：（１）将光标放到要插入按钮的位置。（２）执行“插入”／“表单”／“按钮”命令，或单击“表单”类别工具栏中的“按钮”，即可插入按钮，如图１４－１６所示为插入的提交按钮和重置按钮。２.设置按钮属性按钮的“属性”面板如图１４－１７所示。按钮名称：给按钮命名，Ｄｒｅａｍｗｅａｖｅｒ有两个保留名称———“提交”和“重置”。值：设置显示在按钮上的文本。上一页下一页返回１４.３通过设计工具添加表单对象动作：设置按钮被单击时发生什么动作。有３个选项———提交表单、重设表单和无。选择“无”时，单击按钮不会发生任何动作。１４.３.６其他表单域１.隐藏域隐藏域可存储用户输入的信息内容，并向服务器提供这些数据，便于通过后台处理程序实现在该用户下次访问此站点时显示这些数据的目的，如图１４－１８所示。上一页下一页返回１４.３通过设计工具添加表单对象２.图像域使用Ｐｈｏｔｏｓｈｏｐ或Ｆｉｒｅｗｏｒｋｓ等图形处理软件制作一些漂亮的按钮图像后，利用Ｄｒｅａｍｗｅａｖｅｒ中的表单对象图像域来插入该按钮以替代Ｄｒｅａｍｗｅａｖｅｒ中默认的按钮。如图１４－１９所示，提交按钮由Ｐｈｏｔｏｓｈｏｐ软件制作而成，通过插入图像域对象添加到网页中。３.文件域文件域是由一个文本框和一个显示“浏览”字样的按钮组成的，它的作用就是使访问者能浏览本地计算机上的某个文件，并将该文件作为表单数据上传，如图１４－２０所示。上一页返回１４.４通过标签添加表单对象１４.４.１表单标签功能：用于申明表单，定义采集数据的范围，也就是＜ｆｏｒｍ＞和＜／ｆｏｒｍ＞里面包含的数据将被提交到服务器或者电子邮件。语法：＜ｆｏｒｍａｃｔｉｏｎ＝＂ｕｒｌ＂ｍｅｔｈｏｄ＝＂ｇｅｔｌｐｏｓｔ＂ｅｎｃｔｙｐｅ＝＂ｍｉｍｅ＂ｔａｒｇｅｔ＝＂…＂＞…＜／ｆｏｒｍ＞属性解释：“ａｃｔｉｏｎ＝ｕｒｌ”：指定处理提交表单的格式，它可以是一个ＵＲＬ地址（提交给程式）或一个电子邮件地址。下一页返回１４.４通过标签添加表单对象“ｍｅｔｈｏｄ＝ｇｅｔ”或“ｐｏｓｔ”：指明提交表单的ＨＴＴＰ方法，可能的值为：１.ｐｏｓｔ：ｐｏｓｔ方法在表单的主干包含名称／值对并且无须包含于ａｃｔｉｏｎ特性的ＵＲＬ中。２.ｇｅｔ：ｇｅｔ方法把名称／值对加在ａｃｔｉｏｎ的ＵＲＬ后面并且把新的ＵＲＬ送至服务器，这是往前兼容的缺省值，这个值由于国际化的原因不赞成使用。“ｅｎｃｔｙｐｅ＝ｃｄａｔａ”：指明用来把表单提交给服务器时（当ｍｅｔｈｏｄ值为“ｐｏｓｔ”）的互联网媒体形式，这个特性的缺省值是“ａｐｐｌｉｃａｔｉｏｎ／ｘ－ｗｗｗｆｏｒｍｕｒｌｅｎｃｏｄｅｄ”。上一页下一页返回１４.４通过标签添加表单对象“ｔａｒｇｅｔ＝＂…＂”：指定提交的结果文档显示的位置：（１）＿ｂｌａｎｋ：在一个新的、无名浏览器窗口调入指定的文档；（２）＿ｓｅｌｆ：在指向这个目标的元素的相同的框架中调入文档；（３）＿ｐａｒｅｎｔ：把文档调入当前框的直接的父ＦＲＡＭＥＳＥＴ框中；这个值在当前框没有父框时等价于＿ｓｅｌｆ；（４）＿ｔｏｐ：把文档调入原来的最顶部的浏览器窗口中（因此取消所有其他框架），这个值等价于当前框没有父框时的＿ｓｅｌｆ.上一页下一页返回１４.４通过标签添加表单对象１４.４.２文本框１.单行文本框文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。代码格式：＜ｉｎｐｕｔｔｙｐｅ＝＂ｔｅｘｔ＂ｎａｍｅ＝＂…＂ｓｉｚｅ＝＂…＂ｍａｘｌｅｎｇｔｈ＝＂…＂ｖａｌｕｅ＝＂…＂＞属性解释：ｔｙｐｅ＝＂ｔｅｘｔ＂定义单行文本输入框。ｎａｍｅ属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。上一页下一页返回１４.４通过标签添加表单对象ｓｉｚｅ属性定义文本框的宽度，单位是单个字符宽度。ｍａｘｌｅｎｇｔｈ属性定义最多输入的字符数。ｖａｌｕｅ属性定义文本框的初始值２.多行文本框多行文本框也是一种让访问者自己输入内容的表单对象，它能让访问者填写较长的内容。代码格式：＜ｔｅｘｔａｒｅａｎａｍｅ＝＂…＂ｃｏｌｓ＝＂…＂ｒｏｗｓ＝＂…＂ｗｒａｐ＝＂ｖｉｒｔｕａｌ＂＞＜／ｔｅｘｔａｒｅａ＞上一页下一页返回１４.４通过标签添加表单对象属性解释：ｎａｍｅ属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。３.密码框密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其他符号代替，而输入的文字被隐藏。代码格式：＜ｉｎｐｕｔｔｙｐｅ＝＂ｐａｓｓｗｏｒｄ＂ｎａｍｅ＝＂…＂ｓｉｚｅ＝＂…＂ｍａｘｌｅｎｇｔｈ＝＂…＂＞上一页下一页返回１４.４通过标签添加表单对象属性解释：ｔｙｐｅ＝＂ｐａｓｓｗｏｒｄ＂定义密码框。ｎａｍｅ属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。ｓｉｚｅ属性定义密码框的宽度，单位是单个字符宽度。ｍａｘｌｅｎｇｔｈ属性定义最多输入的字符数。１４.４.３单选按钮当需要访问者在待选项中选择唯一的答案时，需要使用单选框。代码格式：＜ｉｎｐｕｔｔｙｐｅ＝“ｒａｄｉｏ”ｎａｍｅ＝“…”ｖａｌｕｅ＝“…”＞上一页下一页返回１４.４通过标签添加表单对象属性解释：ｔｙｐｅ＝＂ｒａｄｉｏ＂定义单选框。ｎａｍｅ属性定义单选框的名称，单选框都是以组为单位使用的，要保证数据的准确采集，在同一组中的单选项都必须用同一个名称。ｖａｌｕｅ属性定义单选框的值，在同一组中，它们的域值必须是不同的。１４.４.４复选框复选框允许在待选项中选中一个以上选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。上一页下一页返回１４.４通过标签添加表单对象代码格式：＜ｉｎｐｕｔｔｙｐｅ＝＂ｃｈｅｃｋｂｏｘ＂ｎａｍｅ＝＂…＂ｖａｌｕｅ＝＂…＂＞属性解释：ｔｙｐｅ＝＂ｃｈｅｃｋｂｏｘ＂定义复选框。ｎａｍｅ属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。ｖａｌｕｅ属性定义复选框的值。１４.４.５列表／菜单下拉选择框允许在一个有限的空间设置多种选项。代码格式：＜ｓｅｌｅｃｔｎａｍｅ＝＂…＂ｓｉｚｅ＝＂…＂ｍｕｌｔｉｐｌｅ＞上一页下一页返回１４.４通过标签添加表单对象＜ｏｐｔｉｏｎｖａｌｕｅ＝＂…＂ｓｅｌｅｃｔｅｄ＞…＜／ｏｐｔｉｏｎ＞…＜／ｓｅｌｅｃｔ＞属性解释：ｓｉｚｅ属性定义下拉选择框的行数。ｎａｍｅ属性定义下拉选择框的名称。ｍｕｌｔｉｐｌｅ属性表示可以多选，如果不设置本属性，那么只能单选。ｖａｌｕｅ属性定义选择项的值。ｓｅｌｅｃｔｅｄ属性表示默认已经选择本选项。上一页下一页返回１４.４通过标签添加表单对象１４.４.６按钮表单按钮控制表单的运作。１.提交按钮提交按钮用来将输入的信息提交到服务器。代码格式：＜ｉｎｐｕｔｔｙｐｅ＝＂ｓｕｂｍｉｔ＂ｎａｍｅ＝＂…＂ｖａｌｕｅ＝＂…＂＞属性解释：ｔｙｐｅ＝＂ｓｕｂｍｉｔ＂定义提交按钮。ｎａｍｅ属性定义提交按钮的名称。ｖａｌｕｅ属性定义提交按钮的显示文字。上一页下一页返回１４.４通过标签添加表单对象２.复位按钮复位按钮用来重置表单。代码格式：＜ｉｎｐｕｔｔｙｐｅ＝＂ｒｅｓｅｔ＂ｎａｍｅ＝＂…＂ｖａｌｕｅ＝＂…＂＞属性解释：ｔｙｐｅ＝＂ｒｅｓｅｔ＂定义复位按钮。ｎａｍｅ属性定义复位按钮的名称。ｖａｌｕｅ属性定义复位按钮的显示文字。３.一般按钮一般按钮用来控制其他定义了处理脚本的处理工作。上一页下一页返回１４.４通过标签添加表单对象代码格式：＜ｉｎｐｕｔｔｙｐｅ＝＂ｂｕｔｔｏｎ＂ｎａｍｅ＝＂…＂ｖａｌｕｅ＝＂…＂ｏｎＣｌｉｃｋ＝＂…＂＞属性解释：ｔｙｐｅ＝＂ｂｕｔｔｏｎ＂定义一般按钮。ｎａｍｅ属性定义一般按钮的名称。ｖａｌｕｅ属性定义一般按钮的显示文字。ｏｎＣｌｉｃｋ属性，也可以是其他事件，通过指定脚本函数来定义一般按钮的行为。上一页下一页返回１４.４通过标签添加表单对象１４.４.７其他表单域１.隐藏域隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息以设置时定义的名称和值发送到服务器上。代码格式：＜ｉｎｐｕｔｔｙｐｅ＝＂ｈｉｄｄｅｎ＂ｎａｍｅ＝＂…＂ｖａｌｕｅ＝＂…＂＞属性解释：ｔｙｐｅ＝＂ｈｉｄｄｅｎ＂定义隐藏域。ｎａｍｅ属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称。ｖａｌｕｅ属性定义隐藏域的值。上一页下一页返回１４.４通过标签添加表单对象２.文件上传框有时候，需要用户上传自己的文件，文件上传框看上去和其他文本域差不多，只是它包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。注意：在使用文件域以前，请先确定服务器是否允许匿名上传文件。表单标签中必须设置“ｅｎｃｔｙｐｅ＝”ｍｕｌｔｉｐａｒｔ／ｆｏｒｍ－ｄａｔａ“来确保文件被正确编码；另外，表单的传送方式必须设置成ｐｏｓｔ”。代码格式：＜ｉｎｐｕｔｔｙｐｅ＝＂ｆｉｌｅ＂ｎａｍｅ＝＂…＂ｓｉｚｅ＝＂１５＂ｍａｘｌｅｎｇｔｈ＝＂１００＂＞上一页返回１４.５表单的提