网页设计-任务十表单

项目四表单DreamweaverCS3项目教程项目四表单任务十表单和Spry框架•技能目标掌握快速制作表单页面的方法。能够创建不同形式的表单页面来满足用户间的交互。项目四表单任务十表单和Spry框架•知识目标熟练掌握如何在表单网页中插入表单域.。掌握如何在表单域中插入文本字段和文本区域。掌握单选按钮、单选按钮组和复选框的应用。掌握如何在表单域中插入列表/菜单、按钮和图像域。检查表单行为的运用。理解Spry验证文本域、Spry验证文本区域组件。理解Spry验证复选框、Spry验证选择组件。使用Spry框架组件制作具有验证功能的表单。项目四表单任务十表单和Spry框架4.1.1创建表单4.1.2问题探究—表单及表单对象4.1.3知识拓展—检查表单行为和Spry组件项目四表单任务十表单和Spry框架——构建任务工作任务该任务拟通过一个简单的用户调查表的制作，将不同表单对象置于该表单域中。通过该用户调查表单的创建来掌握表单对象的运用，起到举一反三的目的。项目四表单任务十表单和Spry框架——构建任务工作流程1.在站点中新建一个页面并保存。2.在网页中插入表单域。3.为了更好地定位各表单元素，在表单域中插入一张空白表格进行布局控制。4.在表单域中根据网页设计要求分别插入不同的表单元素。5.插入相应表单控件并分别设置相关属性。6.然后对表单添加简单校验功能。7.为表单设置提交动作。8.表单修饰。项目四表单任务十表单和Spry框架——构建任务网页预览效果项目四表单任务十表单和Spry框架-问题探究表单及表单对象表单是互联网用户与服务器进行信息交流的一种交互界面，它使网页的单向浏览变成了双向交互，在网站设计中得到了广泛的应用，如会员登录系统、会员注册系统、留言板、搜索引擎、聊天室等。一个完整的表单包括表单对象和应用程序两个组件。其中，表单对象在网页中起描述作用，应用程序则是服务器端或客户端的脚本，通过它实现对用户信息的处理。项目四表单任务十表单和Spry框架-问题探究表单表单是用标签form/form来标记的容器对象。用来接收用户输入信息的区域，并负责将这些信息提交给服务器端的某个程序进行处理。在DreamweaverCS3中可以创建包含文本字段、文本区域、单选按钮、复选框、下拉列表框、跳转菜单、按钮以及其他表单对象的表单；还可以编写用于验证访问者所提供信息的代码。如，检查用户输入的电子邮件地址是否包含“@”符号，或者检验某个文本字段填写内容的有效性或是否为必填项。项目四表单任务十表单和Spry框架-问题探究表单对象通常，一个表单上会包含多个对象，这些对象也称控件或表单元素。表单对象是与动态网站建立直接联系的标识，它可以从客户端收集信息，然后再传递给服务器程序进行处理。在DreamweaverCS3可以通过菜单“插入/表单”命令或使用插入面板的“表单”对象组加入表单体和表单元素，如图所示。文本字段表单隐藏域文本区域复选框单选按钮组跳转菜单元单选按钮列表/菜单文件域图像域图像域按钮标签Spry验证文本域Spry验证复选框Spry验证文本区域Spry验证选择表单对象面板图项目四表单任务十表单和Spry框架-问题探究①表单（体）•在文档中定义一个表单区域，可以在这个表单域中添加各种表单对象。插入表单对象之前应先定义表单体，否则DreamweaverCS3会提示是否添加表单标签。创建表单体后，会在文档中出现一个红色的虚线框，如图所示。如果在页面中没有看到此红色轮廓线，请检查菜单命令“查看/可视化助理/不可见元素”是否为选中状态。项目四表单任务十表单和Spry框架-问题探究②文本字段•用来接受任何类型的字母、数字文本输入内容。用户可以创建一个包含单行或多行的文本域，也创建一个隐藏用户输入文本的密码文本域，即输入的文本被替换为星号或项目符号，避免其他用户看到这些信息。项目四表单任务十表单和Spry框架-问题探究③隐藏域用来存放某些在页面中需要连续传递的信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域会将定义的名称和相关信息发送到服务器端。④复选框允许用户在一组选项中选择多个选项。用户可以同时选择任意多个适用的选项。项目四表单任务十表单和Spry框架-问题探究⑤单选按钮和单选按钮组代表互相排斥的选择，在一组单选按钮选项中只能选中其中一项。在某个单选按钮组（由两个或多个共享同一名称的按钮组成）中选择一个按钮。⑥列表/菜单在一个下拉列表中显示选项值，用户可从该下拉列表中选择多个选项值。“列表”选项在一个菜单中显示选项值，用户只能从中选择单个选项。如图所示。而“菜单”选项只有在空间有限但必须显示多个内容项，或者要控制返回给服务器的值时才使用。项目四表单任务十表单和Spry框架-问题探究⑦跳转菜单一种可导航的列表或弹出菜单，允许插入一个菜单列表框，并将菜单中的每一项链接到某个指定的文档或文件。当用户选择某项后，浏览器即打开该项链接的页面。⑧图像域可以将图片生成图形化按钮，代替提交按钮。项目四表单任务十表单和Spry框架-问题探究⑨文件域用户可以通过该文件域选择本地计算机上的某个文件并将该文件作为表单数据上传到服务器。文件域的外观与其他文本域类似，只是它包含一个“浏览”按钮。用户可以手动输入要上传的文件的路径，也可以使用“浏览”按钮选择文件。⑩按钮是表单中最重要的对象之一。通常，表单中的默认按钮有两种，一个是提交按钮，用来把用户输入的数据送往Web服务器；另一个是重设按钮，则用来清除表单中所有的内容，并把该表单还原为默认或初始状态。用户还可以为按钮添加自定义名称或标签。项目四表单任务十表单和Spry框架-知识拓展☺表单验证在网上浏览时，经常会填写一些表单并提交，大多数时候都会有程序自动校验表单填写的内容，对用户输入信息加以适当限制。“检查表单”行为可检查指定文本字段的内容，以确保用户输入了正确的数据类型。此行为配合onBlur事件，则将检查表单动作附加到各文本字段，则在用户填写表单时就对该域进行检查；配合onSubmit事件，则将检查表单动作附加整个表单，当用户单击提交按钮后，一次校验所有填写内容的合法性。操作步骤如下：项目四表单任务十表单和Spry框架-知识拓展–打开已制作好的表单文件\N4\biaodan.html，分别选中表单内的文本字段。–若要在用户提交表单时验证多个域，选中状态栏上的forｍ标记（该行为主要针对forｍ添加），在行为面板中单击按钮添加行为，从弹出菜单中选择“检查表单”命令，弹出检查表单对话框。如图4-2所示。图4-12表单制作及检查表单行为的添加项目四表单任务十表单和Spry框架-知识拓展–对话框中参数说明•域：该列表框中列出了表单中需要检查的文本字段。•值：是否要求用户必需填写此项，选中该复选框，则此项为必填项目。•可接受：该选项组设置表单填写内容的要求。“任何东西”对用户的填写内容不做限制；“数字”要求用户填写的内容只能是数字；“电子邮件地址”浏览器会自动检查用户填写内容是否有邮件的“@”符号；“数字从”将对用户填写的数字范围作出规定。项目四表单任务十表单和Spry框架-知识拓展–单击确定后，该行为激活事件onSubmit事件自动出现在“事件”菜单中。当用户单击提交按钮时，行为一次校验表单的有效性。在用户填写了不符合规范的信息后，浏览器会根据用户填写的情况给出警告。相关提示信息如图4-3所示。图4-3提示用户必须在表单项中输入内容提示用户输入内容格式不正确项目四表单任务十表单和Spry框架-知识拓展–若要在用户填写表单时分别验证各个域，则分别检查默认事件是否为onBlur或onChange。如果不是，请将事件修改为其中一个事件。当用户从该域移开焦点时，这两个事件都会触发“检查表单”行为。如果需要该域，最好使用onBlur事件。项目四表单任务十表单和Spry框架-知识拓展Spry表单构件利用Spry表单构件就可以轻松实现表单验证功能，而在DreamweaverCS3之前这些验证工作都必须通过行为的添加来实现。Spry表单构件是一个内建丰富用户交互功能的页面元素，为用户提供更丰富的体验。它由三部分组成：•组件结构：用来定义组件结构组成的HTML代码块。•组件行为：用来控制组件如何响应用户启动事件的JavaScript。•组件样式：用来指定组件外观的CSS。项目四表单任务十表单和Spry框架-知识拓展表单中的Spry表单构件主要用于验证用户在对象域中所输入内容是否为有效的数据，并在这些对象域中内建了CSS样式和JavaScript特效，CSS文件中包含设置组件样式所需的全部信息，而JavaScript文件则赋予组件功能。插入组件时，DreamweaverCS3会自动将这些文件链接到页面，以便组件中包含该页面的功能和样式。项目四表单任务十表单和Spry框架-知识拓展Spry验证文本域•Spry验证文本域（Spry文本框）与普通文本域的区别在于，它可以直接实现对用户输入的信息进行验证，并根据判断条件向用户发出相应的提示信息。该构件具有许多状态，如有效、无效和必需值等，用户可以根据所需的验证结果，使用属性面板来修改这些状态的属性。项目四表单任务十表单和Spry框架-知识拓展•Spry验证文本区域–Spry验证文本区域其实就是多行的Spry文本框，两者的主要区别在于属性检查器的设置不同。该区域在用户输入几个文本句子时显示文本的状态（有效或无效）。如果文本区域是必填域，而用户没有输入任何文本，该构件将返回一条消息，声明用户必须输入值。项目四表单任务十表单和Spry框架-知识拓展•Spry验证复选框–与传统复选框相比，Spry验证复选框的最大特点是当用户选择（或没有选择）复选框时会进行相应的操作提示，比如“至少要求选择一项”或“最多只能同时选择三项”等相关提示信息。项目四表单任务十表单和Spry框架-知识拓展•Spry验证选择–Spry验证选择其实就是在列表/菜单的基础上增加Spry验证功能，它可以对下拉菜单所选值实施验证，当用户在下拉菜单中进行选择，或者选择的值无效时进行提示。