新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第10章课件.ppt

1、第第1010章章 表单表单本章学习要点：本章学习要点：1 1创建表单创建表单 2 2插入表单对象插入表单对象 3 3表单及表单对象属性的设置表单及表单对象属性的设置第第1010章章 表单表单 网页设计中的交互性是用户与服务器之间的交互，通过页面设计为用户提供一个平等的交流平台，交互体验设计成为新媒体网页吸引用户的重要因素，这个功能主要由表单来实现。表单的作用是从访问网站的用户处获得信息，如注册、登录等信息。10.1 10.1 认识网页中的表单认识网页中的表单 表单是一种特殊的网页容器标签，是Internet用户同服务器进行信息交互的最重要的控件，它从Web用户那里收集信息，不仅可以收集用户访问

2、的浏览路径，还可以收集用户填写的个人资料。表单支持客户端/服务器关系中的客户端。用户在Web浏览器（客户端）的表单中输入信息后，单击【提交】按钮，这些信息即被发送到服务器端，由服务器端脚本或应用程序对这些信息进行处理。服务器向用户（客户端）返回所请求的信息或基于表单内容执行某些操作，以此进行响应，如图所示。10.1 10.1 认识网页中的表单认识网页中的表单表单服务器数据库数据表 10.2 10.2 创建表单创建表单10.2.1 创建表单创建表单 将鼠标光标置于目标位置，选择【插入】/【表单】/【表单】命令，即可在鼠标光标所在行插入一个空白表单。在设计视图中，表单轮廓会以红色虚线表示，如图所示

3、。10.3.1 10.3.1 插入文本域插入文本域 表单中的文本域分为文本域和文本区域，分别用于在表单中插入一个可以输入一行或多行文本的表单元素。将鼠标光标置于表单域中，选择【插入】/【表单】/【文本域】命令，弹出【输入标签辅助功能属性】对话框，在该对话框中可以设置表单对象的属性，如图所示。10.3 10.3 添加并设置表单对象的属性添加并设置表单对象的属性 属性设置完成后，单击【确定】按钮即可以在表单中插入一个文本域，如图所示。10.3 10.3 添加并设置表单对象的属性添加并设置表单对象的属性 在文本域中可以输入任何类型的文本、数字和字母，也可以在文本域【属性】检查器的【类型】中选择【密码

4、】单选按钮，对文本进行加密显示；如果需要显示多行文本，则可以在文本域【属性】检查器的【类型】中选择【多行】单选按钮，如图所示。10.3 10.3 添加并设置表单对象的属性添加并设置表单对象的属性10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 1插入单选按钮 单选按钮是一种选择性表单对象，可以进行数据的选择，但一次只能选择一个选项，当用户选中其中一个单选按钮时，其他单选按钮将自动转换为未选中状态。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【单选按钮】命令，即可以在表单中插入一个单选按钮，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入

5、单选按钮和单选按钮组 选中单选按钮，可以设置单选按钮属性，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 选中单选按钮，可以设置单选按钮属性，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 2插入单选按钮组 当表单中有多组单选按钮需要使用时，使用单选按钮组承载不同组的单选按钮。将鼠标光标置于表单的指定位置，选择【插入】/【表单】/【单选按钮组】命令，弹出【单选按钮组】对话框，在该对话框可以设置单选按钮组的属性，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 插入的单选按钮组如

6、左图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 10.3.3 10.3.3 插入复选框和复选框组插入复选框和复选框组1插入复选框 复选框表单对象用于设置预定义的选择对象，用户可以单击复选框按钮进行选择。复选框对每个单独的响应进行“打开”和“关闭”状态切换，因此，用户可以从复选框组中同时选择多个选项。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【复选框】命令，即可以表单中插入一个复选框，选中复选框，可以设置复选框的属性，如下图所示。10.3.3 10.3.3 插入复选框和复选框组插入复选框和复选框组【复选框】属性检查器插入复选框2插入复选框组

7、当有多组复选框需要使用时，使用复选框组承载不同的复选框。将鼠标光标置于表单的指定位置，选择【插入】/【表单】/【复选框组】命令，弹出【复选框组】对话框，在该对话框可以设置复选框组的属性，如图所示。10.3.3 10.3.3 插入复选框和复选框组插入复选框和复选框组10.3.4 10.3.4 插入列表插入列表/菜单菜单 列表/菜单是一种重要的表单对象，用户可以在列表或菜单中方便地选择其中某一个项目，在提交表单时，将选择的项目值传送到服务器中。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【选择（列表/菜单）】命令，在表单中插入一个空白【列表/菜单】表单对象，选中该对象，设置属性如图所示

8、。单击【列表值】按钮，可以设置列表值属性。10.3.4 10.3.4 插入列表插入列表/菜单菜单 当选择【类型】中的【列表】时，【高度】和【选定范围】可用，设置插入列表的【高度】为“3”，并复选【允许多选】选项，插入的列表如图所示。10.3.4 10.3.4 插入列表插入列表/菜单菜单 跳转菜单是一种带链接属性的选项弹出菜单，当单击该菜单时，即可跳转到指定的站内文件或其他网站的Web页面。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【跳转菜单】命令，弹出【插入跳转菜单】对话框，设置跳转让菜单属性如图所示。10.3.5 10.3.5 插入跳转菜单插入跳转菜单10.3.5 10.3.5

