Web信息系统设计基础 第8章 表单及表单验证.ppt

第八章表单及表单验证,内容提要,创建HTML表单插入表单元素验证HTML表单附加自定义表单插入具有辅助功能的表单元素,表单也称为对话框或窗口，恰似用户的操作列表或清单。如图。表单和表单元素是动态网页程序设计的基础，用户可以使用文本域、列表框、复选框等表单元素输入信息。然后单击提交按钮，表单会将这些信息发送到服务器，服务器中的服务器端脚本或应用程序会对这些信息进行处理，并向用户返回处理结果。,创建HTML表单,插入表单在Dreamweaver中打开页面，将光标定位到要插入表单的位置。执行下列操作之一，即可在指定位置插入表单：选择“插入记录”|“表单”|“表单”命令；选择“插入”工具栏上的“表单”类别，然后单击“表单”按钮。,创建HTML表单,在“设计”视图中，表单显示为红色的虚轮廓线,注意：在一个页面中可以包含多个表单，但不能在一个表单中插入另一个表单。,设置表单属性在“文档”窗口中，单击表单轮廓或将插入点放入表单内部。选择“窗口”|“属性”命令，打开表单的“属性”面板。在“属性”面板上设置表单的各项属性：在“表单名称”文本框中，输入标识该表单的唯一名称。命名表单后，就可以使用脚本语言来引用或控制该表单。在“动作”文本框中，输入处理表单数据的页面或脚本的路径，或者单击文件夹图标导航到相应的页面或脚本。,创建HTML表单,在“方法”下拉列表框中，选择将表单数据传到服务器的方式，有“默认”、“GET”和“POST”三个选项：默认：使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为GET方法。GET：提交后，浏览器会立即传送表单数据。GET方法用来传送少量数据，字节数不能超过2K。POST：提交后，浏览器会等待服务器来读取表单数据。POST方法用来传送大量数据，无此限制。,创建HTML表单,在“目标”下拉列表框中，选择显示返回结果的浏览器窗口，有四个选项，含义如下：_blank：在未命名的新窗口中显示返回结果。_parent：在显示当前页面的窗口的父窗口中显示返回结果。_self：在显示当前页面的窗口中显示返回结果。_top：在顶层窗口中显示返回结果。在“MIME类型”下拉列表框中，指定提交给服务器进行处理的数据使用的MIME编码类型。默认设置为“application/x-www-form-urlencode”，通常与POST方法一起使用。如果表单包含文件上传域，则指定为“multipart/form-data”类型。,创建HTML表单,表单元素表单元素是允许用户输入数据的HTML元素对象。插入表单元素的步骤如下：将光标置于表单中待插入表单元素的位置。执行下列操作之一，即可在指定位置插入表单元素：选择“插入记录”|“表单”命令，在弹出的子菜单中选择相应的表单元素命令；选择“插入”工具栏上的“表单”项目，单击相应的表单元素按钮。,插入表单元素,插入文本域文本域是可在其中输入各种文本的表单元素，文本可以单行、多行或密码方式显示。插入文本域的步骤如下：将光标置于表单中待插入文本域的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“文本域”命令，在表单中插入文本域。选中文本域，打开相应的“属性”面板。,插入表单元素,在“属性”面板上设置文本域的各项属性：在“文本域”文本框中，输入标识该文本域的唯一名称。在“字符宽度”文本框中，输入文本域中最多可显示的字符数。在“最多字符数”文本框中，输入文本域中最多可容纳的字符数。在“初始值”文本框中，输入在浏览器载入表单时文本域中显示的内容。在“类型”单选按钮组中，指定文本域为单行、多行还是密码域。,插入表单元素,插入按钮使用按钮可将表单数据提交到服务器，或者重置表单。用户也可以为按钮分配其他已经在脚本中定义的处理任务。插入按钮的步骤如下：将光标置于表单中待插入按钮的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“按钮”命令，在表单中插入按钮。选中按钮，打开相应的“属性”面板。,插入表单元素,在“属性”面板上设置按钮的各项属性：在“按钮名称”文本框中，输入标识该按钮的唯一名称。在“值”文本框中，输入按钮上显示的文本。在“动作”单选按钮组中，指定单击按钮时发生的动作。提交表单：创建提交按钮，单击该按钮时提交表单数据进行处理，数据将被提交到在表单的“动作”属性中指定的页面或脚本。重设表单：创建复位按钮，单击该按钮时将表单数据恢复为初始值。无：单击该按钮时，执行指定的动作。,插入表单元素,插入复选框复选框用于在一组选项中选择多个选项。插入复选框的步骤如下：将光标置于表单中待插入复选框的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“复选框”命令，在表单中插入复选框。选中复选框，打开相应的“属性”面板。,插入表单元素,在“属性”面板上设置复选框的各项属性：在“复选框名称”文本框中，输入标识该复选框的唯一名称。在“选定值”文本框中，输入复选框被选中时发送给服务器的值。在“初始状态”单选按钮组中，指定浏览器载入表单时复选框是否处于选中状态。,插入表单元素,插入单选按钮单选按钮用于在一组选项中选择一个选项。单选按钮通常成组使用，同组中的所有单选按钮必须具有相同的名称。逐个插入单选按钮将光标置于表单中待插入单选按钮的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“单选按钮”命令，在表单中插入单选按钮。选中单选按钮，打开相应的“属性”面板。,插入表单元素,在“属性”面板上设置单选按钮的各项属性：在“单选按钮”文本框中，输入单选按钮的名称，同组单选按钮必须具有相同的名称。在“选定值”文本框中，输入单选按钮被选中时发送给服务器的值。在“初始状态”单选按钮组中，指定浏览器载入表单时单选按钮是否处于选中状态。插入单选按钮组将光标置于表单中待插入单选按钮组的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“单选按钮组”命令，打开“单选按钮组”对话框。,插入表单元素,设置“单选按钮组”对话框的各项属性：在“名称”文本框中，输入单选按钮组的名称。单击“+”或“-”按钮，在组中添加或删除单选按钮；单击“”或“”按钮，向上或向下移动组中选定的单选按钮。单击“标签”列的选项，设置单选按钮的提示信息；单击“值”列的选项，设置单选按钮被选中时发送给服务器的值。在“布局，使用：”单选按钮组中选择单选按钮组的布局方式。,插入表单元素,插入列表（列表框）/菜单（下拉列表框）列表以滚动方式显示多个选项，允许用户在其中选择一个或多个选项。菜单以下拉方式显示多个选项，只允许用户在其中选择一个选项。插入列表/菜单的步骤如下：将光标置于表单中待插入列表/菜单的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“列表/菜单”命令，在表单中插入列表/菜单。选中列表/菜单，打开相应的“属性”面板。,插入表单元素,在“属性”面板上设置列表/菜单的各项属性：在“列表/菜单”文本框中，输入标识该列表/菜单的唯一名称。单击“列表值”按钮，打开“列表值”对话框。单击“+”或“-”按钮，在列表/菜单中添加或删除选项；单击“”或“”按钮，向上或向下移动列表/菜单中选定的选项。,插入表单元素,“项目标签”和“值”列分别显示了不同选项的标签和被选中时发送给服务器的值，可单击相应的文本，在出现的方框中输入新的标签和值。选择“初始化时选定”列表框中的某项，该项将成为浏览器载入表单时列表/菜单中默认选中的选项。在“类型”单选按钮组中单击“列表”单选按钮，打开相应的“属性”面板。在“高度”文本框中输入列表中显示的选项数，如果“高度”为1，则也为下拉列表框，如果输入的数字小于列表实际包含的选项数，则出现滚动条。在“允许多选”复选框中指定是否允许用户在列表中同时选择多个选项(按下Ctrl或Shift键)。,插入表单元素,插入文件域文件域使用户可以选择本地计算机上不同类型的文件，并将该文件上传到服务器。在插入文件域之前，需要将表单的“方法”属性设置为“POST”，“MIME类型”属性设置为“multipart/form-data”，“动作”属性设置为服务器端脚本或能够处理上传文件的页面。插入文件域的步骤如下：将光标置于表单中待插入文件域的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“文件域”命令，在表单中插入文件域。,插入表单元素,选中文件域，打开相应的“属性”面板。在“属性”面板上设置文件域的各项属性：在“文件域名称”文本框中，输入标识该文件域的唯一名称。在“字符宽度”文本框中，输入文件域中最多可显示的字符数。在“最多字符数”文本框中，输入文件域中最多可容纳的字符数。如果通过“浏览”按钮来定位文件，则文件名和路径可超过“最多字符数”指定的值。,插入表单元素,插入图像域图像域用于生成图形化按钮。插入图像域的步骤如下：将光标置于表单中待插入图像域的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“图像域”命令，打开“选择图像源文件”对话框。在对话框中定位图像域的源文件，单击“确定”按钮，即可在表单中插入图像域。选中图像域，打开相应的“属性”面板。,插入表单元素,在“属性”面板上设置图像域的各项属性：在“图像区域”文本框中，输入标识该图像域的唯一名称。在“源文件”文本框中，输入图像源文件的路径和名称，或者单击文件夹图标导航到相应的源文件。在“替换”文本框中，输入描述性文本，一旦图像在浏览器中载入失败，将显示这些文本。在“对齐”下拉列表框中，设置图像域的对齐属性。单击“编辑图像”按钮，启动默认的图像编辑器并打开图像源文件以待编辑。默认情况下，单击图像域时会将表单数据发送到服务器，功能类似于提交按钮。也可以将某种行为或自定义脚本附加到图像域上，实现特定的功能。,插入表单元素,插入隐藏域隐藏域是一种在页面上不显示的表单元素，可用来存储隐私信息。插入隐藏域的步骤如下：将光标置于表单中待插入隐藏域的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“隐藏域”命令，在表单中插入隐藏域。选中隐藏域，打开相应的“属性”面板。在“属性”面板上设置隐藏域的各项属性：在“隐藏区域”文本框中，输入该隐藏域的唯一名称。在“值”文本框中，输入提交表单时发给服务器的数据。,插入表单元素,插入跳转菜单跳转菜单中的每个选项都与URL关联，当用户选择某个选项时，会重定向到关联的URL。插入跳转菜单的步骤如下：将光标置于表单中待插入跳转菜单的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“跳转菜单”命令，打开“插入跳转菜单”对话框。,插入表单元素,设置“插入跳转菜单”对话框的各项属性：单击“+”或“-”按钮，在“菜单项”列表框中添加或删除选项；单击“”或“”按钮，向上或向下移动“菜单项”列表框中选定的选项。在“文本”文本框中，输入当前选项的显示文本。如果希望菜单包含选择提示，可在此处输入提示文本并使其成为第一个选项在“选择时，转到URL”文本框中，输入与当前选项关联的URL。在“打开URL于”下拉列表框中，选择目标文件的打开位置。在“菜单ID”文本框中，输入跳转菜单的id属性值。,插入表单元素,如果没有使用选择提示，选择“菜单之后插入前往按钮”复选框，在跳转菜单旁添加一个“前往”接钮。如果使用了选择提示，选择“更改URL后选择第一个项目”复选框。单击“插入跳转菜单”对话框的“确定”按钮，添加的选项显示在“属性”面板的“初始化时选定”列表框中，选择列表框中的某项，该项将成为浏览器载入表单时跳转菜单中默认选中的选项。,插入表单元素,插入字段集字段集用于对表单元素进行分组，通过将相关联的元素分组，可以使用户更容易明白它们的用途。插入字段集的步骤如下：将光标置于表单中待插入字段集的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“字段集”命令，打开“字段集”对话框。在对话框的“标签”文本框中输入字段集的标题，单击“确定”按钮。,插入表单元素,在字段集中插入相关联的表单元素。,插入表单元素,插入标签标签用来将表单元素与其说明信息相关联，增加表单元素的可访问性。插入标签的步骤如下：将光标置于表单中待插入标签的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“标签”命令，在表单中插入标签，切换至“代码”视图，可以发现表单中增加了一对标签。在与标签对之间输入表单元素的文本说明，并在表单中插入相应的表单元素。例如：运动,插入表单元素,设置label标签的属性：for属性：指定标签要关联的表单元素，属性值设置为表单元素的id值。设置了for属性后，单击标签中的文本说明，所关联的表单元素将获得焦点。accesskey属性：指定访问标签所关联的表单元素的快捷键。设置了accesskey属性后，按下【Alt+accesskey属性值】/【Alt+Shift+accesskey属性值】组合键，所关联的表单元素将获得焦点。,插入表单元素,表单实例二则,（1）“登录”表单（2）“输入”表单注：对其文件夹loginForm用IIS建立虚拟目录login，方可正常浏览/login/login.htm。否则遇#include页面会显示“打开/保存”对话框，无法继续浏览。,Spry框架Spry框架是一个用来构建更加丰富的Web页的JavaScript和CSS库，它支持一组用标准HTML、CSS和JavaScript编写的可重用构件，其中每个构件都与唯一的CSS和JavaScript文件相关联。CSS文件包含设置构件样式所需的全部信息，而JavaScript文件则赋予构件功能。当使用Dreamweaver插入构件时，Dreamweaver会自动将这些文件链接到当前页面，并且在站点的SpryAssets文件夹中保存相应的JavaScript和CSS文件。,验证HTML表单,Spry构件的基本操作包括：插入Spry构件：选择“插入”|“Spry”命令，在弹出的子菜单中选择相应的构件命令，Dreamweaver会在保存页面时自动在站点的SpryAssets文件夹中包括所需的JavaScript和CSS文件。选择Spry构件：首先将光标停留在构件上，直到出现构件的蓝色选项卡式轮廓；然后单击构件左上角的选项卡标签。编辑Spry构件：选择要编辑的构件，在“属性”面板中进行属性设置。设置Spry构件样式：找到与构件相对应的CSS文件，根据实际需求进行编辑。也可以通过“CSS样式”面板设置Spry构件的样式。,验证HTML表单,更改默认的Spry资源文件夹：首先选择“站点”|“管理站点”命令，在“管理站点”对话框中选择相应站点并单击“编辑”按钮；在“站点定义”对话框中选择“高级”选项卡；在“分类”列表框中选择“Spry”选项，在“Spry资源文件夹”文本框中输入目标文件夹的路径，或单击文件夹图标浏览到指定位置。,验证HTML表单,使用验证文本域Spry验证文本域构件用于在访问者输入文本时显示文本的状态(有效或无效)。插入验证文本域的步骤如下：将光标置于表单中待插入验证文本域的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“Spry验证文本域”命令，在表单中插入验证文本域。,验证HTML表单,选中验证文本域，打开相应的“属性”面板。在“属性”面板上设置验证文本域的各项属性：在“Spry文本域”文本框中，输入标识该验证文本域的唯一名称。在“类型”和“格式”下拉列表框中，指定验证类型及格式，参考教材P224的表8-1。,验证HTML表单,在“验证于”单选按钮组中，指定验证发生的时间。onBlur：当用户在文本域的外部单击时验证。onChange：当用户更改文本域中的文本时验证。onSubmit：当用户提交表单时验证。当验证类型为“无”、“整数”、“电子邮件地址”和“URL”时，可在“最小字符数”和“最大字符数”文本框中输入数值，指定文本域中允许输入的最小和最大字符数。当验证类型为“整数”、“时间”、“货币”和“实数/科学记数法”时，可在“最小值”和“最大值”文本框中输入数值，指定文本域中允许输入的最小和最大值。,验证HTML表单,在“预览状态”下拉列表框中，选择要查看的状态。验证文本域构件具有多种状态，参考教材P225的表8-2。在“提示”文本框中，输入文本域的格式提示信息，当浏览器载入页面时，这些提示信息将显示在文本域中。选中“必需的”复选框，表示验证文本域中必须包含输入内容。选中“强制模式”复选框，可以禁止用户在验证文本域中输入无效字符。,验证HTML表单,使用验证文本区域Spry(敏捷)验证文本区域用于在访问者输入多行文本时显示文本的状态(有效或无效)。插入验证文本区域的步骤如下：将光标置于表单中待插入验证文本区域的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“Spry验证文本区域”命令，在表单中插入验证文本区域。,验证HTML表单,选中验证文本区域，打开相应的“属性”面板。在“属性”面板上设置验证文本区域的各项属性：在“Spry文本区域”文本框中，输入标识该验证文本区域的唯一名称。在“计数器”单选按钮组中，选择是否添加字符计数器。选中“禁止额外字符”复选框，防止用户在验证文本区域中输入的文本超过所允许的最大字符数。其余各项属性的含义和功能与验证文本域的相关属性类似。,验证HTML表单,使用验证复选框Spry验证复选框构件包含一个或一组复选框，根据用户的选择显示无效或有效状态。插入验证复选框构件的步骤如下：将光标置于表单中待插入验证复选框构件的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“Spry验证复选框”命令，在表单中插入验证复选框构件。如果希望验证复选框构件包含一组复选框，可将插入点放置在蓝色选项卡式轮廓内、已插入复选框的右侧，然后选择“插入记录”|“表单”命令，在弹出的子菜单中选择“复选框”命令，在验证复选框构件中放置多个复选框。,验证HTML表单,选中验证复选框构件，打开相应的“属性”面板。在“属性”面板上设置验证复选框构件的各项属性：在“Spry复选框”文本框中，输入标识该验证复选框构件的唯一名称。如果验证复选框构件仅包含单个复选框，可选中“必需(单个)”单选按钮，表示复选框必须被选中。如果验证复选框构件包含一组复选框，可选中“强制范围(多个复选框)”单选按钮，然后在“最小选择数”文本框中输入希望用户选中的最小复选框数，在“最大选择数”文本框中输入希望用户选中的最大复选框数。,验证HTML表单,在“实施范围(多个)”下拉列表框中，选择要查看的状态。如果验证复选框构件仅包含单个复选框，则可查看的状态为“初始”和“必填”；如果验证复选框构件包含一组复选框，并设置了最小选择数和最大选择数，则可查看的状态为“初始”、“未达到最小选择数”和“已超过最大选择数”。在“验证于”单选按钮组中，指定验证发生的时间。onBlur：当用户在验证复选框构件的外部单击时验证。onChange：当用户进行选择时验证。onSubmit：当用户提交表单时验证。,验证HTML表单,使用验证选择Spry验证选择构件是一个下拉菜单，在用户进行选择时显示有效或无效状态。插入验证复选框构件的步骤如下：将光标置于表单中待插入验证选择构件的位置，选择“插入记录”|“表单”命令，在弹出的子菜单中选择“Spry验证选择”命令，在表单中插入验证选择构件。选中验证选择构件，打开相应的“属性”面板。,验证HTML表单,在“属性”面板上设置验证选择构件的各项属性：在“Spry选择”文本框中，输入标识该验证选择构件的唯一名称。在“不允许”复选框组中，指定是否允许选择空值选项或无效值选项。空值：选中此复选框表示禁止在验证选择构件中选择空值选项。无效值：选中此复选框后，可在其后的文本框中输入具体的无效数值，当用户选择具有该无效值的选项时，构件将返回错误提示消息。在“预览状态”下拉列表框中，选择要查看的状态。在“验证于”单选按钮组中，指定验证发生的时间。,验证HTML表单,可以将自定义的脚本代码附加到表单或表单元素上，以便产