《网页设计技术与应用：第12章表单》由会员分享，可在线阅读，更多相关《网页设计技术与应用：第12章表单（51页珍藏版）》请在金锄头文库上搜索。
1、第第1212章章 表单表单12.112.1表单页面制作表单页面制作12.2 12.2 表单概述表单概述12.312.3添加表单对象添加表单对象12.4 12.4 SprySpry验证表单验证表单12.1.1 12.1.1 案例综述案例综述表单是一个专业网站必不可少的内容，也是一个网表单是一个专业网站必不可少的内容，也是一个网站是否具有站是否具有交互功能交互功能的重要体现。的重要体现。 12.112.1表单页面制作注册表单页面制作注册 12.1.2 12.1.2 案例分析案例分析通常在表单页面中有多个表单对象，在制作时先插通常在表单页面中有多个表单对象，在制作时先插入一个表单，做为这些对象的容器
2、，然后再逐个地入一个表单，做为这些对象的容器，然后再逐个地创建这些表单对象，如文本域、密码域、单选按钮、创建这些表单对象，如文本域、密码域、单选按钮、复选框、下拉列表、按钮、图像域等。复选框、下拉列表、按钮、图像域等。表单对象在表单内的定位，我们则采用表格工具进表单对象在表单内的定位，我们则采用表格工具进行布局。行布局。 12.1表单页面制作注册表单页面制作注册 12.1.3 12.1.3 实现步骤实现步骤1.1.创建表单创建表单 2.2.表格进行布局表格进行布局 3.3.插入表单对象插入表单对象12.112.1表单页面制作注册表单页面制作注册 12.2.1 12.2.1 什么是表单什么是表单
3、 表单主要是为了实现浏览网页的用户同表单主要是为了实现浏览网页的用户同InternetInternet服务器之间的服务器之间的交互交互，一般来说，表单中包含多种对，一般来说，表单中包含多种对象，例如文本框、复选框、单选按钮、列表框等。象，例如文本框、复选框、单选按钮、列表框等。12.2.2 12.2.2 如何创建表单如何创建表单 选择选择【插入插入】【表单表单】命令从中选择所需的表命令从中选择所需的表单对象。单对象。12.2 12.2 表单概述表单概述12.2.2 12.2.2 如何创建表单如何创建表单 选择选择【插入插入】【表单表单】命令从中选择所需的表命令从中选择所需的表单对象。单对象。n
4、在【插入】栏单击【表单】分类在【插入】栏单击【表单】分类, ,单击对应的单击对应的图标按钮，就可以在页面中插入表单对象图标按钮，就可以在页面中插入表单对象 12.2 12.2 表单概述表单概述12.2.3 12.2.3 插入表单插入表单1.1.选择主菜单【插入】【表单】【表单】命令，选择主菜单【插入】【表单】【表单】命令，或选择【插入】栏中或选择【插入】栏中“表单表单”类别，单击【表单】类别，单击【表单】按钮，在页面中插入表单。按钮，在页面中插入表单。 2.2.插入表单后，在文档窗口中出现红色虚框线，插入表单后，在文档窗口中出现红色虚框线，DreamweaverDreamweaver会自动生成
5、会自动生成 form标签。标签。注注: :如果没有插入空白表单，就直接在文档中插入表单对象，则如果没有插入空白表单，就直接在文档中插入表单对象，则DreamweaverDreamweaver会出现一个提示框，提示是否需要为插入表单对象会出现一个提示框，提示是否需要为插入表单对象添加表单标签添加表单标签 。 12.2 12.2 表单概述表单概述 12.2.4 12.2.4 设置表单属性设置表单属性 在属性检查器中设置表单的各项属性在属性检查器中设置表单的各项属性 。n【表单名称】在该域中输入表单的名称。【表单名称】在该域中输入表单的名称。n【动作】在该域中指定处理表单信息的脚本或【动作】在该域中
6、指定处理表单信息的脚本或应用程序。单击浏览按钮，查找并选择脚本或应用应用程序。单击浏览按钮，查找并选择脚本或应用程序，或直接输入脚本或应用程序的程序，或直接输入脚本或应用程序的URLURL。12.2 12.2 表单概述表单概述12.2.412.2.4设置表单属性设置表单属性 n【方方法法】在在该该下下拉拉列列表表中中选选择择处处理理表表单单数数据的方式。据的方式。nPOSTPOST此此方方式式将将表表单单值值封封装装在在消消息息主主体体中中发送。发送。nGETGET此此方方式式将将提提交交的的表表单单值值追追加加在在URLURL后后面发送给服务器。面发送给服务器。n默默认认选选择择浏浏览览器器
7、的的默默认认方方式式，通通常常是是GETGET方式。方式。 注意：注意： 在在表表单单数数据据的的传传送送方方式式中中，大大的的数数据据以以及及一一些秘密信息不宜采用些秘密信息不宜采用GETGET方式传送。方式传送。12.2 12.2 表单概述表单概述12.3 12.3 添加表单对象添加表单对象添加表单对象添加表单对象 定位光标定位光标在在“插入插入”栏的栏的“表单表单”类别中选类别中选择对象择对象插入表单对象。插入表单对象。定位表单对象定位表单对象 可以使用换行符、段落标记、表格等来设置表可以使用换行符、段落标记、表格等来设置表单的格式。单的格式。 12.3 12.3 添加表单对象添加表单对
8、象12.3.1 12.3.1 添加文本域添加文本域12.3.2 12.3.2 添加隐藏域添加隐藏域12.3.3 12.3.3 添加复选框添加复选框12.3.4 12.3.4 添加单选按钮添加单选按钮12.3.5 12.3.5 添加列表添加列表/ /菜单菜单12.3.6 12.3.6 添加按钮添加按钮12.3.7 12.3.7 添加图像域添加图像域12.3.8 12.3.8 添加文件域添加文件域12.3.9 12.3.9 创建跳转菜单创建跳转菜单12.3 12.3 添加表单对象添加表单对象 12.3.1 12.3.1 添加文本域添加文本域文本域有三种类型：单行文本域、多行文本域、文本域有三种类型
9、：单行文本域、多行文本域、密码域。密码域。 12.3 12.3 添加表单对象添加表单对象 12.3.1 12.3.1 添加文本域添加文本域1.1.插入文本域插入文本域插入文本域的基本操作步骤如下插入文本域的基本操作步骤如下：将文本光标定位于表单轮廓内。将文本光标定位于表单轮廓内。输入标签文字输入标签文字“账号账号”。选择插入表单文本域命令，选择插入表单文本域命令，在在“输入标签辅助功能属性输入标签辅助功能属性”对话框设对话框设置各参数，单击置各参数，单击【确定确定】按钮按钮 。12.3 12.3 添加表单对象添加表单对象 12.3.1 12.3.1 添加文本域添加文本域2.2.设置文本域属性设
10、置文本域属性在文本域属性面板中可以进行如下设置。在文本域属性面板中可以进行如下设置。n“文本域文本域”输入文本域的名称，即变量名，以便在后输入文本域的名称，即变量名，以便在后台处理程序中提取或传送其中的信息。台处理程序中提取或传送其中的信息。n“字符宽度字符宽度”设置最多可显示的字符数。此数字决定设置最多可显示的字符数。此数字决定了文本域的宽度。了文本域的宽度。n“最多字符数最多字符数”设置单行文本域中最多可输入的字符设置单行文本域中最多可输入的字符数。数。 n“类型类型”指定域的类型为单行、多行还是密码域指定域的类型为单行、多行还是密码域. .n“初始值初始值”指定在首次载入表单时域中显示的
11、值。指定在首次载入表单时域中显示的值。n“类类”主要作用是将主要作用是将CSSCSS规则应用于对象。规则应用于对象。12.3 12.3 添加表单对象添加表单对象12.3.212.3.2添加隐藏域添加隐藏域隐藏域是放置在文档中收集或发送信息的不可隐藏域是放置在文档中收集或发送信息的不可见元素。见元素。1.1.插入隐藏域插入隐藏域插入隐藏域的基本操作如下：插入隐藏域的基本操作如下：在在“设计设计”视图中，将文本光标定位于表单轮廓视图中，将文本光标定位于表单轮廓内。内。 选择插入表单隐藏域命令。选择插入表单隐藏域命令。12.3 12.3 添加表单对象添加表单对象12.3.212.3.2添加隐藏域添加
12、隐藏域2.2.设置隐藏域属性设置隐藏域属性隐藏域属性设置如下：隐藏域属性设置如下：n“隐藏区域隐藏区域”为该域指定一个唯一的名称。为该域指定一个唯一的名称。n“值值”在该文本框中输入为该域指定的值。在该文本框中输入为该域指定的值。12.3 12.3 添加表单对象添加表单对象12.3.312.3.3添加复选框添加复选框复选框可以使用户在多个选项中进行多重选择。复选框可以使用户在多个选项中进行多重选择。1.1.插入复选框插入复选框插入复选框的操作方法如下：插入复选框的操作方法如下：1.1.光标置于表单中。光标置于表单中。2.2.选择插入表单复选框命令选择插入表单复选框命令12.3 12.3 添加表
13、单对象添加表单对象12.3.312.3.3添加复选框添加复选框2.2.设置复选框属性设置复选框属性: :n“复选框名称复选框名称”在该域中指定复选框对在该域中指定复选框对象的名称。象的名称。n“选定值选定值”在该域中输入当选择该复选在该域中输入当选择该复选框时要传送给服务器的值。框时要传送给服务器的值。n“初始状态初始状态”在该域中确定在浏览器中在该域中确定在浏览器中载入表单时，该复选框是否被选中。载入表单时，该复选框是否被选中。12.3 12.3 添加表单对象添加表单对象12.3.412.3.4添加单选按钮添加单选按钮使用单选按钮，用户只能从一组选项中选择一个选使用单选按钮，用户只能从一组选
14、项中选择一个选项。项。1.1.插入单选按钮插入单选按钮插入单选按钮的操作方法如下：插入单选按钮的操作方法如下：光标置于表单中。光标置于表单中。选择插入表单单选按钮命令。选择插入表单单选按钮命令。 12.3 12.3 添加表单对象添加表单对象12.3.412.3.4添加单选按钮添加单选按钮设置单选按钮设置单选按钮的属性的属性n“单选按钮单选按钮”在该域中为该对象指定一个名称。对于在该域中为该对象指定一个名称。对于单选按钮组，如果希望这些选项为互斥选项，必须共用同单选按钮组，如果希望这些选项为互斥选项，必须共用同一个名称。此名称不能包含空格或特殊字符。一个名称。此名称不能包含空格或特殊字符。n“选
15、定值选定值”在该域中输入当选择该单选按钮时要传送在该域中输入当选择该单选按钮时要传送给服务器的值。给服务器的值。n“初始状态初始状态”在该域中指定在浏览器中载入表单时，在该域中指定在浏览器中载入表单时，该单选按钮是否被选中。该单选按钮是否被选中。12.3 12.3 添加表单对象添加表单对象12.3.512.3.5添加单选按钮组添加单选按钮组/复选框组复选框组插入单选按钮组插入单选按钮组/ /复选框组的操作步骤如下：复选框组的操作步骤如下：将光标置于表单中。将光标置于表单中。选择选择“插入插入”“表单表单”“单选按钮组单选按钮组”（或复选（或复选框组）命令，或单击框组）命令，或单击“插入插入”面
16、板的面板的“表单表单”类别中类别中的单选按钮组按钮（或复选框组按钮），或将该按钮的单选按钮组按钮（或复选框组按钮），或将该按钮拖放到文档编辑窗口中。拖放到文档编辑窗口中。在弹出的在弹出的“单选按钮组单选按钮组” 对话框中。完成对话框设置。对话框中。完成对话框设置。单击单击“确定确定”按钮后，完成插入单选按钮组按钮后，完成插入单选按钮组 12.3 12.3 添加表单对象添加表单对象12.3.512.3.5添加单选按钮组添加单选按钮组/复选框组复选框组“单选按钮组单选按钮组” 对话框设置如下对话框设置如下: :n“名称名称”输入单选按钮组的名称。输入单选按钮组的名称。 n“加号加号 (+)(+)”
17、 按钮按钮/ /“减号（减号（- -）”向该组添加一个单选按钮向该组添加一个单选按钮（或（或“复选框复选框”）。为新按钮输入标签和选定值。）。为新按钮输入标签和选定值。 n“向上向上”或或“向下向下”箭头重新排序这些按钮。箭头重新排序这些按钮。 n “选取值等于选取值等于”输入一个等于该单选按钮值的值。输入一个等于该单选按钮值的值。 n“布局格式布局格式”可以使用换行符或表格来设置这些按钮的布局。可以使用换行符或表格来设置这些按钮的布局。 12.3 12.3 添加表单对象添加表单对象12.3.612.3.6添加列表添加列表/ /菜单菜单用户可以在滚动列表中选择多个选项，在下拉菜单用户可以在滚动
18、列表中选择多个选项，在下拉菜单中只能选择一个选项。中只能选择一个选项。1.1.插入列表插入列表/ /菜单菜单插入列表插入列表/ /菜单的操作方法如下：菜单的操作方法如下：光标置于表单中。光标置于表单中。选择插入表单列表选择插入表单列表/ /菜单命令。菜单命令。 12.3 12.3 添加表单对象添加表单对象12.3.612.3.6添加列表添加列表/ /菜单菜单2.2.设置列表设置列表/ /菜单属性菜单属性n“菜单菜单”：表单在浏览器中显示时仅有一个选：表单在浏览器中显示时仅有一个选项可见。若要显示其他选项，必须单击向下箭项可见。若要显示其他选项，必须单击向下箭头。头。n“列表列表”：表单在浏览器
19、中显示时列出部分或：表单在浏览器中显示时列出部分或全部选项，或允许选择多个菜单项。全部选项，或允许选择多个菜单项。n“高度高度”当选择了当选择了“列表列表”类型时该项才可类型时该项才可使用，用于设置列表中可显示的选项数，当使用，用于设置列表中可显示的选项数，当“列表列表”框中的选项超过其高度时，会显示一个框中的选项超过其高度时，会显示一个列有项目的可滚动列表。列有项目的可滚动列表。 12.3 12.3 添加表单对象添加表单对象12.3.612.3.6添加列表添加列表/ /菜单菜单2.2.设置列表设置列表/ /菜单属性菜单属性n“初始化时选定初始化时选定”确定在浏览器中载入表单确定在浏览器中载入
20、表单时，该选项是否出现在列表框中的行首。时，该选项是否出现在列表框中的行首。 n“选定范围选定范围”用于指定是否允许从列表中多用于指定是否允许从列表中多选（在选择了选（在选择了“列表列表”类型时可用）。类型时可用）。n“列表值列表值”单击单击“列表值列表值”按钮，打开按钮，打开“列列表值表值”对话框，设置列表的项目标签及其相应对话框，设置列表的项目标签及其相应的值的值. 12.3 12.3 添加表单对象添加表单对象12.3.712.3.7添加按钮添加按钮标准表单按钮通常有标准表单按钮通常有“提交提交”、“重置重置”、“普通普通”三种类型。三种类型。 1.1.插入按钮插入按钮插入按钮的操作方法如
21、下：插入按钮的操作方法如下：光标置于表单中。光标置于表单中。选择插入表单按钮命令。选择插入表单按钮命令。12.3 12.3 添加表单对象添加表单对象12.3.712.3.7添加按钮添加按钮2.2.设置按钮属性设置按钮属性n“按钮名称按钮名称”在该域中指定按钮名称。在该域中指定按钮名称。n“值值”在该域中输入在按钮上出现的标签文在该域中输入在按钮上出现的标签文本。本。n“动作动作”在该域中可设置三种不同类型的按在该域中可设置三种不同类型的按钮钮12.3 12.3 添加表单对象添加表单对象12.3.712.3.7添加按钮添加按钮2.2.设置按钮属性设置按钮属性n“提交表单提交表单”：按钮的标签文本
22、变为按钮的标签文本变为“提交提交”，当单击，当单击该按钮时将提交表单数据进行处理，该数据将被提交该按钮时将提交表单数据进行处理，该数据将被提交到表单的到表单的“操作操作”属性中指定的页面或脚本中。属性中指定的页面或脚本中。n“重设表单重设表单”：按钮的标签文本变为按钮的标签文本变为“重设重设”，重设，重设表单的作用是当单击该按钮时将清除该表单的内容。表单的作用是当单击该按钮时将清除该表单的内容。n“无无”：选择该项时，该按钮的标签文本变为选择该项时，该按钮的标签文本变为“按钮按钮”，这种普通按钮的作用在于可以自己指定单击该按，这种普通按钮的作用在于可以自己指定单击该按钮时要执行的操作，这些操作
23、可以通过添加行为等方钮时要执行的操作，这些操作可以通过添加行为等方式进行设置。式进行设置。12.3 12.3 添加表单对象添加表单对象12.3.8 12.3.8 添加图像域添加图像域“插入图像域插入图像域”可以创建漂亮的图像按钮来替代普通可以创建漂亮的图像按钮来替代普通的按钮。的按钮。1.1.插入图像域插入图像域插入图像域的操作方法如下：插入图像域的操作方法如下：光标置于表单中光标置于表单中. .选择插入表单图像域命令选择插入表单图像域命令. . 在在“选择图像源文件选择图像源文件”对话框中为该按钮选择图对话框中为该按钮选择图像像. .在弹出的在弹出的“输入标签辅助功能属性输入标签辅助功能属性
24、”对话框中设对话框中设置相应选项置相应选项. . 12.3 12.3 添加表单对象添加表单对象12.3.8 12.3.8 添加图像域添加图像域2.2.设置图像域属性设置图像域属性n“图像区域图像区域”在该域中指定图像域名称。在该域中指定图像域名称。n“源文件源文件”在该域中指定该按钮使用的图像。在该域中指定该按钮使用的图像。n“替换替换”用于输入描述性文本，一旦图像在浏览器中用于输入描述性文本，一旦图像在浏览器中载入失败，将显示这些文本。载入失败，将显示这些文本。n“对齐对齐”设置图像在文档中的对齐方式。设置图像在文档中的对齐方式。n“编辑图像编辑图像”单击该按钮可以启动外部编辑器编辑图单击该
25、按钮可以启动外部编辑器编辑图像。像。12.3 12.3 添加表单对象添加表单对象12.3.9 12.3.9 添加文件域添加文件域文件域由一个文本框和按钮组成，单击按钮浏览磁文件域由一个文本框和按钮组成，单击按钮浏览磁盘文件，在文本框中显示打开文件的路径。盘文件，在文本框中显示打开文件的路径。1.1.插入文件域插入文件域插入文件域的操作方法如下：插入文件域的操作方法如下：光标置于表单中光标置于表单中. .选择插入表单文件域命令选择插入表单文件域命令. . 在弹出的在弹出的“输入标签辅助功能属性输入标签辅助功能属性”对话框中对话框中设置相应选项设置相应选项. . 12.3 12.3 添加表单对象添
26、加表单对象12.3.9 12.3.9 添加文件域添加文件域2.2.设置文件域属性设置文件域属性n“文件域名称文件域名称”在该域中指定文件域的名称。在该域中指定文件域的名称。n“字符宽度字符宽度”在该域中指定希望最多可显示的字符数。在该域中指定希望最多可显示的字符数。n“最多字符数最多字符数”指定域中最多可容纳的字符数。如果指定域中最多可容纳的字符数。如果通过通过“浏览浏览”按钮来定位文件，则显示出文件名和路径的按钮来定位文件，则显示出文件名和路径的字符可超过指定的字符可超过指定的“最多字符数最多字符数”的值，但是，如果尝试的值，但是，如果尝试输入文件名和路径，则文件域中只允许输入输入文件名和路
27、径，则文件域中只允许输入“最多字符数最多字符数”值所指定的字符数。值所指定的字符数。12.3 12.3 添加表单对象添加表单对象12.3.10 12.3.10 创建跳转菜单创建跳转菜单跳转菜单可建立跳转菜单可建立URLURL与弹出式菜单列表中的选项之间的关与弹出式菜单列表中的选项之间的关联。联。 1.1.插入跳转菜单插入跳转菜单插入跳转菜单的操作方法如下：插入跳转菜单的操作方法如下：光标置于表单中光标置于表单中. .选择插入表单跳转菜单命令选择插入表单跳转菜单命令. . 在弹出的在弹出的“插入跳转菜单插入跳转菜单 ” ”对话框中设置相应选项对话框中设置相应选项. . 2.2.设置跳转菜单属性设
28、置跳转菜单属性. . 其设置方式与列表其设置方式与列表/ /菜单域的设置相似。菜单域的设置相似。 12.4 Spry12.4 Spry验证表单验证表单12.4.1 Spry12.4.1 Spry验证文本域验证文本域SprySpry验证表单在创建表单元素的同时又丰富了表验证表单在创建表单元素的同时又丰富了表单验证功能。单验证功能。SprySpry验证文本域是一个文本域，该域用于在网站验证文本域是一个文本域，该域用于在网站中输入文本时显示文本的状态，如有效或无效。中输入文本时显示文本的状态，如有效或无效。 12.4 Spry12.4 Spry验证表单验证表单12.4.1 Spry12.4.1 Sp
29、ry验证文本域验证文本域1.插入插入Spry验证文本域构件验证文本域构件 将光标定位在需要插入验证文本域的位置。将光标定位在需要插入验证文本域的位置。 选择菜单栏选择菜单栏“插入插入”| |“SprySpry”| |“SprySpry验证文本域验证文本域”，或在，或在“插入插入”面板的面板的“SprySpry”类别中单击类别中单击“SprySpry验证验证文本域文本域”按钮。按钮。 完成完成“输入标签辅助功能属性输入标签辅助功能属性”对话框，单击对话框，单击“确定确定”按钮。按钮。 若插入验证文本域的位置不在表单中，则会弹出信息若插入验证文本域的位置不在表单中，则会弹出信息提示框提示提示框提示
30、“是否添加表单标签是否添加表单标签” 12.4 Spry12.4 Spry验证表单验证表单12.4.1 Spry12.4.1 Spry验证文本域验证文本域2.设置验证文本域的属性设置验证文本域的属性类型类型：可以为验证文本域构件指定不同的验证类型。：可以为验证文本域构件指定不同的验证类型。格式格式：在：在“类型类型”菜单中选择一个验证类型。如果适用的菜单中选择一个验证类型。如果适用的话，可从话，可从“格式格式”弹出菜单中选择一种格式。弹出菜单中选择一种格式。预览状态预览状态：选择要查看的状态。：选择要查看的状态。12.4 Spry12.4 Spry验证表单验证表单12.4.1 Spry12.4
31、.1 Spry验证文本域验证文本域2.设置验证文本域的属性设置验证文本域的属性验证于验证于：可以设置验证发生的时间，包括站点访问者在构：可以设置验证发生的时间，包括站点访问者在构件外部单击时、键入内容时或尝试提交表单时。件外部单击时、键入内容时或尝试提交表单时。图案图案：当类型为自定义时，可定义此项。：当类型为自定义时，可定义此项。提示提示：由于文本域有很多不同格式，因此，提示用户需要：由于文本域有很多不同格式，因此，提示用户需要输入哪种格式会比较有帮助。输入哪种格式会比较有帮助。 12.4 Spry12.4 Spry验证表单验证表单12.4.1 Spry12.4.1 Spry验证文本域验证文
32、本域2.设置验证文本域的属性设置验证文本域的属性最小字符数（或最大字符数）：最小字符数（或最大字符数）：在在“最小字符数最小字符数”或或“最大字符最大字符数数”框中输入一个数字。框中输入一个数字。最小值（或最大值）：最小值（或最大值）：在在“属性属性”面板中的面板中的“最小值最小值”或或“最大最大值值”框中输入一个数字。框中输入一个数字。必需的必需的：在：在“属性属性”面板中，根据自己的喜好选择或取消选择面板中，根据自己的喜好选择或取消选择“必需必需”选项。选项。强制模式强制模式：可以禁止用户在验证文本域构件中输入无效字符。：可以禁止用户在验证文本域构件中输入无效字符。12.4 Spry12.
33、4 Spry验证表单验证表单12.4.2 12.4.2 Spry验证文本区域验证文本区域 1.插入插入Spry验证文本区域验证文本区域 将光标定位在需要插入验证文本域的位置。将光标定位在需要插入验证文本域的位置。 选择菜单栏选择菜单栏“插入插入”| |“SprySpry”| |“SprySpry验证文本区域验证文本区域”，或在或在“插入插入”面板的面板的“SprySpry”类别中单击类别中单击“SprySpry验证文本验证文本区域区域”按钮。按钮。12.4 Spry12.4 Spry验证表单验证表单12.4.2 12.4.2 Spry验证文本区域验证文本区域 2.2.设置验证文本区域构件的属性
34、设置验证文本区域构件的属性预览状态预览状态：选择要查看的状态。：选择要查看的状态。验证于验证于：可以设置验证发生的时间，包括站点访问者在构：可以设置验证发生的时间，包括站点访问者在构件外部单击时、键入内容时或尝试提交表单时。件外部单击时、键入内容时或尝试提交表单时。最小字符数（或最大字符数）：最小字符数（或最大字符数）：在在“属性属性”面板中的面板中的“最最小字符数小字符数”或或“最大字符数最大字符数”框中输入一个数字。框中输入一个数字。计数器计数器：可以添加字符计数器，以便当用户在文本区域中：可以添加字符计数器，以便当用户在文本区域中输入文本时知道自己已经输入了多少字符或者还剩多少字输入文本
35、时知道自己已经输入了多少字符或者还剩多少字符。符。提示提示：可以向文本区域中添加提示，以便让用户知道他们：可以向文本区域中添加提示，以便让用户知道他们应当在文本区域中输入哪种信息。应当在文本区域中输入哪种信息。 12.4 Spry12.4 Spry验证表单验证表单12.4.3 12.4.3 Spry验证复选框验证复选框 Spry 验验证证复复选选框框构构件件是是 HTML 表表单单中中的的一一个个或或一一组组复复选选框框，该该复复选选框框在在用用户户选选择择（或或没没有有选选择择）复复选选框框时会显示构件的状态（有效或无效）。时会显示构件的状态（有效或无效）。 1.插入插入Spry验证复选框验
36、证复选框 将光标定位在需要插入验证选择的位置。将光标定位在需要插入验证选择的位置。 选择菜单栏选择菜单栏“插入插入”| |“SprySpry”| |“SprySpry验证复选框验证复选框 ”，或在，或在“插入插入”面板的面板的“SprySpry”类别中单击类别中单击“SprySpry验证复选框验证复选框 ”按按钮。钮。 完成完成“输入标签辅助功能属性输入标签辅助功能属性”对话框，单击对话框，单击“确定确定”按钮。按钮。12.4 Spry12.4 Spry验证表单验证表单12.4.3 12.4.3 Spry验证复选框验证复选框 2.设置验证复选框的属性设置验证复选框的属性 n必需必需：指定该验证
37、复选框为必选项。：指定该验证复选框为必选项。n强制范围强制范围：默认情况下，验证复选框构件设置为：默认情况下，验证复选框构件设置为“必需必需”。但。但是，如果在页面上插入了许多复选框，则可以指定选择范围。是，如果在页面上插入了许多复选框，则可以指定选择范围。n最小选择数（最大选择数）：最小选择数（最大选择数）：在选择在选择“强制范围强制范围”后，则可输后，则可输入浏览网页时可以选择的复选框个数。实施范围：选择验证复入浏览网页时可以选择的复选框个数。实施范围：选择验证复选框构件的状态。选框构件的状态。n“实施范围实施范围”:选择验证复选框构件的状态。选择验证复选框构件的状态。n验证于验证于：可以
38、设置验证发生的时间，包括站点访问者在构件外：可以设置验证发生的时间，包括站点访问者在构件外部单击时、键入内容时或尝试提交表单时。部单击时、键入内容时或尝试提交表单时。12.4 Spry12.4 Spry验证表单验证表单12.4.4 12.4.4 Spry验证选验证选择择 Spry验验证证选选择择是是一一个个下下拉拉列列表表，该该列列表表在在用用户户进进行选择时会显示构件的状态，如有效或无效。行选择时会显示构件的状态，如有效或无效。 1.插入插入Spry验证选择验证选择 将光标定位在需要插入验证选择的位置。将光标定位在需要插入验证选择的位置。 选择菜单栏选择菜单栏“插入插入”| |“SprySp
39、ry”| |“SprySpry验证选择验证选择”，或在或在“插入插入”面板的面板的“SprySpry”类别中单击类别中单击“SprySpry验证选验证选择择”按钮。按钮。 完成完成“输入标签辅助功能属性输入标签辅助功能属性”对话框，单击对话框，单击“确定确定”按钮。按钮。12.4 Spry12.4 Spry验证表单验证表单12.4.4 12.4.4 Spry验证选择验证选择 2.设置验证选择构件的属性设置验证选择构件的属性 n预览状态预览状态：选择要查看的状态：选择要查看的状态n验证于验证于：可以设置验证发生的时间，包括站点访问者在：可以设置验证发生的时间，包括站点访问者在构件外部单击时、键入
40、内容时或尝试提交表单时。构件外部单击时、键入内容时或尝试提交表单时。n不允许不允许：n空值：空值：n无效值：无效值： 12.4 Spry12.4 Spry验证表单验证表单12.4.5 12.4.5 Spry验证密码验证密码 Spry 验验证证密密码码构构件件是是一一个个密密码码文文本本域域，可可用用于于强强制制执执行行密密码码规规则则（例例如如，字字符符的的数数目目和和类类型型）。该该构构件件根根据据用用户户的的输入提供警告或错误消息。输入提供警告或错误消息。1.插入插入Spry验证密码验证密码 将光标定位在需要插入验证选择的位置。将光标定位在需要插入验证选择的位置。 选择菜单栏选择菜单栏“插
41、入插入”| |“SprySpry”| |“SprySpry验证密码验证密码”，或在，或在“插入插入”面板的面板的“SprySpry”类别中单击类别中单击“SprySpry验证密码验证密码”按钮。按钮。 完成完成“输入标签辅助功能属性输入标签辅助功能属性”对话框，单击对话框，单击“确定确定”按钮。按钮。12.4 Spry12.4 Spry验证表单验证表单12.4.5 12.4.5 Spry验证密码验证密码 2.设置验证密码属性设置验证密码属性 n“预览状态预览状态”选择要查看的状态选择要查看的状态n“验证时间验证时间”可以设置验证发生的时间，包括站点访问者可以设置验证发生的时间，包括站点访问者在
42、构件外部单击时、键入内容时或尝试提交表单时。在构件外部单击时、键入内容时或尝试提交表单时。n“必填必填”根据自己的喜好选择或取消选择根据自己的喜好选择或取消选择“必需必需”选项。选项。n“最小最小/ /最大字符数最大字符数”指定有效的密码所需的最小和最大指定有效的密码所需的最小和最大字符数。字符数。 n“最小最小/ /最大字母数最大字母数”指定有效的密码所需的最小和最大指定有效的密码所需的最小和最大字母（字母（a a、b b、c c 等）数。等）数。 n“最小最小/ /最大数字数最大数字数”指定有效的密码所需的最小和最大指定有效的密码所需的最小和最大数字（数字（1 1、2 2、3 3 等）数。
43、等）数。 n“最小最小/ /最大大写字母数最大大写字母数”指定有效的密码所需的最小和指定有效的密码所需的最小和最大大写字母（最大大写字母（A A、B B、C C 等）数。等）数。 n“最小最小/ /最大特殊字符数最大特殊字符数”指定有效的密码所需的最小和指定有效的密码所需的最小和最大特殊字符（最大特殊字符（! !、 、# # 等）数。等）数。12.4 Spry12.4 Spry验证表单验证表单12.4.6 12.4.6 Spry验证确认验证确认 验验证证确确认认构构件件是是一一个个文文本本域域或或密密码码表表单单域域，当当用用户户输输入入的的值值与与同同一一表表单单中中类类似似域域的的值值不不
44、匹匹配配时时，该该构构件件将将显显示示有有效效或无效状态。或无效状态。 1.插入插入Spry验证确认验证确认 将光标定位在需要插入验证选择的位置。将光标定位在需要插入验证选择的位置。 选择菜单栏选择菜单栏“插入插入”| |“SprySpry”| |“SprySpry验证确认验证确认”，或在，或在“插入插入”面板的面板的“SprySpry”类别中单击类别中单击“SprySpry验证确认验证确认”按钮。按钮。 完成完成“输入标签辅助功能属性输入标签辅助功能属性”对话框，单击对话框，单击“确定确定”按钮。按钮。12.4 Spry12.4 Spry验证表单验证表单12.4.6 12.4.6 Spry验
45、证确认验证确认2.设置验证确认属性设置验证确认属性 n“预览状态预览状态”选择要查看的状态选择要查看的状态n“验证时间验证时间”可以设置验证发生的时间，包括站点访问者可以设置验证发生的时间，包括站点访问者在构件外部单击时、键入内容时或尝试提交表单时。在构件外部单击时、键入内容时或尝试提交表单时。n“必填必填”根据自己的喜好选择或取消选择根据自己的喜好选择或取消选择“必需必需”选项。选项。n“验证参照对象验证参照对象”选择将用作验证依据的文本域。选择将用作验证依据的文本域。12.4 Spry12.4 Spry验证表单验证表单12.4.7 12.4.7 Spry验证单选按钮组验证单选按钮组 验验证
46、证单单选选按按钮钮组组构构件件是是一一组组单单选选按按钮钮，可可支支持持对对所所选选内内容容进行验证。该构件可强制从组中选择一个单选按钮。进行验证。该构件可强制从组中选择一个单选按钮。1.插入插入Spry验证单选按钮组验证单选按钮组 将光标定位在需要插入验证选择的位置。将光标定位在需要插入验证选择的位置。 选择菜单栏选择菜单栏“插入插入”| |“SprySpry”| |“SprySpry验证单选按钮验证单选按钮组组”，或在，或在“插入插入”面板的面板的“SprySpry”类别中单击类别中单击“SprySpry验证单选按钮组验证单选按钮组”按钮。按钮。 完成完成“输入标签辅助功能属性输入标签辅助
47、功能属性”对话框，单击对话框，单击“确定确定”按钮。按钮。12.4 Spry12.4 Spry验证表单验证表单12.4.7 12.4.7 Spry验证单选按钮组验证单选按钮组2.设置验证单选按钮组属性设置验证单选按钮组属性 n“预览状态预览状态”选择要查看的状态选择要查看的状态n“验证时间验证时间”可以设置验证发生的时间，包括站点访问者在构件可以设置验证发生的时间，包括站点访问者在构件外部单击时、键入内容时或尝试提交表单时。外部单击时、键入内容时或尝试提交表单时。n“必填必填”根据自己的喜好选择或取消选择根据自己的喜好选择或取消选择“必需必需”选项。选项。n“空值空值” 如果用户选择具有空值的
48、单选按钮，则浏览器将返回如果用户选择具有空值的单选按钮，则浏览器将返回“请进行选择请进行选择”错误消息。错误消息。n“无效值无效值” 如果用户选择具有无效值的单选按钮，则浏览器将如果用户选择具有无效值的单选按钮，则浏览器将返回返回“请选择一个有效值请选择一个有效值”错误消息。错误消息。12.5 12.5 实战演练实战演练1.1.实战效果实战效果2.2.制作要求制作要求 在网页上创建一个网上书店服务问卷调查的表单，表单包含在网页上创建一个网上书店服务问卷调查的表单，表单包含单选按钮、复选框、单行文本框、多行文本框、下拉式列表等单选按钮、复选框、单行文本框、多行文本框、下拉式列表等普通表单及普通表单及SprySpry表单对象，可根据需求确定采用表单对象。表单对象，可根据需求确定采用表单对象。 表单中的表单元素用表格定位。表单中的表单元素用表格定位。 对表单中的标题及标识文字进行格式设置。对表单中的标题及标识文字进行格式设置。 对表单及表单对象的属性进行设置。对表单及表单对象的属性进行设置。