9、 插入跳转菜单插入跳转菜单插入的跳转菜单如图所示。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 表单按钮用于控制表单操作。使用表单按钮能够将输入表单的数据提交到服务器或重置表单，还可以将其他已经在脚本中定义的处理任务分配给按钮。表单按钮可分为标准表单按钮和图片式表单按钮，即图像域。1插入按钮 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【按钮】命令，即在表单中插入一个标准表单按钮，选中表单按钮，属性如图所示。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 若想使用按钮图像作为提交按钮，就要使用图像域。图像域只能用作表单的提交按钮，而不能用于重置按钮。1

10、0.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【图像域】命令，在弹出的【选择图像源文件】对话框中选择所的图像，单击【确定】按钮，即在表单中插入一个图像域，选中插入的图像域，属性设置如图所示。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 文件域又称为文件上传域，允许用户将本机上的文件上传到服务器。文件域要求使用POST方法将文件从浏览器传输到服务器，该文件被发送到表单的操作域中所指定的地址。10.3.7 10.3.7 插入文件域插入文件域 10.3.7 10.3.7 插入文件域插入文件域 将鼠标光标置于表单域指

11、定位置，选择【插入】/【表单】/【文件域】命令，即可在表单中插入文件域。选中文件域，设置属性如图所示。10.3.8 10.3.8 插入隐藏域插入隐藏域 隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域不可见。当表单被提交后，隐藏域会将信息用设置时定义的名称和值发送到服务器端。10.3.8 10.3.8 插入隐藏域插入隐藏域 将鼠标光标置于表单域指定位置，选择【插入】/【表单】/【隐藏域】命令，即可在表单中插入隐藏域。选中隐藏域，属性如图所示。具体操作步骤：1新建网页，输入文本“客户信息反馈表”，将文件另存为“examplechapter10fankuibiaoindex.h

12、tml”。2插入表单。将鼠标光标置于“客户信息反馈表”文本的下面，选择【插入】/【表单】/【表单】命令，在网页中插入一个空白表单。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表3在表单中插入表格。将鼠标光标置于表单域中，选择【插入】/【表格】命令，在表单中插入一个【边框粗细】为“1”、【单元格间距】和【单元格边距】均为“2”、【表格宽度】为“80%”的6行4列的表格，设置表格名称为“fkxx”，并居中对齐，如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表4布局表格。根据需要合并单元格，并调整单元格宽度和高度，输入文本信

13、息，如图所示。设置表格列宽分别为“15%”、“35%”、“15%”和“35%”，设置“购物途径”下面一行的行高为“150”，“您的建议”行高为“90”，其他行行高均为“40”。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表5插入表单元素。（1）将鼠标光标置于“您的名字”后的单元格中，选择【插入】/【表单】/【文本域】命令，插入一个文本域，设置文本域名称为“mz”，【类型】选择【单行】单选按钮。（2）将鼠标光标置于“性别”后的单元格中，分别插入两个单选按钮，设置两个单选按钮的名称均为“xb”，标签文本分别为“男”和“女”。选中标签为“女”的单选按钮，设置【初始状

14、态】为“已勾选”。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（3）将鼠标光标置于“年龄”后的单元格中，插入一个菜单/列表，设置【选择】名称为“nl”，列表值如图所示。（4）将鼠标光标置于“所购商品”后的单元格中，选择【插入】/【表单】/【选择（列表/菜单）】命令，插入一个列表/菜单，设置【选择】名称为“sp”，列表值如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（5）将鼠标光标置于“购物途径”行的下面右侧的单元格中，选择【插入】/【表

15、单】/【单选按钮组】命令，插入一个单选按钮组，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（6）将鼠标光标置于“问题的类型”行的下面右侧的单元格中，选择【插入】/【表单】/【复选框组】命令，插入一个复选框组，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（7）将鼠标光标置于“您的建议”后的单元格中，选择【插入】/【表单】/【文本区域】命令，插入一个文本区域，设置【文本域】名称为“jy”，【字符宽度】为“60”，【行数】为“6”，【类型】选择【多行】单选按钮。10.3.9 10.3.9 课堂

16、案例课堂案例制作客户信息反馈表制作客户信息反馈表10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（8）将鼠标光标置于底部单元格中，选择【插入】/【表单】/【按钮】命令，分别插入两个按钮，设置【动作】分别为【提交表单】和【重设表单】，如图所示。6创建CSS样式（1）创建表格CSS样式。选中整个表格，选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，为ID为“fkxx”的表格创建CSS规则，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（2）创建标题CSS样式。新建一个名为“bt”的基本类，设置属性如图所示

