实例Dreamweaver_制作表单页
图12-1 保存文件名为from 保存图12-2 在页面中插入表单域
说明表单域就是表单的范围,在网页中以红色虚线表示,也是插入表单元素的前提条件.代码中以<form> </form>格式表示.其作用就是把页面中输入的数据以电子邮件形式发送到邮箱中或直接传送到数据库中
4. 将光标停放到表单域中,选择常用面板上的
图12-3 在页面中插入表格和文本
在第2行第1 个单元格中输入文字"用户名:",然后单击表单面板中"文本字段插入文本框.
选中插入的文本框,打开属性面板,在"文本域"下面的文本框中输入"name",
在"字符宽度"文本框中输入"25";"类型"选择"单行"单选按钮;"最多字符数
图12-6 单选按钮属性设置
说明初始状态有两个选择，“已勾选”和“未选取中”。
单选按钮是在众多选
16.
按钮，在“省份：”旁边插入“列表
菜单”框，单击属性能面板上的按钮，打开“列表值”
黑龙江等，单击按钮可增加项目，单击按钮可删除项目，右边的两个按钮，可用来调整项目的上下位置。
如
图12-7 “单选按钮组”对话框图12-8 “列表/菜单”列表值设置
18. 单击“确定”按钮，返回属性面板，在“初始化时选取定”文本框中出现了刚才设置的项目标签。
然后在“列表/菜单”下面的文本框中输入“
图12-9 “列表/菜单”属性设置
图12-10 文件域属性设置
文件域是用来选择本地硬盘上文件夹目录地址，其后面跟着按
着单击表单面板上的“复选框”按钮，分别在各选取项前面插入复选取框。
钮，使表格中的内容都靠左对齐。
如图
行，然后单击表单面板上的“文本区域”按钮，插入文本域。
图12-11 选中表格单击“左对齐”按钮
26. 选中文本域，打开属性面板，在“文本域”下输入名称content，在“字符宽度”文本框中输入40，在“行数”中输入5，在“类型”选项中选择“多行”单选取按钮。
参数设置如图12-12所示。
图12-12 “文本域”属性设置
“按钮”按钮。
在表
图12-13 发送按钮属性设置
图12-14 完成后的表单页面
Dreamweaver MX 2004编辑窗口下，创建HTML网页。
保存页面，命名为form.htm。
在页面中插入表单域，然后插入表格。
在表格中插入各项表单元素及文字。
5.表单制作页面完成后，保存页面。
■创作
1. 根据本书配套光盘exp12-13\Site 12文件夹中提供的表单网页（如图12-15~图12-18所示），构思自己的调查表。
图12-15 表单页图12-16表单页
图12-17 表单页图12-18 表单页
2. 启动在Dreamweaver MX 2004，创建HTML网页。
3. 制作一个表单元页面，在网页中根据所设置的内容插入相应的表单元素。
Dreamweaver中如何创建表单和处理数据
Dreamweaver中如何创建表单和处理数据Dreamweaver是一种功能强大的网页开发工具，它提供了简便的界面和丰富的功能来创建网页。
在网页设计中，表单是一项重要的功能，可以让用户与网页进行交互，并收集用户提交的数据。
本文将介绍如何在Dreamweaver中创建表单，以及如何处理表单提交的数据。
第一章：创建表单Dreamweaver提供了简单的方式来创建表单。
首先，在Dreamweaver的工具栏上找到“表单”工具，点击它，然后在页面上拖动鼠标来创建一个表单区域。
接下来，通过在表单区域上点击右键，选择“插入表单元素”来添加各种表单元素，如文本框、下拉列表、复选框等。
在添加元素时，可以设置它们的属性，如名称、类型、默认值等。
第二章：表单验证表单验证是确保用户输入的数据符合预期格式和要求的重要步骤。
Dreamweaver提供了多种验证方法。
例如，可以使用Dreamweaver提供的预设验证规则，如必填字段、电子邮件格式验证等。
也可以自定义验证规则，通过正则表达式来验证输入的数据。
通过选择表单元素，然后在属性面板中选择“验证”选项，可以简单地配置表单验证。
第三章：表单布局好的表单布局可以提升用户体验，并使表单更易于阅读和填写。
Dreamweaver提供了多种布局选项。
可以使用表格布局，将表单元素放入表格单元格中。
也可以使用CSS布局，通过设置样式来控制表单元素的排列方式。
此外，Dreamweaver还提供了对响应式设计的支持，可以根据设备的屏幕尺寸来调整表单的布局。
第四章：处理表单提交数据当用户填写完表单并点击提交按钮时，需要将表单提交的数据发送到服务器进行处理。
在Dreamweaver中，可以使用服务器端脚本语言（如PHP、等）来处理表单数据。
首先，在服务器上创建一个接收数据的脚本文件，例如“process.php”。
然后，在表单的“动作”属性中设置为指向该脚本文件的URL。
这样，当用户提交表单时，表单数据将被发送到服务器上的脚本文件进行处理。
Dreamweaver 表单操作
字段集
使用字段集可以在页面中显示一个圆角矩形框，将一些表单 对象放在一起，起到分组的作用。实际操作中，先插入字段 集，然后再在其中插入表单对象。也可以先插入表单对象， 然后将它们选择再插入字段集。 选择【插入】/【表单】/【字段集】命令，或在【插入】/ 【表单】面板中单击 按钮，将打开【字段集】对 话框，在【标签】文本框中输入标签名称，然后单击 按钮插入一个字段集，如图所示。
选择【插入】/【表单】/【文本区域】命令，或在【插入】/【表单】面 板中单击 按钮，将在文档中插入文本区域。
单击并选中插入的表单对象，将显示其【属性】面板，如图所示。在 【属性】面板中，通过设置【类型】为“单行”或“多行”可以实现文 本域和文本区域之间的相互转换。【行数】选项用于设置文本区域的高 度。
“选定值”：设置在该复选框被选中时发送给服务器的值。 “初始状态”：确定在浏览器中载入表单时，该复选框是否被选中。
单选按钮和单选按钮组
单选按钮主要用于标记一个选项是否被选中，单选按钮只允许用户从选 项中选择唯一答案。单选按钮通常成组使用，同组中的单选按钮必须具 有相同的名称，但它们的域值是不同的。 选择【插入】/【表单】/【单选按钮】命令，或在【插入】/【表单】面 板中单击 按钮，将在文档中插入单选按钮。 单击并选中其中一个单选按钮，将显示其【属性】面板，如图所示。在 设置单选按钮属性时，需要依次选中各个单选按钮，分别进行设置。
隐藏域
隐藏域主要用来储存并提交非用户输入信息，如注册时间、 认证号等，这些都需要使用JavaScript、ASP等源代码来编 写，隐藏域在网页中一般不显现。 选择【插入】/【表单】/【隐藏域】命令，或在【插入】/ 【表单】面板中单击 按钮，将插入一个隐藏域。 单击选中隐藏域，将显示其【属性】面板，如图所示。
《Dreamweaver制作表单》教学设计
《Dreamweaver制作表单》教学设计作者：王丽莉来源：《黑河教育》2013年第07期教材分析《Dreamweaver制作表单》是中等职业制作网页的方法及过程专业教材《网页设计与制作》中第七章的内容。
在网页设计中，表单是一个专业网站必不可少的内容，是网站管理者与浏览者之间沟通的桥梁。
通过表单可以得到访问者的反馈信息，收集用户的反馈意见，在此基础上做出科学合理的决策。
本章内容主要涉及表单概述、创建表单、表单元素的插入及表单参数设置操作，其中创建表单页面是学习的主要内容。
学情分析职高学生喜欢亲自动手操作，但缺乏系统的分析能力，缺少从实践到理论的总结能力，因此本课教学要注重培养学生的协作讨论和分析问题能力。
教学目标知识与技能：理解表单的概念和作用；了解规划表单、创建表单与设置表单的方法；能使用“Dreamweaver”制作表单网页。
过程与方法：采用知识迁移，对比引入；开展任务驱动，学习新知；进行问题探究，突破难点，巩固所学。
情感态度与价值观：培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力。
教学重难点重点：创建表单。
难点：表单元素的插入。
教学过程一、创设情境，导入新课教师利用大屏幕展示生活中常见的各种表单页面，让学生一边欣赏一边思考：这些常见的页面能实现什么功能？在网页设计中怎样实现这些功能？以此激发学生的学习兴趣，导入本节学习内容——制作表单页面。
【设计意图】这一环节，通过展示图片，从现象到本质总结出表单在我们生活中的实用性，锻炼了学生的归纳总结能力，激发了学生学习新知的欲望，为后面的学习做了铺垫。
1.表单创建的作用在网页制作中，表单主要作用就是收集来自用户的信息，例如用户名、密码、电子邮箱地址、兴趣、爱好等等，主要完成调查、注册、搜索、订购等功能，它是网站管理者与浏览者之间沟通的桥梁。
让学生举例说明在生活中常见的表单有哪些？2.认识表单元素表单域；文本域；单选按钮；复选框；文件域；提交按钮。
Dreamweaver表单创建与设置
Dreamweaver表单创建与设置
一、表单的创建方法：
点击“插入”-“表单”，如下图所示。
这样表单就插入了，也可以点击“插入栏”-“表单”，如下图所示。
点击“表单”按钮，这样表单也能被创建，效果如下图所示。
二、设置表单的属性
在“属性”面板上，表单的属性如下图所示。
各参数含义如下：
1.表单名称：设置表单的名称，可用于处理程序的调用。
2.动作：指定处理表单的程序。
3.目标：与超链接的目标一样。
4.方法：表单的发送方式有POST和GET两种。
.POST用于发送长字符的表单内容，因此在发送时比GET安全，但是用POST方法发送的信息是未经加密的。
.GET用于发送较短字符的表单内容，若发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。
5.MIME类型：是指定对提交给服务器进行处理的数据使用的编码类型。
有pplication/x-www-form-urlencoded和multipart/form-data两种。
网页设计 第10章 Dreamweaver的表单和行为
10.2 Dreamweaver的行为
10.2.5 应用行为 选择网页中要附加行为的对象（如图像或链接），然后在 “行为”面板中单击“添加行为”按钮，从弹出菜单中选择 要附加的行为。当选择某个动作时，将会弹出一个相应的对 话框，显示该动作的参数和说明。在对话框中进行参数设置 后，单击“确定”按钮，即可完成附加行为的操作。 10.2.6 修改事件 添加了行为后，用于触发该动作的默认事件会显示在“行为” 面板“事件”栏中。在“事件”栏中单击要应用的事件，然 后单击该事件右侧出现的下拉按钮，在弹出的下拉列表框中 选择另一个事件,即可修改触发事件。
10.1 Dreamweaver的表单页面制作
10.1.2.2 创建文本区域 选择“插入”→“表单”→“文本区域”命令。此 时的属性检查器显示该文本区域的属性。其中的 “字符宽度”和“行数”用于设置该文本域的宽度 和高度。如图。
10.1 Dreamweaver的表单页面制作
10.1.2.3 创建复选框 选择“插入”→“表单”→“复选框”命令。此时 的属性检查器显示该复选框的属性。其中的“初始 状态”可以设置为默认的“已勾选”或“未选中”。 如图示。
10.3 Dreamweaver行为的应用实例
（5）选择“命名的层”中的层“hua”，点击“显示”按钮， 点击“确定”后，在行为面板上出现了一行已设置的行为， 如图。表示为当鼠标滑过“花”字单元格时，显示层“hua”。
10.3 Dreamweaver行为的应用实例
（6）重复步骤（4），在“显示—隐藏层”对话框中选择“命 名的层”中的层“hua”，点击“隐藏”按钮，点击“确定” 后，在行为面板上出现了第二个设置的行为。表示为当鼠标 滑过“花”字单元格时，隐藏层“hua”。 （7）点击新的行为中的事件列表，选择“onMouseOut”，将 其修改为“当鼠标离开”时隐藏层“hua”。如图（a），设 置完成之后的行为面板如图（b）。
Dreamweaver制作表单
实验8 Dreamweaver网页制作
一实验目的
掌握网页制作软件Dreamweaver的基本使用方法。
二、实验内容
设计效果不要求与图示完全一致，可根据自己的喜好调整。
素材利用现的电脑资源。
1. 做一个表单，要求密码在输入时为符号，性别只能选中一个。
其中“重置”、“提交”为二个按钮，功能不需具体实现。
如下图所示。
保存成form1.html.(注：所有的元素都必须在表单内（红色虚线内）)
操作提示：插入表单：插入｜表单
2. 做一个表单设计一个会员注册页面，所有内容放在一个3行1列的表格中，如下图所示。
要求密码在输入时为符号，性别只能选中一个。
其中“重写”、“放弃”、“提交”为三个按钮，功能不需具体实现。
保存成form2.html.(注：所有的元素都必须在表单内（红色虚线内）)，
3.设计如下图所示的网页，插入框架。
“猫咪相册”、“狗狗影集”和“白兔写真”超链接
到具体的内容。
操作提示：（1）插入框架：插入｜html|框架。
（找到合适的框架插入）
（2）框架保存：文件｜保存全部（注：三个区域，四个html文件）
（3）框架里的超链接：选中要超链接的文字，链接到具体的页面（具体的网页页面要自己再创建），链接目标选择mainframe.
交作业时，将本次课程中完成的姓名文件夹压缩（压缩文件名为学号后3位+姓名，如：101张三）后上传到FTP的相应班级文件夹中。
传错位置或文件命名不正确将视为未交作业！！。
Dreamweaver_网页设计制作表单页面(PPT38页).pptx
第2讲 插入各种表单元素
7.2.1 动作：用于设置处理表单的服务器端 插入 脚本的文件路径。 表单
第2讲 插入各种表单元素
7.2.1 方法：表单提交的方法 插入 ➢ Post 表单信息将以文件的形式提交 表单 ，一般建议使用Post方式提交表单。
➢ Get 将浏览者提供的信息附加在URL 地址的后面提交到服务器，为默认提 交方式，但不能超过8192个字符，且 不具有保密性。
第1讲 表单的概念
表单 ➢ 服务器端处理
的处
若表单指定通过服务器端的脚本
理方 程序进行处理，则该程序处理完毕后
式
将结果反馈给浏览器（即用户看到的 反馈结果）
➢ 客户端处理
若表单指定通过客户端（即用户
方）的脚本程序处理，则处理完毕后 也会将结果反馈给用户。
第1讲 表单的概念
两种 ➢ 服务器端方式：主要优点是能全方
单选 要点：
按钮
1. 插入：“快捷工具栏”表单→“单 选按钮”
2. 名称(name)：在验证用户提交表单
或服务器脚本处理表单时用于区分单
选框内容。同一组单选按钮应具有相
同的名称。建议采用驼峰式命名方式
。
第2讲 插入各种表单元素
7.2.6 3. “选定值”：单选框选项的值。单 插入 选框所提交的内容为单选框的值，而 单选 不是单选框的名称。
第1讲 表单的概念
工作 表单的工作过程如下：
过程
➢ 访问者在浏览有表单的网页时，可 填写必须的信息，然后单击“提交”
按钮。
➢ 这些信息通过Internet传送到服序对这些数据进
行处理，如果有错误会返回错误信息
，并要求纠正错误。
Dreamweaver表单制作
9.6 插入列表和菜单
9.6.1 插入列表/菜单
列表和菜单菜单都属于HTML表单菜单，对应的标签为 <select></select>。
列表和菜单的区别在于：一种菜单是用户单击时下拉的， 称之为下拉菜单或下拉列表；另一种菜单则显示一个列 有项目的可滚动列表，用户可从该列表中选择项目，称 之为滚动列表或者列表菜单。
个保留名称，如果名称为“提交”，单击时就通知表单将表单数 据提交给处理页面，功能就相当于submit；如果名称为“重置” ，单击时就将所有该表单域内的表单对象值重置，功能相当于重 置按钮。
“源文件”：指定要为该按钮使用的图像。
“替代”：用于输入描述性文本，一旦图像在浏览器中载入失败， 将显示这些文本。
次序 。
“布局，使用”：用来设置单选按钮组的布局方式，选择“换行 符”则使用换行符，竖项排列，否则使用表格。
提示：
一旦单选按钮被选择，同一组的单选按钮将始终有一个处于选中状 态，除非点击重置按钮进行重新设定。比如，男女性别两个单选 按钮，初始状态是两个都不选中，选中男后女不被选中，选中女 后男不被选中，总有一个处于选中状态，只有重置才能回到两个 都不选中的初始状态。
各设置项如下所示。
图9.19 “单选按钮组”对话框
图9.20 单选按钮组效果
“名称”：用来设置单选按钮组的名称，名称要唯一。
“单选按钮”：单击“＋”，添加单选按钮，“Label”列是单
选按钮的文本说明，“Value”列是单选按钮的值。单击“－”
删除选择好的单选按钮。通过单击
按钮来调整单选按钮的
“列表值”：单击该按钮，打开一个“列表值”对话框 ，如9.24图所示。单击“＋”按钮增加列表值，单击“ －”按钮删除列表值。“项目标签”指用户看到的列表 项目的文本，“值”指的是该项目所要传递给处理页面 的信息（如网址、出身地址等）。
《使用Dreamweaver制作网页》之表单的使用
通过本课学生们的操作过程，反映出一定的问题，在今后的教学中应注重培养学生的观察力，多听多看，不仅要提高专业技能素养，还有不断提升自身的艺术修养，使作品具有一定的观赏性、艺术性及实用性。
（三）能力拓展，完善制作
师：通过之前的分析与操作，小组讨论完成，按钮及文本域部分的制作。
生：单击”插入”栏的”表单”类别中的”按钮”图标。
单击”插入”栏的”表单”类别中的”文本域”图标。
（四）完成作品，相互评价
通过小组合作，最终完成作品，在相互展示作品的同时，不断完善自身能力。
五、总结归纳
总结本节课知识要点，并通过学生作品，归纳不足之处，使学生不断提升自己，增强学生的学习兴趣。
学情分析：通过前几节课的学习，学生已经对表单的功能有了清楚的认识，掌握了表单元素各自的特性，绝大多数学生理论基础扎实，操作能力需通过具体实例制作过程来进一步完善加强。
教学目标：1、通过制作注册页面，能够合理运用表单。
2、根据网页中各部分的功能选择适合的表单元素。
3、通过分析、讨论、操作，培养学生的技能素养；通过小组实验，培养学生的合作意识和探究意识；通过任务驱动的教学模式，使学生在不断解决难题的同时拥有成就感，从而激发学生的学习欲望。
生：先插入表单，再通过表格对表单进行布局。
【自主分析】插入表单的方法：单击”插入”栏的”表单”类别中的”表单”图标。
师：介绍插入文本字段的方法。
【教学展示】单击”插入”栏的”表单”类别中的”文本字段”图标。
师：通过对文本字段的属性设置，请同学们讨论分析如何设置密码部分。
生：单击”插入”栏的”表单”类别中的”文本字段”图标，然后在属性检查器中设置文本域的”类型”为”密码”。
教案设计
《使用Dreamweaver制作网页》之
Dreamweaver中表单制作
4．列表/菜单的属性设置 (1)在“文档窗口”的表单区域插入列表/菜单表单对象，例如在文字“年龄： ”后插入列表/菜单，如左图所示。
（2）用“属性面板”对列表/菜单属性进行设置，例如将“列表/菜单”设置为 “age”，“类型”为“菜单”，如右图所示。
在“列表/菜单”为列表/菜单的名称，“类型”为“菜单”和“列表”可选， “列表值…”为可选的列表值。 （3）设定“列表值…”。单击“属性面板”中“列表值…”按钮，出现“列表值 ”对话框，单击“+”按钮依次添加“项目标签”和“值”，如图所示，单击确 定完成设置。注意：值是各不相同的。
(2)在“属性面板”中对单选按钮进行设置，例如将“男”前的单选按钮的“单选 按钮”、“选定值”和“初始状态”依次设置为“sex”、“male”和“未选中(U)”， 如右图所示，回车后完成设置。
其中“单选按钮”为单选按钮的名称，在同一组的单选按钮名称必须相同； “选定值”为该按钮被选时的取值；“初始状态”有“已勾选(C)”和“未选中(U)” 两种，“已勾选(C)”表示在浏览时单选按钮的显示为勾选状态，“未选中(U)”表 示的是状态。 3．复选框的属性设置 （1）在“文档窗口”的表单区域插入复选框表单。例如在文字“爱好：”后 ，“上网”等文字前分别插入如图所示的复选框。
隐藏域：允许设计者存储应用程序在处理表单时所需要的信息。 文本字段和文本区域：接受任何类型的文本、字母和数字。文本字段为单 行、密码保护，文本区域为多行。 复选框：在一组选项中选择多项。 单选按钮：在一组选项中一次只能选择一项。 列表/菜单：从提供一组选项中选择一项或多项。 跳转菜单：菜单上的每一项链接到一个文件，从中选择一项将跳转到被链 接的网页。 图像域：可以用来替换提交按钮。 文件字段：允许读者在自己的硬盘上浏览文件，并作为表单数据上传。 按钮：单击时执行提交或重置表单之类的任务，可以输入自定义的按钮标 签，或使用Dreamweaver MX的预定义标签。