Dreamweaver网页设计 第12章表单
Dreamweaver 网页设计 第12章 表单
【学习概述】 表单的作用是非常重要的。比如获得 Web站点用户的信息,访问者可以在表单 对象中输入信息,然后提交这些信息、。其 他的如在站点内加入搜索引擎等也必须利 用表单技术。本章重点内容是:文本域 复选框、单选按钮、列表/菜单的使用。难 点内容是:制作发送电子邮件表单、制作 跳转菜单和在网页中加入搜索引擎等较为 高级的内容
【学习概述】 表单的作用是非常重要的。比如获得 Web站点用户的信息，访问者可以在表单 对象中输入信息，然后提交这些信息。其 他的如在站点内加入搜索引擎等也必须利 用表单技术。本章重点内容是：文本域、 复选框、单选按钮、列表/菜单的使用。难 点内容是：制作发送电子邮件表单、制作 跳转菜单和在网页中加入搜索引擎等较为 高级的内容
12.1【课堂讲解】表单概述 121.1什么是表单 表单是实现网页互动的元素,与客户端和服务器端脚本进行结合使用,可以 实现互动性。表单支持客户端服务器关系中的客户端。当访问者在Web浏览 器中显示的表单中输入信息,然后单击【提交】按钮时,这些信息将被发送 到服务器,服务器端脚本或应用程序对这些信息进行处理,最后服务器端将 处理结果返回给客户端。用于处理表单数据的常用服务器端技术包括cgi、 asp/asp.net、jsp、PHP等。 处理表单分为3个步骤进行: 1)执行【客户端填写表单内容并提交表单】->【服务器端调用脚本处理表 单内容】→>【服务器端将处理结果返回给客户端】命令,如图12-1所示。 (3)服务器端将处 理结果返回给客 2)服务器 端调用脚 本处理表 图12-1处理表单流程图 (1)客户端填写 表单内容并提交 单
12.1 【课堂讲解】表单概述 12.1.1 什么是表单 表单是实现网页互动的元素，与客户端和服务器端脚本进行结合使用，可以 实现互动性。表单支持客户端-服务器关系中的客户端。当访问者在Web浏览 器中显示的表单中输入信息，然后单击【提交】按钮时，这些信息将被发送 到服务器，服务器端脚本或应用程序对这些信息进行处理，最后服务器端将 处理结果返回给客户端。用于处理表单数据的常用服务器端技术包括cgi、 asp/asp.net、jsp、PHP等。 处理表单分为3个步骤进行： （1）执行【客户端填写表单内容并提交表单】->【服务器端调用脚本处理表 单内容】->【服务器端将处理结果返回给客户端】命令，如图12-1所示。 图12-1处理表单流程图
212表单对象 Dreamweaver提供的表单对象包括表单、文本字段、隐藏域、文本区域、复 选框、单选按钮、单选按钮组、列表菜单、跳转莱单、图像域、文件域、按钮 标签、字段集等。可以通过执行【插入】->【表单】命令来插入表单对象(如 图12-2所示),也可以单击“插入”栏的“表单”类别中的表单对象按钮(如 图123所示) 文本域〔T 复选框〔 单选按钮) 文件域① 图像域 隐家域Q 单选按钮组G) 跳转菜单〔 字段集 图122表单子菜单 插入常用布局表单文本mM应用程序F1ash元索收藏夹 回团回画 图123表单工具栏
12.1.2 表单对象 Dreamweaver提供的表单对象包括表单、文本字段、隐藏域、文本区域、复 选框、单选按钮、单选按钮组、列表菜单、跳转菜单、图像域、文件域、按钮、 标签、字段集等。可以通过执行【插入】->【表单】命令来插入表单对象（如 图12-2所示），也可以单击“插入”栏的“表单”类别中的表单对象按钮（如 图12-3所示）。 图12-2 表单子菜单 图12-3 表单工具栏
122.1创建表单 (1)新建一个网页,将光标定位在希望表单出现的位置上。 2)执行【插入】->【表单】->【表单】命令,或选择“插入”栏上的“表 单”类别,然后单击“表单”按钮。 (3)这时文档中将插入一个空的表单,如图12-5所示。在“设计”视图中, 红色的虚轮廓线表示表单 注意:如果没有看到红色的虚轮廓线,请检査是否选中了【查看】->【可视化 助理】->【不可见元素】选项。 图125红色的虚轮廓线表示表单 4)选定上面的表单,显示表单属性面板,如图12-6所示。 表单名称 动作 目标 form 方法p0sT MIME类型 图126表单属性面板
12.2.1 创建表单 （1）新建一个网页，将光标定位在希望表单出现的位置上。 （2）执行【插入】->【表单】->【表单】命令，或选择“插入”栏上的“表 单”类别，然后单击“表单”按钮。 （3）这时文档中将插入一个空的表单，如图12-5所示。在“设计”视图中， 红色的虚轮廓线表示表单。 注意：如果没有看到红色的虚轮廓线，请检查是否选中了【查看】->【可视化 助理】->【不可见元素】选项。 图12-5红色的虚轮廓线表示表单 （4）选定上面的表单，显示表单属性面板，如图12-6所示。 图12-6表单属性面板