17、。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表7应用标题样式。选中“客户信息反馈表”标题文本，在【CSS样式】面板中右键单击“.bt”样式，在弹出的快捷菜单中选择【应用】。整个表单显示效果如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表10.4 10.4 使用使用SprySpry验证表单验证表单 Spry表单验证允许用户建立丰富网页的一套JavaScript和CSS库，用户可以使用这个框架显示XML数据，创建交互效果。通过Spry验证，能够实现对表单元素内容的检测，以确保将正确的信息发送到服务器。10.4.1 10.

18、4.1 使用使用SprySpry验证文本域验证文本域 Dreamweaver CS6提供了一个Ajax的框架Spry，Spry内置表单验证功能对于初学者来说非常实用和方便。Spry验证文本域构件是一个文本域，该域用于在站点访问者输入文本时判断文本域的合法或非法状态，例如有效或无效等。验证文本域可以检测多个状态，用户可以在【属性】检查器中根据检查结果来设置这些状态。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证文本域】命令，即在表单中插入一个Spry验证文本域，选中该文本域，可以设置Spry验证文本域属性，如图所示。10.4.1 10.4.1 使用使用SprySpry验证

19、文本域验证文本域使用Spry验证文本域的表单如图所示。10.4.1 10.4.1 使用使用SprySpry验证文本域验证文本域 与Spry验证文本域类似，都可以用于进行输入信息的判断，当Spry验证文本区域中必须输入数据，但用户没有输入任何信息时，可根据其【属性】检查器的【提示】文本框中的内容进行提示。10.4.2 10.4.2 使用使用SprySpry验证文本区域验证文本区域 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证文本区域】命令，即在表单中插入一个Spry验证文本域，选中该文本区域，设置属性如图所示。10.4.2 10.4.2 使用使用SprySpry验证文本

20、区域验证文本区域 使用Spry验证文本区域的表单效果如图所示。10.4.2 10.4.2 使用使用SprySpry验证文本区域验证文本区域10.4.3 10.4.3 使用使用SprySpry验证复选框验证复选框 Spry验证复选框能够对用户选中复选框的行为进行验证，当用户选择复选框时，Spry验证复选框会显示合法或非法状态的复选框。10.4.3 10.4.3 使用使用SprySpry验证复选框验证复选框 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证复选框】命令，即在表单中插入一个Spry验证复选框，选中Spry验证复选框，设置属性如图所示。10.4.3 10.4.3

21、使用使用SprySpry验证复选框验证复选框 如果需要对多个复选框进行验证，即验证复选框组，则可以在Spry验证复选框的蓝色区域内部再插入多个普通复选框及标签，并设置所有复选框的【ID】属性值相同。然后单击Spry验证复选框，选择【实施范围（多个）】单选按钮，复选【验证于】的【onBlur】属性，设置【最小选择数】和【最大选择数】属性值，如图所示。Spry验证选择能够对用户选择的下拉菜单项目进行合法性验证，验证选择有多个常用状态。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证选择】命令，即在表单中插入一个Spry验证选择对象。选中Spry验证选择对象，设置属性如图所示。

22、10.4.4 10.4.4 使用使用SprySpry验证选择验证选择使用Spry验证选择的表单效果如图所示。10.4.4 10.4.4 使用使用SprySpry验证选择验证选择10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单具体操作步骤：1打开素材文件“examplechapter10spryyzspryyanzheng.html”。2添加“用户昵称”Spry验证文本域。将鼠标光标置于“用户昵称”文本后，选择【插入】/【表单】/【Spry验证文本域】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“nc”，单击【确定】按钮。选中Spry验证文本域对象，设置属性

23、如图所示。3添加“电子邮箱”Spry验证文本域。将鼠标光标置于“电子邮箱”文本后，选择【插入】/【表单】/【Spry验证文本域】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“yx”，单击【确定】按钮。选中Spry验证文本域对象，设置属性如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单4添加Spry验证密码。将鼠标光标置于“登录密码”文本后，选择【插入】/【表单】/【Spry验证密码】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“mm”，单击【确定】按钮。选中Spry验证密码对象，设置属性如图所示。10.4.5 10.4.5 课堂案例课堂

24、案例制作用户注册表单制作用户注册表单5添加Spry验证确认。将鼠标光标置于“确认密码”文本后，选择【插入】/【表单】/【Spry验证确认】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“mmqr”，单击【确定】按钮。选中Spry验证确认对象，设置属性如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单6添加Spry验证复选框。将鼠标光标置于“我已阅读协议”文本前，选择【插入】/【表单】/【Spry验证复选框】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“OK”，单击【确定】按钮。选中Spry验证复选框对象，单击【必需（单个）】单选按钮。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单7添加按钮。将鼠标光标置于“我已阅读协议”文本的下一行，选择【插入】/【表单】/【按钮】命令，不设置任何属性，单击【确定】按钮。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单8保存文件。选择【文件】/【保存】命令，系统会弹出【复制相关文件】对话框，如图所示。单击【确定】按钮，将文件进行保存。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单9按下F12键预览网页，网页效果如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单