第13章 使用表单

表单是制作交互式网页的基础，制作能够交互的表单网页通常需要两个步骤：一是创建表单页面，二是编写应用程序。本章将介绍表单的基本知识以及常用表单对象、Spry验证表单对象和表单类行为的基本使用方法。第13章使用表单学习目标了解表单的基本概念和工作原理。掌握使用常用表单对象的方法。掌握使用行为验证表单的基本方法。掌握使用Spry验证表单对象的方法。13.1.1教学案例━━用户注册13.1.2认识表单13.1.3表单和按钮13.1.4文本域和文本区域13.1.5单选按钮和单选按钮组13.1.6复选框和复选框组13.1.7选择域和隐藏域13.1.8图像域和文件域13.1.9跳转菜单13.1 常规表单对象13.1.1教学案例━━用户注册将素材文档复制到站点文件夹下，然后使用表单制作页面，在浏览器中的显示效果如图13-1所示。13.1.2 认识表单交互式表单网页通常由两部分组成，一部分是供用户填写信息的表单页面，另一部分是表单数据处理程序。在制作供用户填写信息的表单页面时，通常需要插入表单对象，表单对象是允许用户输入数据的机制。每个文本域、隐藏域、复选框和选择域等表单对象都必须具有标识其自身的惟一名称，表单对象名称可以使用字母、数字、字符和下划线的任意组合，但不能包含空格或特殊字符。设计表单时，要用描述性文本来标记表单域，以使用户知道他们要回答哪些内容。例如，“请输入您的用户名”表示请求输入用户名信息。可以使用DreamweaverCS6制作表单网页，在制作表单网页时，可以使用表格、段落标记、换行符、预格式化的文本等技术来设置表单的布局格式。在表单中使用表格时，必须确保所有表格标签都位于<form>和</form>标签之间。一个页面可以包含多个不重名的表单标签<form>，但<form>标签不能嵌套。13.1.2 认识表单使用DreamweaverCS6在页面中插入表单对象通常有两种方式，一种是在菜单栏中选择【插入】/【表单】中的相应菜单命令，另一种是使用【插入】面板【表单】类别中的相应工具按钮。在插入表单对象后，如果要设置表单对象的属性，需要保证表单对象处于选中状态，然后在【属性】面板中进行设置。在插入表单对象时，如果在【首选参数】对话框的【辅助功能】分类中选择了【表单对象】复选框，通常会弹出【输入标签辅助功能属性】对话框。单击按钮，表单对象也可以插入到文档中，但不会与辅助功能标签或属性相关联。如果取消选择【表单对象】复选框，在插入表单对象时将不会弹出【输入标签辅助功能属性】对话框。13.1.2 认识表单13.1.4 文本域和文本区域文本域是可以输入文本内容的表单对象。选择菜单命令【插入】/【表单】/【文本域】，将插入一个文本域。13.1.5 单选按钮和单选按钮组单选按钮主要用于用户从多个选项中选择一个选项。选择菜单命令【插入】/【表单】/【单选按钮】，将插入一个单选按钮，反复执行该操作将插入多个单选按钮。13.1.5 单选按钮和单选按钮组使用【插入】/【表单】/【单选按钮】命令，一次只能插入一个单选按钮。在实际应用中，单选按钮至少要有两个或者更多，因此可以使用【插入】/【表单】/【单选按钮组】命令一次插入多个单选按钮。由于其布局使用换行符或表格，每个单选按钮都是单独一行，可以根据实际需要进行调整。例如，如果一行显示3个单选按钮，就可以将它们之间的换行符删除，让它们在一行中显示。13.1.6 复选框和复选框组复选框常被用于有多个选项可以同时被选中的情况。每个复选框都是独立的，必须有一个惟一的名称。选择菜单命令【插入】/【表单】/【复选框】，将插入一个复选框，反复执行该操作将插入多个复选框。13.1.6 复选框和复选框组使用【插入】/【表单】/【复选框】命令，一次只能插入一个复选框。在实际应用中，复选框通常是多个同时使用，因此可以使用【插入】/【表单】/【复选框组】命令一次插入多个复选框。由于其布局使用换行符或表格，每个复选框都是单独一行，可以根据实际需要进行调整。例如，如果一行显示3个复选框，就可以将它们之间的换行符删除，让它们在一行中显示。13.1.7 选择域和隐藏域【选择（列表/菜单）】可以显示一个包含有多个选项的可滚动列表，在列表中可以选择需要的项目。选择菜单命令【插入】/【表单】/【选择（列表/菜单）】，将插入一个选择域。13.1.7 选择域和隐藏域隐藏域主要用来储存并提交非用户输入信息，如注册时间、认证号等，这些都需要使用JavaScript、ASP等源代码来编写，隐藏域在网页中一般不显现。选择菜单命令【插入】/【表单】/【隐藏域】，将插入一个隐藏域。在【属性】面板中，【隐藏区域】文本框主要用来设置隐藏域的名称。【值】文本框内通常是一段ASP代码，如“<%=Date()%>”。其中“<%…%>”是ASP代码的开始和结束标志，而“Date()”表示当前的系统日期，如“2010-12-20”。如果换成“Now()”则表示当前的系统日期和时间，如“2010-12-2010:16:44”，而“Time()”则表示当前的系统时间，如“10:16:44”。13.1.8 图像域和文件域图像域用于在表单中插入一幅图像从而生成图形化按钮，在网页中使用图形化按钮要比单纯使用按钮美观得多。选择菜单命令【插入】/【表单】/【图像域】，打开【选择图像源文件】对话框，进行设置。13.1.8 图像域和文件域文件域的作用是允许用户浏览并选择本地计算机上的文件，以便将该文件作为表单数据进行上传。但真正上传文件还需要相应的上传组件作支持，文件域仅仅是供用户浏览并选择本地文件使用，并不具有上传功能。从外观上看，文件域只是比文本域多了一个按钮。选择菜单命令【插入】/【表单】/【文件域】，将插入一个文件域。13.1.9 跳转菜单跳转菜单是网页文档中的弹出菜单，列出了到文档或文件的链接。可以创建到整个网站内的文档、其他网站上的文档、电子邮件、图像或可在浏览器中打开的任何类型文档的链接。跳转菜单中的每个选项都与URL关联。在用户选择一个选项时，会跳转到关联的URL。选择菜单命令【插入】/【表单】/【跳转菜单】，打开【插入跳转菜单】对话框，进行相应的参数设置即可。13.1.9 跳转菜单13.2使用表单类行为

