5章表单和表单行为.pptVIP

第5章 表单和表单行为 本章学习目标 主要介绍了表单交互原理和设计表单网页的方法，其中包括静态和动态表单的设计方法。 要求掌握在网页中插入各种表单元素并设置其属性和样式的方法。对于表单数据的接收和后台处理部分，只需要有所了解即可。 另外，本章还介绍了跳转菜单的添加和设置方法，虽然它不属于表单网页，但是它借用了表单，所以在此也将它归并到表单分类中。 最后，简单介绍了行为的添加和常见行为事件的解释 5．1 理解表单交互过程 创建表单的基本步骤 ① 确定需要收集的信息，然后根据信息特点开始设计表单 ② 在表单中插入不同的表单元素 ③ 设置表单域的输入规则 ④ 设置通过表单所收集的信息的处理方式 ⑤ 设置确认网页，确认己经接收到用户填写的信息，并可用户核对是否正确 5．2 常用表单对象 文本域 按钮 图像域 复选框 单选钮 列表/菜单 文件域以及隐藏域 5．2 常用表单对象 5．2．1 建立表单布局 为了合理地安排表单元素，通常将使用表格和单元格来放置表单元素 5．2 常用表单对象 5．2．2 在表单中添加不同元素 1．文本域 文本域的“类型” 字段 “单行”：只允许输入单行文本 “密码”：用于输入密码，所有在该框中输入的字符都显示为星号 “多行”：可以输入多行文本，并且滚动显示 5．2 常用表单对象 2．单选按钮 单选按钮是只可以取其一的按钮 ,同组的多个单选按钮中，它们的“属性面板” 中的“单选按钮”名称是一致的 单选按钮的初始状态，可以选择“已勾选”或“未选中” 5．2 常用表单对象 3．复选框 复选框就是在一组选项中允许选取多个选项 “复选框名称”不能相同 复选框的初始状态可以设置“已勾选”或“未选中” 5．2 常用表单对象 4．列表/菜单 弹出下拉菜单和列表都列出了一组用户可以从中选择的值 弹出菜单只允许单项选择，而列表框则可选取多项 5．2 常用表单对象 5．使用文件域 方便对当前可存取的各个文件存放位置上的文件进行操作的一个元素 5．2 常用表单对象 6．按钮 表单按钮可以执行提交或重置表单的标准任务，也可以执行自定义功能 5．2 常用表单对象 7．隐藏域 隐藏域可以存储并提交非用户输入而对被访问系统却是需要搜集的信息 5．2 常用表单对象 8．图像域 使用图像域可以作为提交表单数据的按钮，或者可以通过附加某种行为来执行相应的任务 9．字段集 5．2 常用表单对象 5．2．3 设计表单元素样式 为表单元素设计样式，主要有以下两种方式： （1）重新定义表单元素的标签 （2）创建自定义样式，然后应用到指定表单元素上 5．3 验证表单的输入结果 验证表单输入结果的意义 验证表单输入结果的方法 内置的“检查表单”动作 onSubmit事件 onChange事件 onBlur 事件 如果要设置更加复杂的输入规则，用户需要自行编写脚本来实现 5．4 通过电子邮件接收表单结果 具体的操作步骤如下： （1）选中整个表单 （2）在“属性”面板的“动作”文本域中输入表单动作“mailto：xxx@xxx.xxx”，在“方法”下拉列表中选择“POST”选项 （3）在“MIME类型”中输入text/plain 5．5 创建跳转菜单 跳转菜单是文档中的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。 5．6 创建动态表单 动态表单的功能使表单对象成为动态对象，面临数据量很大的表单选项或者是经常变动的表单选项，动态表单可以简化站点的维护工作 5．6．1 定义记录集 （1）创建动态内容源（如数据库）与处理该页面的应用程序服务器之间的连接； （2）指定要显示数据库中的什么信息，或指定希望在该页面中包括什么变量； （3）使用 Dreamweaver 的指向并单击 (point-and-click) 界面选择动态内容元素并将其插入到选定页面。 5．6 创建动态表单 5．6．2 创建动态HTML表单菜单 在开始之前，必须在 ColdFusion、PHP、ASP 或 JSP 页中插入一个 HTML 表单，而且必须为该菜单定义记录集或其它动态内容源 5．6．3 创建HTML动态文本域 可以在 HTML 文本域中显示动态内容 5．6 创建动态表单 5．6．4 动态预先选择HTML复选框 可以让服务器决定当表单在浏览器中显示时是否选中一个复选框，在开始之前，必须在 ColdFusion、PHP、ASP 或 JSP 页中创建表单，而且必须为该文本域定义记录集或其它动态内容源 5．6．5 动态预先选择HTML单选按钮 可以让服务器决定当表单