第11章使用表单全解.ppt

第11章 使用表单 本章学习内容 11.1 学习任务：表单和表单对象 11.2 案例1 设计网页中的留言簿 11.3 案例2 设计会员注册页面 11.4 案例3 在网页中使用Spry布局对象 11.5 实训 11.1 学习任务：表单和表单对象 ?本节学习任务 认识表单和表单对象，掌握创建表单、向表 单中插入表单对象的方法，掌握表单及表单对 象的属性设置。 11.1.1 表单 1．认识表单 表单是网站管理者与浏览者沟通的纽带，有了表 单，网站就不仅仅是“信息提供者”，也是“信息收集 者”。表单通常用于用户登录、留言簿、网上报名、产 品订单、网上调查及有哪些信誉好的足球投注网站界面等。 11.1 学习任务：表单和表单对象 2．创建表单 在Dreamweaver文档中插入表单有两种方 法：一种是使用菜单命令，另一种是使用【表 单】按钮。 使用菜单命令插入表单：选择“插入→表单→表单”菜单命令。 使用“表单”按钮插入表单：在文档窗口中选定插入点，单击“插入”面板“表单”分类中的【表单】按钮 ，或直接将【表单】按钮 拖曳到文档中。 11.1 学习任务：表单和表单对象 3．设置表单属性 在文档窗口中选中插入的表单，表单“属性”如下图所示。 表单ID：是form标签的name参数，用于标明表单的名称，每个表单的名称不能相同。 动作：是form标签的action参数，用于设置处理该表单数据的动态网页路径。 方法：是form标签的method参数，用于设置将表单数据传输到服务器的方法。 编码类型：是form标签的enctype参数，用于设置对提交给服务器处理的数据使用的MIME编码类型。 目标：是form标签的target参数，即用于选择打开目标浏览器的方式 11.1 学习任务：表单和表单对象 11.1.2 表单对象 1．向表单中插入对象 在Dreamweaver CS5中，表单对象是允许用户 输入数据的网页元素。向表单中插入表单对象的方法 有如下几种。 将光标定位于表单边界内（即红色虚线框内）的插入点，从“插入→表单”级联式菜单中选择表单对象。 将光标定位于表单边界内的插入点，在“插入”面板的“表单”分类中单击表单对象按钮。 在“插入”面板的“表单”分类中，选中要插入的表单对象按钮，按下鼠标左键将其直接拖曳到表单边界内的插入点位置。 11.1 学习任务：表单和表单对象 2．表单标签 表单标签是成对出现的 form…/form，它是一个容器标签，用 来定义一个表单区域，定义的表单对象需要放 在form与/form之间。 3．表单对象 表单对象包含文本字段、隐藏域、文本区 域、复选框、单选框、列表/菜单、跳转菜单、 图像域、文件域、按钮等。 11.1 学习任务：表单和表单对象 文本字段 和文本区域 ：接受任何类型的字母、数字、文本输入内容。文本可以单行或多行显示，也可以以密码域的方式显示。 隐藏域 ：存储用户输入的信息，如姓名、电子邮件地址等信息，并在用户下次访问此站点时使用这些数据。 复选框和复选框组：允许在一组选项中选择多个选项。 单选按钮和单选框组：在一组选项中一次只能选择一项。 图像域：可以在表单中插入一幅图像，使其生成图形化的按钮，来代替不太美观的普通按钮。 11.1 学习任务：表单和表单对象 选择（列表/菜单）：“列表”选项在一个滚动列表中显示选项值，用户可以从该滚动列表中选择一个或多个选项。“菜单”选项在一个下拉菜单中显示出所有选项值，用户只能从中选择单个选项。跳转菜单：可以是导航列表或弹出菜单，使用它们可以插入一个菜单，其中每个选项都链接到指定网页文件。 文件域：可以实现在网页中上传文件的功能。 按钮：用于控制表单的操作。一般情况下，表单中设有3种按钮：提交按钮、重置按钮和普通按钮。 11.2 案例1 设计网页中的留言簿 学习目标 通过本案例的学习，掌握表单的创建、文本域的插入及属性设置、按钮的插入及属性设置等。 知识要点 创建表单，表单属性的设置，文本域的应用，按钮的应用等。 11.2 案例1 设计网页中的留言簿 11.2 案例1 设计网页中的留言簿 11.2.1 留言簿界面设计 当浏览者访问网页时，如果对网站有意见或建议， 可以在留言簿中留言，并可得到网站管理者的答复， 从而实现浏览者与网站管理者的信息交流。 11.2.2 创建文本域 通常使用表单的文本域来接收用户输入的信息。文 本域包括单行文本域、多行文本域、密码文本域3种。 一般情况下，当用户输入较少信息时，使用单行文本 域；当用户输入较多信息时，使用多行文本域；当用 户输入密码等必威体育官网网址信息时，使用密码文本域。 11.2 案例1 设