13.2.1

教学案例━━论文信息提交13.2.2

设置文本域文字13.2.3

跳转菜单13.2.4

跳转菜单开始13.2.5

检查表单13.2.1

教学案例━━论文信息提交将素材文档复制到站点文件夹下，然后使用表单类行为设置页面，在浏览器中的显示效果如图13-33所示。13.2.2 设置文本域文字【设置文本域文字】行为可用指定的内容替换表单文本域的内容。可以在文本中嵌入任何有效的JavaScript函数调用、属性、全局变量或其他表达式。如果要嵌入一个JavaScript表达式，需要将其放置在大括号“{}”中。如果要显示大括号，需要在它前面加一个反斜杠“\{”。在表单标签中插入一个文本域，在【属性】面板中为其设置一个惟一的名称。然后选择文本域，并从【行为】面板的行为菜单中选择【设置文本】/【设置文本域文字】，打开【设置文本域文字】对话框设置即可。13.2.3 跳转菜单当使用菜单命令【插入】/【表单】/【跳转菜单】创建跳转菜单时，DreamweaverCS6会创建一个菜单对象。如果在【插入跳转菜单】对话框中没有选择【菜单之后插入前往按钮】，此时会向跳转菜单附加一个【跳转菜单】行为。通常不需要手动将【跳转菜单】行为附加到对象。如果确实没有【跳转菜单】行为，可以先选中对象，然后从【行为】面板的行为菜单中选择【跳转菜单】，打开【跳转菜单】对话框并进行所需更改，最后单击【确定】按钮即可添加【跳转菜单】行为。13.2.4 跳转菜单开始在使用此行为之前，文档中必须已存在一个跳转菜单。当使用菜单命令【插入】/【表单】/【跳转菜单】创建跳转菜单时，如果在【插入跳转菜单】对话框中选择了【菜单之后插入前往按钮】，此时会向【前往】按钮附加一个【跳转菜单开始】行为。通常不需要手动将【跳转菜单开始】行为附加到按钮对象。如果希望给一个没有【前往】按钮的跳转菜单添加【跳转菜单开始】行为，需要在跳转菜单后插入一个按钮图像，选中该按钮图像，然后从【行为】面板的行为菜单中选择【跳转菜单开始】，打开【跳转菜单开始】对话框。在【选择跳转菜单】菜单中，选择“转到”按钮要激活的菜单，然后单击【确定】按钮关闭对话框，一个【跳转菜单开始】行为添加完成。12.2.3 创建模板二、基于现有文档创建模板这是创建模板比较快捷的一种方式。首先打开一个现有的网页，选择菜单命令【文件】/【另存为模板】，打开【另存模板】对话框，将当前的文档保存为模板文件，然后选择相应的网页元素，通过插入模板对象的方式将其转换为相应的模板区域，最后再次保存即可。在Dreamweaver中，创建的模板文件保存在站点的“Templates”文件夹内，文件扩展名为“.dwt”，“Templates”文件夹是自动生成的，不能对其名称进行修改。13.2.5 检查表单表单在提交到服务器端以前必须进行验证，以确保输入数据的合法性。使用【检查表单】行为可以检查指定文本域的内容，以确保用户输入了正确的数据类型。使用onBlur事件将此行为分别添加到各个文本域，在用户填写内容时直接对所填写的文本域进行检查，不合法要求重新填写。使用onSubmit事件将此行为添加到表单标签，在用户提交表单时对多个文本域同时进行检查以确保数据的有效性。如果用户填写表单时需要分别检查各个域，在设置时需要分别选择各个域，然后在【行为】面板中单击+按钮，在弹出的菜单中选择【检查表单】命令。如果用户在提交表单时检查多个域，需要先选中整个表单，然后在【行为】面板中单击+按钮，在弹出的菜单中选择【检查表单】命令，在打开的【检查表单】对话框中进行参数设置。13.3Spry验证表单对象13.3.1

教学案例━━杂志在线投稿13.3.2

认识Spry验证表单对象13.3.3

Spry验证文本域13.3.4

Spry验证文本区域13.3.5

Spry验证复选框13.3.6Spry验证选择13.3.7Spry验证密码13.3.8Spry验证确认13.3.9Spry验证单选按钮组13.3.1

教学案例━━杂志在线投稿将素材文档复制到站点文件夹下，然后使用Spry验证表单对象制作页面，在浏览器中的显示效果如图13-46所示。13.3.2 认识Spry验证表单对象DreamweaverCS6除了使用【检查表单】行为验证表单外，也可以使用Spry验证表单对象来同时完成表单信息收集和表单信息验证这两项功能。DreamweaverCS6提供了7个Spry验证表单对象：Spry验证文本域、Spry验证文本区域、Spry验证复选框、Spry验证选择、Spry验证密码、Spry验证确认和Spry验证单选按钮组。Spry验证表单对象是在普通表单的基础上添加了验证功能，可以通过Spry验证表单对象的【属性】面板进行验证方式的设置。这就意味着Spry验证表单对象的【属性】面板是设置验证方面的内容的，不涉及具体表单对象的属性设置。13.3.2 认识Spry验证表单对象如果要设置具体表单对象的属性，仍然需要单独选择表单对象，然后按照设置常规表单对象的方法进行。13.3.3 Spry验证文本域Spry验证文本域用于在输入文本时显示文本的状态。选择菜单命令【插入】/【表单】/【Spry验证文本域】，将在文档中插入Spry验证文本域。单击【Spry文本域：sprytextfield1】，可选中Spry验证文本域。13.3.4 Spry验证文本区域Spry验