网页设计模块八 使用表单.ppt

本模块导读 表单是网页中能够让浏览者与网页制作者进行交流的元素。在各种网站中，表单扮演着相当重要的角色，由这些表单配合相关程序，使得网页可以收集、分析用户的反馈意见，作出科学、合理的决策，是一个网站成功的重要因素。 本模块主要讲解表单及表单对象在网页中的应用及其属性设置，从而能创作出带表单的静态网页。并且详细介绍了“文本域和隐藏域”、“复选框和单选按钮”、“列表和菜单”、“表单按钮”等几项常用表单对象的设置与使用。最通过实例来讲解表单对象的综合运用，加深读者对表单功能的理解。 本模块要点 →网页中表单的概念 →在网页中插入表单并设置其属性 →各表单对象的使用 →表单对象的属性设置 →用表单制作留言板网页 模块八 使用表单 模块八 使用表单 任务一 创建表单 任务二 插入表单对象 学材小结 任务一 创建表单 目前很多网站都要求访问者填写各种表单进行注册、收集用户资料、获取用户订单，表单已成为网站实现互动功能的重要组成部分。表单是网页管理者与访问者之间进行动态数据交换的一种交互方式。 从表单的工作流程来看，表单的开发分为两部分，一是在网页上制作具体的表单项目，这一部分称为前端，主要在Dreamweaver中制作；另一部分是编写处理表单信息的应用程序，这一部分称为后端，如：ASP、CGI、PHP、JSP等。本模块内容主要讲解的是前端的设计，后台的开发将在以后介绍。 知识导读 任务一 创建表单 表单是实现动态网页的一种主要的外在形式，可以使网站的访问者与网站之间轻松的进行交互。使用表单，可以帮助Internet服务器从用户那里收集信息，实现用户与网页上的功能互动。通过表单可以收集站点访问者的信息，可以用做调查工具或收集客户登录信息，也可用于制作复杂的电子商务系统。 子任务1 了解表单的概念 表单相当于一个容器，它容纳的是承载数据的表单对象，例如：文本框、复选框等。因此一个完整的表单包括二部分：表单及表单对象，二者缺一不可。 用户可以通过单击【插入记录】→【表单】来插入表单对象，或者通过“插入”栏的“表单”面板来插入表单对象，如图8-1所示。 任务一 创建表单 子任务2 认识表单对象 图8-1 “插入”栏“表单”面板 任务一 创建表单 1、表单：在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。 2、文本字段：文本字段可接受任何类型的字母或数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。文本框用来输入比较简单的信息。 3、文本区域：如果需要输入建议、需求等大段文字，这时通常使用带有滚动条的文本区域。 4、隐藏域：可以在表单中插入一个可以存储用户数据的域。使用隐藏域可以存储用户输入的信息，如姓名、电子邮件地址或爱好的查看方式等，以便该用户下次访问站点时可以再次使用这些数据。 子任务2 认识表单对象 5、复选框：在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。 6、单选按钮：在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。 7、单选按钮组：插入共享同一名称的单选按钮的集合。 8、列表/菜单：可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。 9、跳转菜单：插入可导航的列表或弹出式菜单。跳转菜单允许插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。 任务一 创建表单 子任务2 认识表单对象 10、图像域：可以在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。 11、文件域：可在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。 12、按钮：在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。 13、标签：可在文档中给表单加上标签，以label/label形式开头和结尾。 14、字段集：可在文本中设置文本标签。 任务一 创建表单 子任务2 认识表单对象 在网页中插入表单的操作步骤如下： 步骤１ 执行【文件】→【新建】命令，新建网页文件。 步骤２ 将光标放在希望表单出现的位置，选择菜单栏【插入记录】→【表单】→【表单】命令，如图8-2所示。或选择“插入”栏上的“表单”类别，然后单击“表单”图标，如图8-1所示。 任务一 创建表单 图8-2