07第7章制作表单网页.
第7章 关联与表单
7.2.3 定制表单内容
在“编辑表单项”对话框中单击“添加表单 项”按钮，打开“添加表单项”对话框，在其中 可设置表单的名称、描述、类型和取值（用于确 定表单的取值范围，该值主要对单选框、复选框、 下拉框有效），单击“保存”按钮。
编辑完表单后单击“确认”按钮，再单击 “预览”按钮，在预览中可输入设置的内容，如 前面设置的姓名，单击“确认”按钮，数据即提 交至后台服务器中。
8
7.1.4 基础属性关联
2. 自动关联
自动关联是一种更加便捷的方式，可自动对关联属性和被控制对象进行关联，如通过拖动 进度条来控制动画的播放。
①绘制关联对象
②设置关联属性
③查看效果
9
目录
7.1 关联 7.2 表单
7.2.1 自定义表单
1. 输入框
输入框是表单中的一种常 见组件，提供了一个可编辑的 区域，用户可以在其中输入相 关信息以响应特定的表单字段， 可输入的信息类型包括普通文 本、文本域、电话号码、电子 邮箱、日期、时间、数字等。
现代
第7章
关联与表单
H5 页面设计（Mugeda 版）（微课版）
数字
编著
技术
目录
7.1 关联 7.2 表单
7.1.1 舞台动画关联
• 关联即互相贯连，是指事物之间互相牵连和影响。
• 在Mugeda中，关联是指通过连接和交互来建立页面元素之间的逻辑关系和互动效 果。
• 设计师使用Mugeda的关联功能可实现更复杂和丰富的H5 页面效果。
7
7.1.4 基础属性关联
1. 公式关联
在“关联方式”下拉列表中选择“公式关联” 选项，在下方将出现“被控量=”选项，在右侧 的文本框中可通过输入关联公式来完成公式关联， 如设置“被控量=”为“关联属性”，以右图所 示的数据为例，被控对象的值等于“文字1”的 “旋转角度Z”的值。同理，若设置“被控量=” 为“关联属性×3”，即被控对象的值等于“文 字1”的“旋转角度Z”值的3倍。
创建表单网页
第7章创建表单网页7.1 任务题目灵活运用各种表单域创建表单。
7.2 任务导入表单是用于实现网页浏览者与服务器（或者说网页所有者）之间信息交互的一种页面元素，在WWW 上它被广泛用于各种信息的搜集和反馈。
例如，图7-1 显示了一个用于进行电子邮件系统登录的表单。
通常，一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。
图7-1 用于进行电子邮件系统登录的表单7.3 任务目标1．目的（1）掌握表单的概念。
（2）掌握表单的类型。
（3）掌握表单的创建。
（4）掌握各类表单对象的实际应用范围。
2．重点（1）掌握如何在表单网页中插入表单域。
（2）掌握如何在表单域中插入文本域和文本区域。
（3）掌握如何在表单域中插入单选按钮、单选按钮组和复选框。
（4）掌握如何在表单域中插入列表/菜单、按钮和图像域。
3．难点（1）表单对象的属性设置。
（2）表单对象的灵活运用。
7.4 技能目标1．使学生具有设计表单页面的能力。
2．使学生熟练表单的创建和使用方法。
3．使学生熟悉各种表单域的使用和属性设置。
7.5 任务讲析7.5.1 实例演练——问卷调查表【任务一】设计思路◆新建网页1．在D盘创建新文件夹名为“任务7-1”，作为站点文件夹用于存放站内的文档。
2．启动dreamweaverCS3软件，新建一个文档，命名为“index.html”，且将该网页保存在“任务7-1”文件夹中，页面标题设置为“表单”。
◆插入表单域[1]1．如果网页“index.html”处于关闭状态，则先打开该网页，然后将光标置于要插入表单域的位置。
2．在Dreamweaver CS3主窗口中，单击菜单【插入记录】>【表单】>【表单】，在光标处插入一个表单域。
3．设置表单域属性[2]将光标置于表单域中并单击鼠标左键，即可看到表单域【属性】面板。
4．在表单域中插入定位表格，输入“畅游旅行社调查表”、“姓名”等提示信息光标置于表单域中，插入一个11行2列的表格，且将第一行及最后两行的单元格合并，表格的“填充”文本框中输入“1”、“间距”文本框中输入“2”、“边框”文本框中输入“5”、“边框颜色”文本框中输入“#FF9900”，对齐方式为“居中对齐”。
第7章 制作表单页面
7.6添加单选按钮和单选按钮组
图 7.29 修改单选按钮的属性
图 7.30 添加的单选按钮
7.6.1 添加单选按钮
7.6添加单选按钮和单选按钮组
除了逐个添加单选按钮外，还可以通过插入“单选按钮 组”的方式插入一组单选按钮，这样可以减少插入单选按钮 的错误。 (1)将光标置于要插入单选按钮组的位置，然后单击“表 单”插入工具栏上的“单选按钮组”按钮 ，此时将打开“单 选按钮组”对话框，如图7.31所示。 (2)在“单选按钮组”对话框中进行设置。 (3)单击对话框中的“确定”按钮，就会在光标所在的位 置上出现一组单选按钮组，如图7.32所示。
7.7.2 添加列表
7.7添加菜单和列表
如果在按住Ctrl键的同时单击选项，可以选中不相邻的 选项，再次单击就会取消选择，如图7.40所示。
图 7.39 按住 Shift 键选中选项
Chapter 07 制作表单页面
知识点：
关于表单 确定页面布局 添加表单域 添加文本域 添加复选框 添加单选按钮和单选按钮组
添加菜单和列表 添加其他表单域 插入按钮 添加图像域 制作跳转菜单 添加搜索引擎
7.1关于表单
在申请E-mail邮箱时，往往会要求填写一些个人信息，如
7.7.1 添加菜单
7.7添加菜单和列表
(3)当所有的选项设定好后，就可以单击“确定”按钮关 闭对话框。 (4)此时“初始化时选定”列表中就会出现刚设定的菜单 项目。这里选择“北京”作为默认的省份，设定菜单的名称 为province，在“类型”选项组中选择“菜单”单选按钮， 如图7.37所示。
7.7.1 添加菜单
(1)选中上面创建的“姓名”文本框，然后用快捷键
第7章 表格与表单
7.1 表格标记
• 7.1.2 <table>标记的属性
4、width与height属性 默认情况下，表格的宽度和高度靠其自身的内容来支撑。要想更
width height align
bgcolor
设置表格的宽度 设置表格的高度 设置表格在网页中的水平对齐方式
设置表格的背景颜色
像素值
像素值
left、center、right 预定义的颜色值、十六进制#RGB、 rgb(r,g,b)
background 设置表格的背景图像
url地址
7.1 表格标记
第七章 表格与表单
表格的创建 表单样式的控制 表单相关标记
表格样式的控制
7.1 表格标记
• 7.1.1 创建表格
• 在HTML网页中，要想创建表格，就需要使用表格相关的标记。创建表格的基本语法格式如 下：
<table> <tr> <td>单元格内的文字</td> ... </tr> ...
</table>
7.1 表格标记
• 7.1.1 创建表格
• 在上面的语法中包含三对HTML标记，分别为<table></table>、<tr></tr>、<td></td>，他们是 创建表格的基本标记，缺一不可，下面对他们进行具体地解释。
【任务7-2】创建用户注册的表单网页
CSS代码 section {
display: block; position: relative; margin: auto; }
.form-m li { padding-top: 5px; padding-bottom: 5px; margin: 0 auto; line-height: 40px; position: relative; *zoom: 1; color: #666; clear: both;
01
案例教学
制作一个备
9 《网页设计与制作项目驱动教程（第3版）》
操作准备 01 创建所需的
文件夹和复 制所需的资 源
03创建本地站点
02 启动
Dreamweaver
10
引导训练
11
引导训练 项目描述
1、创建样式文件base.css和main.css，在该样式文件中定义标签的属性、 类选择符及其属性。 2、创建网页文档0702.html，且链接外部样式文件base.css和main.css。 3、在网页0702.html中添加必要的HTML标签和插入表单及表单控件。 4、该网页包含表单及多个表单控件，用于实现用户注册功能。
<link type="text/css" rel="stylesheet" href="css/base.css"/> <link type="text/css" rel="stylesheet" href="css/main.css"/>
16 《网页设计与制作项目驱动教程（第3版）》
（4）在网页0702.html中添加必要的HTML标 签与输入文本内容
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传送到服序对这些数据进
行处理，如果有错误会返回错误信息
，并要求纠正错误。
制作表单网页
实验七：制作表单网页一、实验任务：1、完成【任务7-1】。
2、根据任务7-1的制作，请说明表单都包括哪些不同类型的表单元素（对象）。
3、以申请邮箱为例，说明表单的工作原理。
二、实验步骤：1、先将光标置于表格二,点击插入表单，再进行代码的编辑。
2、点击所插的表单代码点击属性，设置表单属性。
3、将光标放在所要插文本框的地方,点击插入,表单,文本,点击文本框,设置属性。
4、将光标置于合适位置,点击插入表单，点击文本区域，点击文本区域,设置文本区域属性。
5、将光标置于性别后的单元格中，点击插入表单，再点击单选按钮，点击插入的按钮，设置属性。
6、点击你的年龄的单元格，插入表单里的单选按钮组，设置其属性7、在你最喜爱的出行工具后依次插入单选按钮组，编辑属性。
8、点击表单插入复选框,编辑复选框,设置属性。
9、以同样的方法编辑你最想去旅游的地方，设置其按钮属性。
10、在所在省份后单元格内点击插入表单中的选择按钮，编辑其属性，在列表值中编辑其所要添加的省份。
11、以同样的方法编辑你的职业12、在表格最后插入提交、重置、关闭按钮并设置其分别设置其属性。
13、预设文本框中文字字体和大小，在代码视图中打入代码。
14、选中标签，点击窗口行为按钮，点击添加行为，检查表单，再将所要必需填入的选项选中15、进行javascript的设置16设置动态网页在代码视图中打入代码。
验证表单数据，输入代码在提交按下的代码即可检查3、以申请邮箱为例，说明表单的工作原理。
表单一般是为了创建文本域，密码域，单选按钮，复选框，按钮以及其他对象。
表单主要是用来得到用户的反馈信息，比如进行会员注册，网上调查，信息反馈，还有搜索。
使用表单必须具备两个条件：1，建立含有表单元素的网页文档2，具备服务器端的表单处理应用程序或客户端的脚本程序，可以处理用户输入到表单的信息三、实验体会本次实验让我看到了表格在生活中应用，并让我明白了制作网页不是草草了事即可，让我明白了应该更加认真对待我的期末报告。
《制作表单网页》教学设计范文
《制作表单网页》教学设计一、教学设计部分本课的主要内容与地位本课主要的内容涉及表单的插入和表单数据的收集两个方面的内容。
教学目的是以表单的形式完成对网站的评价。
本课与前后内容的关系最后生成能够实现交互的动态网页，是学生在学习静态网页制作基础之上的知识提升。
知识目标/技能目标知识目标了解表单的交互作用。
技能目标掌握在网页中插入表单的一般操作；学会正确设置表单信息的收集方式。
过程与方法目标通过学习网页表单的设计，学会与人交流，正确收集反馈意见。
情感态度与价值观目标能够正常对待自己的缺点和别人的优点，取人之长、补己之短。
学无止境，让自己不断在进步中成长。
本课的重难点重点：表单的设计；表单数据的收集；难点：表单控件的参数设置。
本课的课时分配建议一课时教法建议由于本节课学习的内容是创建一个动态网页，出现了很多前面没有出现的概念和术语，所以建议教师在讲解时注意对相关知识的补充和拓展。
在讲解组件属性的修改时建议仍以分组探究的形式进行，通过各组之间的对比加深学生对相关知识点的掌握。
在设置表单信息的收集部分，只有网页真正发布以后才能看到信息收集的情况，所以建议教师在教师机器上设置一个能正常访问的网站，预设一个表单网页，然后通过学生的访问表单网页留言，提醒学生时刻关注_private文件夹中form_results．txt和指定的电子邮箱内容的变化。
教学环境准备建议教师机：Windows 2000 Server（安装FrontPage服务器扩展插件）。
自评、互评、师评要注意的问题学生能否完成表单网页的设计和表单数据的收集方法的设置，并且针对设计中存在的问题能否提出建设性的意见和建议。
本节内容涉及网页的交互，为学生下一步学习动态网站的设计起到承上启下的作用，在教学中应注重讲清表单网页的工作原理。
二、补充资料部分网页表单基础知识表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
网页设计与制作第7章表单精品PPT课件
属性
值
描述
action
URL 规定当提交表单时，表单域数据的接收地址。
method
get post
规定如何发送表单域数据。
name
文本 规定表单域的名称。
2010网页设计与制作
第7章
4
7.3 输入标签
基本格式：<input /> 作用：标签用于搜集用户信息。 根据不同的 type 属性值，输入字段拥有很多种形
基本格式：
<form>
<label for="male">Male</label> <input type="radio" name="sex" id="male" />
</form>
作用：label不会向用户呈现任何特殊效果。不过，当用户 选择该标签时，浏览器就会自动将焦点转到和标签绑定的表 单元素上。
表单域标签中必须设置enctype="multipart/formdata"来保证文件被正确编码。另外，表单的传送方式必须 设置为post。
属性
值
描述
accept
文件类型值 规定提交的文件类型。
2010网页设计与制作
第7章
10
7.3.6 隐藏域
基本格式：
<input type="hidden" />
作用： 定义隐藏字段。隐藏字段对于用户 是不可见的。隐藏字段通常会存储一个默认 值。
2010网页设计与制作
第7章
11
7.4.1 表单元素分组
基本格式：
<form> <fieldset>
表单网页的制作方法
表单网页的制作方法教学目的：1、理解表单的概念及作用；2、熟悉表单字段的种类和功能；3、掌握表单网页的制作方法。
教学重点：1、表单作用的理解和表单网页的制作。
2、如何验证表单元素的正确性。
教学难点：1、如何将表单具体应用，设计出精美网页。
2、如何验证表单元素的正确性。
新课内容：一、表单的概念及作用表单（Form）是一种结构化的文件，用于收集和发布信息。
它是网站管理员与访问者进行交流的一种媒介，通过访问者填写表单中的选择题、填空题和问答题，网站管理员可以收集到来自世界各地的资料和意见。
目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。
在表单中经常出现的字段有：单行文本框、多行滚动文本框、单选框、复选框、下拉列表框和按钮。
二、HTML表单设计基础表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。
一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。
用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的CGI接口传到Web服务器上。
网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。
对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。
表单中主要包括下列元素：button——普通按钮radio ——单选按钮checkbox——复选框select ——下拉式菜单text ——单行文本框textarea——多行文本框submit——提交按钮reset——重填按钮用HTML设计表单常用的标记是：<form>、<input>、<Option>、<Select>、<textarea>和<isindex>等标记。
1、<form>表单标记该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。
第7章 制作表单页面
了解表单的工作原理
一个完整的表单应该包含两个部分：
在网页中进行描述的表单对象 应用程序，它可以是服务器端的， 也可以是客户端的，用于对客户 信息进行分析处理。
了解表单的工作原理
浏览器处理表单的过程一般是：
用户在表单中输入数据，然后提交 表单，浏览器根据表单体中的设置 处理用户输入的数据。
练习思考
制作表单页面的第一步是什么？ 每个表单都是由一个表单域和若干 个表单元素组成的，所有的表单元 素要放到表单域中才会有效，因此， 制作表单页面的第一步是插入表单 域。
练习思考
表单提交有哪两种方法？ 答：两种方法是Post和Get。 Post表单信息将以文件的形式提交 Get将浏览者提供的信息附加在URL地 址的后面提交到服务器
练习思考
选择题 如果需要获取登录的用户输入的密码， 在表单文本字段的“属性”面板上应 选择（ B ）。 A B C D
实训操作一
制作如下图所示的表单页面。
实训操作二ຫໍສະໝຸດ 练习制作锚点链接 练习制作图像映射
了解表单的工作原理
表单的工作过程如下：
访问者在浏览有表单的网页时，可填写 必须的信息，然后单击“提交”按钮。 这些信息通过Internet传送到服务器上。 服务器上专门的程序对这些数据进行处 理，如果有错误会返回错误信息，并要 求纠正错误。 当数据完整无误后，服务器反馈一个输 入完成信息。
了解表单的工作原理
若表单指定通过服务器端的脚本程 序进行处理，则该程序处理完毕后 将结果反馈给浏览器（即用户看到 的反馈结果） 若表单指定通过客户端（即用户方） 的脚本程序处理，则处理完毕后也 会将结果反馈给用户。
了解表单的工作原理
制作交互功能的网页—表单网页的制作
教学课题：制作交互功能的网页——表单网页的制作教学背景：在此之前，学生已经对制作网页的基本方法有了清楚地认识，并基本完成了自己的站点，此内容是网页制作部分的进一步提升，让学生对网页制作进行更加深入的探究和制作，通过学习制作具有交互功能的网页，进一步感受网页制作的乐趣，激发更大的创造热情，培养学习兴趣。
教材分析：本节课是苏教版初中信息技术（下册）第十章“主题网站设计”的第2节“制作网站”中的第5小节，在本章节中起着承上启下的作用。
在前面几小节，已经介绍了如何规划网站、如何建立站点及基本网页的制作，这节课通过学习表单网页的设计，学会与人交流，正确收集反馈意见。
在后续的课程中继续对网页制作进行深化，本节课又为后续课程奠定了基础。
学生分析：学生在学习本节内容之前，已经学习过因特网的相关知识、会上网，并且已经掌握常用网络工具软件的使用，如QQ、E-mail等等，并且有着浓厚的兴趣。
大部分学生只停留在利用QQ聊天、进行网络游戏、收发E-mail等阶段，对申请QQ号码和E-mail时的网页结构形式知之甚少。
在设计之前应让学生看或简单完成几个平时他们并不陌生的这类网页，并告诉他们很快他们自己也能成为这类设计的幕后策划者，使得同学们对本课的学习充满期待，绝大多数学生都有亲自动手一试的欲望。
教学目标：1.知识与技能：了解交互网页概念，学会表单的功能及表单元件的使用方法；掌握表单元件的功能及使用方法，掌握表单各组件属性设置方法。
2.过程与方法：通过学习与创作，使学生感受表单在网页中的作用，体验网页的交互功能。
3.情感态度与价值观：通过“动物保护知多少”表单网页设计，让学生在运用、学习、制作的过程中感受表单给网页带来的交互作用，逐步提升环保意识。
4.行为与创新：网页的设计模式不是单一的，可以让学生自己有所发挥，培养学生的信息素养和用信息技术解决问题的能力。
教学策略：在教学中有效利用互联网，鼓励学生利用互联网进行自主探究，帮助学生丰富知识体系，多引导，多交流，在平等和谐的环境中逐步击破各个知识要点，理解表单网页的作用及制作方法。
网页制作(第7章)
第7章表单【学习目标】（1）了解表单的功能（2）熟悉各种表单对象的功能（3）掌握各种表单对象的使用动态网页通常要实现信息的交互，表单（Form）是获取用户信息并和用户进行交互的有效方式，在网络中应用非常广泛。
本章将详细介绍表单的创建以及各种表单对象的制作方法。
7.1创建表单表单有多个表单对象组成，其中包括文本框、单选按钮、复选框等。
表单的主要功能是收集用户的信息，如用户名、密码、E-mail地址等。
图7-1所示的是淘宝网新会员注册的页面。
图7-1 会员注册在讲具体的表单对象制作之前，让我们先来学习如何创建表单和设置表单属性。
7.1.1制作表单域在Dreamweaver CS4中，创建表单可以采用如下两种方法来实现。
方法1：单击【插入】|【表单】命令菜单，然后在弹出的下拉菜单中选择表单对象，如图7-2所示。
方法2：在【插入】面板中选择【表单】选项，然后选择插入“表单域”，如图7-3所示。
图7-2 插入表单图7-3 【插入】面板7.1.2设置表单属性单击红色虚线，选中表单，在【属性】栏中：【表单ID】：设置表单名称。
【方法】：设置表单数据的传输方法。
【目标】：设置打开页面的方式。
【编码类型】：设置MIME编码类型”。
表单属性如图7-4所示。
图7-4 设置表单属性7.2 创建表单对象表单对象通常是插在表单域中，也即表单域可看作是表单对象的容器。
在本小节中，我们来学习各种表单对象的创建。
7.2.1制作文本域文本域用来输入文本，是表单中常用的对象之一，主要包含单行文本域、密码域和多行文本域。
制作文本域的具体步骤如下：第1步：将光标放在表单域中，单击【插入】|【表单】|【文本域】命令菜单，如图7-5所示。
第2步打开【输入标签辅助功能属性】对话框，如图7-6所示。
【输入标签辅助功能属性】对话框中各主要参数的含义如下：【ID】：文本域的名称。
【标签】：表单对象的提示文本，例如：用户名。
【样式】：针对代码视图中的label标签而言的，这里使用默认设置。
第7课制作表单网页
临沭街道周庄中学教师课时备课学科：信息年级：八学期课时总编号：07 课题第7课制作表单网页主备人王洲使用人王洲课时第1课时（总1课时）课型新授课时间10.22教学目标知识目标了解表单的交互作用。
技能目标1. 掌握在网页中插入表单的一般操作；2. 学会正确设置表单信息的收集方式。
情感态度与价值观目标能够正常对待自己的缺点和别人的优点，取人之长、补己之短。
学无止境，让自己不断在进步中成长。
重点难点重点：表单的设计；表单数据的收集；难点：表单控件的参数设置。
教法学法任务驱动法、演示法；自主探究、小组合作学习。
环节教师活动学生活动估时情境创设，激发兴趣引导学生“读一读”师：经过前面六课的学习，我们已经初步掌握了网站设计和制作的一般步骤。
我们的网站做得怎么样？有哪些地方需要改进呢？如果别人给我们提出意见和建议，通过什么途径反馈更方便呢？这就是我们本节课要学习的内容——制作表单网页研读材料，思考问题。
5自主探究，交流分享教师先向学生展示一个设计好的表单网页，并输入内容，提交表单，让学生对表单有一个初步认识。
任务一：在网页中插入表单师：这样的网页我们能做出来吗？请大家根据教材提示插入一个表单，出现教材图1-7-3的效果。
教师巡视指导师：现在的效果是否可以称之为表单呢？师：对，我们还需要在特定位置插入若干表单中的重要元素——控件。
请大家根据教材提示插入一个表单，出现教材图1-7-5的效果。
教师巡视指导任务二：设置表单信息收集方式师：我们设计的表单网页是让访问者给我们反馈信息。
那么，这些信息出现在哪里？我们如何获得这些信息呢？请大家认真学习并实践“表单属性”，根据教材中的要求，完成信息收集方式的设置。
教师巡视指导师：大家想不想验证一下自己的表单是效果呢？请根据第六课中所学知识，把你制作的网页上传到自己的风韵空间中。
观察，思考分组合作，根据教材提示插入表单，并设计表单的版面分组合作，根据教材提示插入表单中的控件。
分组合作，根据教材提示设置反馈信息的收集方式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第7章制作表单网页通常，一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。
【教学导航】7.1课前准备7.1.1新建一个站点（1）在本地硬盘创建文件夹（2）启动Dreamweaver CS3（3）创建名称为“E游调查”的本地站点7.1.2新建一个网页文档index0701.html第7章制作表单网页（1）新建一个网页文档（2）设置网页标题（3）保存该网页。
7.1.3在网页中插入表格1、在网页index0701.html中插入表格12、在网页index0701.html中插入表格23、在网页index0701.html中插入表格34、在表格3中插入表格3-1（1）插入4行1列表格3-1（2）在表格3-1第1行的单元格中插入表格3-1-1（3）在表格3-1第3行的单元格中插入表格3-1-3（4）在表格3第2行的单元格中插入表格3-1-2（5）在表格3第4行的单元格中插入表格3-1-47.2课堂引导训练及评价【课堂引导训练任务描述】1、网页制作任务卡网页制作任务卡如表7-5所示。
表7-5网页制作任务卡1771782、网页制作任务跟踪卡网页制作任务跟踪卡如表7-6所示。
表7-6 网页制作任务跟踪卡【网页效果展示】网页“index0701.html ”的预览效果如图7-2所示。
图7-2 网页“index0701.html ”的预览效果【任务完成过程】7.2.1 插入表单域第7章制作表单网页【操作要求】在表格3的单元格中插入一个表单域。
【实施过程】（1）将光标置于表格3的单元格中。
（2）在Dreamweaver CS3主界面中，单击菜单【插入记录】→【表单】→【表单】，如图7-3所示，在表格3单元格中光标处插入一个表单域。
7.2.2设置表单域的属性【操作要求】设置表单域的“名称”、“动作”、“目标”和“方法”等属性。
【实施过程】将光标置于表单域中，即可看到表单域的“属性”面板，在该属性面板中设置表单域的属性。
“属性”面板上各项属性的设置如下：（1）“表单名称”：用来设置表单的名称。
这里设置为“Form1”。
（2）“动作”：用来设置处理该表单的动态网页或用来处理表单数据的程序路径，这里假设处理该表单的动态网页为“Register_Confirm.aspx”。
（3）“目标”：用来设置表单被处理后，反馈网页打开的方式。
默认的打开方式是在原窗口中打开，这里设置“目标”为“_blank”，有利于提高浏览速度。
（4）“方法”：用来设置表单数据发送到服务器的方式。
这里选择“POST”方式（5）“MIME类型”用来设置发送数据的MIME编码类型。
如果表单中包含文件上传域，则应该选择“multipart/form-data”编码类型。
7.2.3插入表单控件【操作要求】（1）插入3个单行文本域。
（2）插入1个文本区域。
（3）插入2个单选按钮。
（4）插入3个单选按钮组。
（5）插入23个复选框。
（6）插入2个下拉式菜单。
（7）插入1个列表。
（8）插入1个跳转菜单。
（9）插入2个表单按钮。
（10）插入1个图像域。
【实施过程】1、插入单行文本域在表单的文本域中，可以输入文本、数字或字母。
输入的内容可以单行显示，也可以是多行显示，还可以将密码以星号形式显示。
插入文本域的过程如下：（1）将光标置于“您的姓名：”一行（表格3-1-2的第1行）的第2列的单元格中。
179Dreamweaver CS3网页制作案例教程（2）单击“插入”工具栏的【表单】选项卡中的【文本字段】按钮，如图7-5所示。
（3）设置文本域的属性（4）保存网页，预览其效果。
2、插入文本区域（1）将光标置于“您的建议：”一行（表格3-1-4的第5行）的第2个单元格中。
（2）单击“插入”工具栏的【表单】选项卡中的【文本区域】按钮，在弹出的【输入标签辅助功能属性】对话框的“ID”文本框中输入该文本框的标识“suggest”，其他属性保持默认值不变，然后单击【确定】按钮，在光标插入一个多行文本域。
（3）设置多行文本域的属性（4）保存网页，预览其效果。
3、插入单选按钮（1）将光标置于“性别：”一行（表格3-1-2的第1行）的第4个单元格中。
（2）单击“插入”工具栏的【表单】选项卡中的【单选按钮】按钮，弹出【输入标签辅助功能属性】对话框，在该对话框的“ID”文本框中输入该单选按钮的“选定值”为“men”，“标签文字”文本框输入“男”，“位置”选中“在表单项后”单选按钮，如图7-11所示。
然后单击【确定】按钮，在光标位置插入一个单选按钮。
（3）设置单选按钮属性单击选中一个单选按钮，在“单选按钮”的属性面板中设置其属性，两个单选按钮的初始状态都设置为“未选中”，标识名称分别为“radio1”和“radio2”，单选按钮的属性设置结果如图7-12所示。
将两个单选按钮的“标签文字”的大小都设置为“12”。
（4）保存网页，预览其效果。
4、插入单选按钮组（1）将光标置于“您的年龄：”一行（表格3-1-2的第4行）的第2个单元格中。
（2）单击“插入”工具栏的【表单】选项卡中的【单选按钮组】按钮，弹出如图7-13所示的【单选按钮组】对话框。
（3）单击按钮，向单选按钮组中添加新的单选按钮，然后单击“标签”一列的文字，输入新的内容，可以使用汉字，这里分别输入“16岁以下”、“16～25”、“25～35”、“35～45”、“45～55”、“55岁以上”；单击“值”一列的文字，输入需要的值，只能使用英文半角字符，这里分别输入“<16”、“25”、“35”、“45”、“55”、“>55”。
（4）单击【确定】按钮，在光标位置插入单选按钮组，将6个单选按钮调整为三行布局，将各个单选按钮标签文本的大小设置为“12”，然后通过插入多个空格，使其对齐，如图7-15所示。
（5）设置单选按钮属性选中单选按钮组中的一个单选按钮，然后在属性面板中设置其属性，如图7-16所示。
（6）保存网页，预览其效果。
5、插入复选框（1）将光标置于“您喜爱的旅游项目：”一行（表格4-1-4的第1行）的第2个单元格中。
（2）单击“插入”工具栏的【表单】选项卡中的【复选框】按钮，弹出“复选框”的【输入标签辅助功能属性】对话框，在“ID”文本框中输入该复选框的标识文本“item01”，180第7章制作表单网页在“标签文字”文本框输入“自然风光”，“位置”选中“在表单项后”单选按钮，如图7-18所示。
然后单击【确定】按钮，在光标位置插入一个复选框。
以同样的方法插入其他的四个复选框，复选框的“ID”标识分别为“item02”、“item03”、“item04”和“item04”，标签文字分别为“人文景观”、“民风民俗”、“休闲游”和“探险游”。
（3）设置复选框的属性（4）保存网页，预览其效果。
6、插入下拉式菜单（1）将光标置于“所在省份：”一行（表格3-1-2的第2行）的第2个单元格中。
（2）单击“插入”工具栏的【表单】选项卡中的【列表/菜单】按钮，弹出“列表/菜单”的【输入标签辅助功能属性】对话框，在“ID”文本框中输入该“列表/菜单”的标识名称“province”，如图7-22所示。
然后单击【确定】按钮，在光标插入列表/菜单。
（3）添加列表值。
（4）在“列表值”对话框中单击【确定】按钮，返回到“属性”面板，这时“初始化时选定”列表项中会出现刚设置的菜单项，如图7-24所示。
以同样的方法在“所在城市：”一行（表格3-1-2的第2行）的第4个单元格中插入一个“列表/菜单”，该菜单的“ID”标识名称为“city”，只有一个选项“==所在城市==”，初始化时选定该选项，其属性设置如图7-26所示。
（4）保存网页，预览其效果。
7、插入列表（1）将光标置于“您的职业：”一行（表格3-1-2的第4行）的第二个单元格中。
（2）单击“插入”工具栏的【表单】选项卡中的【列表/菜单】按钮，弹出【输入标签辅助功能属性】对话框，在“ID”文本框中输入该“列表/菜单”的标识名称“occupation”，然后单击【确定】按钮，在光标位置插入一个“列表/菜单”。
（3）添加列表值。
（4）在【列表值】对话框中单击【确定】按钮返回到属性面板，“初始化时选定”列表框中会出现刚刚添加的列表项。
（5）设置列表/菜单的属性在“列表”属性面板的“初始化时选定”列表框中选择一项，作为浏览时的初始值；在“高度”文本框中输入“5”，则列表在浏览时显示为五个选项的高度；如果选中“允许多选”复选框，则表示该“列表”允许被多选，否则只允许选择一项。
这里取消选中“允许多选”复选框。
“列表”的属性设置如图7-28所示，网页设计视图中“列表”的外观效果如图7-29所示。
（6）保存网页，预览其效果。
8、插入跳转菜单（1）将光标置于“您最想去的旅游地：”一行（表格3-1-4的第2行）的第2个单元格已插入复选框的标签“黄山”之后，按两次【Shift+Enter】组合键插入换行符实现换行，然后按两次【Shift+Ctrl+Enter】组合键插入空格，输入文字“浏览热点景区：”。
（2）单击“插入”工具栏的【表单】选项卡中的【跳转菜单】按钮，弹出【插入跳转菜单】对话框，其初始状态如图7-30所示。
已添加四个菜单项的【插入跳转菜单】对话框如图7-31所示，然后单击【确定】按钮，完成跳转菜单的设置，插入一个跳转菜单。
181Dreamweaver CS3网页制作案例教程（3）设置跳转菜单的属性（4）保存网页，预览其效果。
9、插入表单按钮保存网页，预览其效果。
10、插入图像域保存网页，预览其效果7.2.4预设文本域中输入文字的字体和大小【操作要求】（1）预设文本域中文本的字体为“楷体_GB2312”，大小为“14px”。
（2）浏览网页时将鼠标移到该文本域时，实现自动选中提示信息，直接输入所需文本。
【实施过程】（1）预设文本域中输入文字的字体和大小（2）在文本域中自动选中初始文本保存网页文档，预览其效果，在“姓名”文本框中输入文字时，显示的文字字体为“楷体”，大小为“14px”。
7.2.5使用Spry验证表单数据的有效性【操作要求】插入一个“Spry验证文本域”，限制“邮政编码”文本域中只能输入6位数字，无法输入非自然数，也无法输入超过6位的邮政编码。
【实施过程】（1）插入“Spry验证文本域”（2）设置“Spry文本域”的属性保存网页文档，会自动弹出如图7-45所示的【复制相关文件】对话框，单击【确定】按钮即可。
7.2.6应用行为实现表单网页所需的功能【操作要求】（1）应用“检查表单”行为，浏览网页提交信息时限制用户必须输入姓名。
（2）应用“检查表单”行为，浏览网页提交信息时限制用户必须输入E-mail地址，且要求E-mail地址必须符合电子邮件地址的格式要求。