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

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

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

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

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

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

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

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

8、择的项目值传送到服务器中。 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【选择（列表/菜单）】命令，在表单中插入一个空白【列表/菜单】表单对象，选中该对象，设置属性如图所示。10.3.4 插入列表/菜单 列表/菜单是一种单击【列表值】按钮，可以设置列表值属性。10.3.4 插入列表/菜单单击【列表值】按钮，可以设置列表值属性。10.3.4 插入列 当选择【类型】中的【列表】时，【高度】和【选定范围】可用，设置插入列表的【高度】为“3”，并复选【允许多选】选项，插入的列表如图所示。10.3.4 插入列表/菜单 当选择【类型】中的【列表】时，【高度】和【选定范围】可用， 跳转菜单是一种

9、带链接属性的选项弹出菜单，当单击该菜单时，即可跳转到指定的站内文件或其他网站的Web页面。 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【跳转菜单】命令，弹出【插入跳转菜单】对话框，设置跳转让菜单属性如图所示。 10.3.5 插入跳转菜单 跳转菜单是一种带链接属性的选项弹出菜单，当单10.3.5 插入跳转菜单插入的跳转菜单如图所示。10.3.5 插入跳转菜单插入的跳转菜单如图所示。10.3.6 插入按钮和图像域 表单按钮用于控制表单操作。使用表单按钮能够将输入表单的数据提交到服务器或重置表单，还可以将其他已经在脚本中定义的处理任务分配给按钮。表单按钮可分为标准表单按钮和图片式表单按

10、钮，即图像域。10.3.6 插入按钮和图像域 表单按钮用于1插入按钮 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【按钮】命令，即在表单中插入一个标准表单按钮，选中表单按钮，属性如图所示。10.3.6 插入按钮和图像域 1插入按钮10.3.6 插入按钮和图像域 若想使用按钮图像作为提交按钮，就要使用图像域。图像域只能用作表单的提交按钮，而不能用于重置按钮。 10.3.6 插入按钮和图像域 若想使用按钮图像作为提交按钮，就要使用图像域 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【图像域】命令，在弹出的【选择图像源文件】对话框中选择所的图像，单击【确定】按钮，即在表单中插

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

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

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

14、%”和“35%”，设置“购物途径”下面一行的行高为“150”，“您的建议”行高为“90”，其他行行高均为“40”。10.3.9 课堂案例制作客户信息反馈表4布局表格。根据需要合并单元格，并调整单元格宽度和高度，输5插入表单元素。（1）将鼠标光标置于“您的名字”后的单元格中，选择【插入】/【表单】/【文本域】命令，插入一个文本域，设置文本域名称为“mz”，【类型】选择【单行】单选按钮。（2）将鼠标光标置于“性别”后的单元格中，分别插入两个单选按钮，设置两个单选按钮的名称均为“xb”，标签文本分别为“男”和“女”。选中标签为“女”的单选按钮，设置【初始状态】为“已勾选”。10.3.9 课堂案例制作

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

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

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

18、.3.9 课堂案例制作客户信息（2）创建标题CSS样式。 新建一个名为“bt”的基本类，设置属性如图所示。10.3.9 课堂案例制作客户信息反馈表（2）创建标题CSS样式。10.3.9 课堂案例制作客户信7应用标题样式。选中“客户信息反馈表”标题文本， 在【CSS样式】面板中右键单击“.bt”样式，在弹出的快捷菜单中选择【应用】。整个表单显示效果如图所示。10.3.9 课堂案例制作客户信息反馈表7应用标题样式。选中“客户信息反馈表”标题文本， 在【CS10.4 使用Spry验证表单 Spry表单验证允许用户建立丰富网页的一套JavaScript和CSS库，用户可以使用这个框架显示XML数据，创

19、建交互效果。通过Spry验证，能够实现对表单元素内容的检测，以确保将正确的信息发送到服务器。10.4 使用Spry验证表单 Spry表单10.4.1 使用Spry验证文本域 Dreamweaver CS6提供了一个Ajax的框架Spry，Spry内置表单验证功能对于初学者来说非常实用和方便。Spry验证文本域构件是一个文本域，该域用于在站点访问者输入文本时判断文本域的合法或非法状态，例如有效或无效等。验证文本域可以检测多个状态，用户可以在【属性】检查器中根据检查结果来设置这些状态。10.4.1 使用Spry验证文本域 Drea 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry

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

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

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

23、如果需要 Spry验证选择能够对用户选择的下拉菜单项目进行合法性验证，验证选择有多个常用状态。 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证选择】命令，即在表单中插入一个Spry验证选择对象。选中Spry验证选择对象，设置属性如图所示。10.4.4 使用Spry验证选择 Spry验证选择能够对用户选择的下拉菜单项目使用Spry验证选择的表单效果如图所示。10.4.4 使用Spry验证选择使用Spry验证选择的表单效果如图所示。10.4.4 使用S10.4.5 课堂案例制作用户注册表单具体操作步骤：1打开素材文件“examplechapter10spryyzspryya

24、nzheng.html”。2添加“用户昵称”Spry验证文本域。将鼠标光标置于“用户昵称”文本后，选择【插入】/【表单】/【Spry验证文本域】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“nc”，单击【确定】按钮。选中Spry验证文本域对象，设置属性如图所示。10.4.5 课堂案例制作用户注册表单具体操作步骤：3添加“电子邮箱”Spry验证文本域。将鼠标光标置于“电子邮箱”文本后，选择【插入】/【表单】/【Spry验证文本域】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“yx”，单击【确定】按钮。选中Spry验证文本域对象，设置属性如图所示。10.4.5 课堂案例制作用户注册表单3添加“电子邮箱”Spry