表单网页教案
网页设计HTML中表单网页设计教案
教学项目十六HTML中表单网页设计（二）【教学内容】讲解HTML中复选框、多行文本框、下拉列表的使用【教学目的】使学生掌握综合性表单的制作【教学重点】HTML综合性表单设计【教学难点】理解表单中相应元素对应标志及属性的含义【教学方式】案例分析式、项目教学【教学参考】1.<<JavaScript入门与提高"杨浩著清华大学出版社2.<<JavaScript从入门到精通>> 电脑报社出版3.TML网页制作教程材义语编著铁道出版社4.HTML基础与实例程耀编著电子工业出版社【新课】一、HMTL中表单元素的使用1.复选框格式：vi叩ut type=checkbox name二字段名value=字段值checked>2.多行文本框格式：<textarea name=字段名rows=滚动文本框行数，cols=滚动文本框一行中的字符数〉</textarea>3.下拉列表格式：<sclect namc=字段名、126=显示的列表项数multiplc><option value=值selected>显示列表项值</option></select>说明：size:指定屏幕上下拉列表中同时显示的选项个数multiple:设定是否可以复选（同时按住组合键CTRL+SHIFT实现复选操作）selected:设定选项己选中例1:设计网页设计大赛作品征集网页U 我的个人网页—BierosroTt Iwterne-t Explorer文件(E) <1) 近石(V) 收球 0) XH (I ) ffifth 01)。
后 iE -:乜tlb I' 1 4^1 G ：\FrontPaccVhtmlzan.plc\a4. htm记砺本 - 艮我的个... EN 0 ,17 28程序代码如下： <HTML> <Head>vti 〔le>我的个人网页</title> </head><body background=l I .gif> <form><p align=center><font size=5 face=隶书〉网页设计大赛作品征集表</p> <table border= 1 align=center> <tr> vid>姓名vinpultype=text name=xmsize=10></td>vid>EMAILvinputtype二passwordsize=12name=mail></td></tr> <lr> <td colspan=2>性另ijvinputtypc=radioname=sexvaluc=^>^<input type=radio name=sex value=々>女</td> </tr> <tr><td colspan=2> 制作时间<select>凶回lb /按亲，收I 哄—媒体®合―网页设讦大家作品彳正来奏EMAIL□ FLASH弗JT 乍 BrtQ 2003 v " 佐政朋的k*工耳B FRONTPAGE 口 DRE•也介细 AVER O JavaScript诺与出不超过200字的隅场绍希完毕 ______________________________________________ 2我的电脂<option value=2001 >200 l</option><option value=2002>2002</option> <option value=2003>2003</option> <option value=2004>2004</option> v/select> 年<select><option value= 1 > 1 </option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value= 1 ()> 11 </option> <option value= 12> 12</option> v/select> 月<select><option value= 1 > 1 </option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <oplion value= 10> 10</option> <option value=l 1>1 l</option> <option vaiue= 12> 12</option> <option value= 13> 13</option> <option value= 14> 14</option> <option value= 15> 15</option> <option value= 16> 16</option> <option value= 17> 17</option> <option value= 18> 18</option> <option value= 19> 19</option> <option value=20>20</option> <option value=21 >21 </option><option value=22>22</option><option value=23>23</option><option value=24>24</option><oplion value=25>25</option><option value=26>26</option><option value=27>27</option><oplion value=28>28</option><option value=29>29</option><option value=30>30</option><option value=31 >31 </option></select> 日</td></tr><tr><td colspan=2>你使用的开发工具有：</td></tr><tr><td colspan=2><input type=checkbox name=ts() value=on checked>FRONTPAGE<input type=checkbox name=tsl value=on >DREAMWEAVER<input type=checkbox name=ts2 value=on >JavaScript<input type=checkbox name=ts3 value=on >FLASH</td></tr><tr><td colspan=2>网页特色介绍v/td></tr><lr><td coispan=2><tcxtarca rows=6 cols=80 name=prop>请写出不超过200 字的网站特色介绍</tcxtarca> </td></tr><tr><td><input type=submit value=发送name=ss></td><td><input type=reset value= 重填name=ctx/td></tr></table></form></body> </html>二、表单字段外框标记的使用 标志：(1 )<fieldsel></fieldsel> 用于生成字段外框 (2) <legend></legend> 定义字段外框的标题名称 例2.设计有字段外框的网页■ xorosolft Xnt: ornct: Hxpl ornr文件•福堡) 5K« 成) 收IT (A) XM QL ) 神助Q1)<HTML> <Head><title> 我的网页 </title> </head><body bgcoloi -#00eeff><ccntcr><p align=center><fbnt size=5 face=隶书》学生信息调查表</font></p></ccntcr> <lable border=0 align=center width=400> <form> <tr><td colspan=2> <fieldset><legend> 班级概况 </legend>班 级vinput type=text name=bj size=l()xbr>布的回曲 ；，/ 5*皿佐 @回，L_J 益址 <IO 切 G \P»・oneP<«・\ht.mr<5I /l ・\<5 h/m▼ Cl 的—诞'气 ”程序代码如下:班主任〈input【ype=text size=10 name=bzr><br>专业<input type=radio name=zy vaiue=l checked>计算机应用<input type=radio name=zy value=2>网络工程<input type=radio name=zy value=3>图像处理</fieldset></td></tr><lr><ld coispan=2><fieldset><legend> 学生信息</legend>姓名〈input type=text name=xm size=l()xbr>性另!j<input type=radio name=sex value=^>男<input type=radio name=sex value=^C>i<br> 年龄<select><option value= 16> 16</option><option value= 17> 17</option><option value= 18> 18</option><option value= 19> 19</option><option value=20>20</option><option value=21 >21 </option><option value=22>22</option><option value=23>23</option><option value=24>24</option><option value=25>25</option></select></fieldset></td></tr><lr><td><input type=submit value二提交>  ；v/td> <td><input typc=rcset value=重填>v/td></tr></form></table></body></html>【课后小结】表单是网页实现交互处理的工具，熟练掌握表单中元素的标志和属性，是设计表单网页关键。
制作表单网页 教案
释疑解难
参照本课介绍的表单网页，根据
下表涉及的，设计“父母在我心中”问卷调查的表单网页，将网页文件上传到网站空间，并修改相应的链接。
实践与创新：根据本课所学内容，大显身手。
实践创作
展示评价
你能否想办法让反馈信息直接显示在提交表单的网页上？
根据自己网站中的不足，做出进一步的修改和调整。
互相帮助，有什么方法能够解决课本所提到的问题。
梳理总结
拓展延伸
表单主要用来进行意见调查、在
线查询、网上购物、在线申请等。其工作原理是：浏览者在表单中填写或选择信息；单击提交按钮，填写或选择的信息按照指定的方式通过网络传递到服务器端；由服务器端的特定程序进行处理。
梳理本课内容，再次重复操作本课所学知识。
教学反思
表单对于我们来说十分陌生，讲述起来非常吃力，有待以后进一步的提高。
――安徒生
读了这段名言，你想到了什么？我们网上的家是否也必须再继续前进一步呢？
《尚书.大禹谟》中说：“满招损，谦受益，时乃天道。”那么，怎样才能更好地接受别人的意见或建议，使自己的网站越办越好呢？
学生通过思考这些问题，分析自己的优点和缺点。能够明白取长补短的古训。
了解本课的教学目标。
自主探究
交流分享
八年级信息技术教案备课人：王传贵
第1单元
课题
7、制作表单网页
课型
新授课
备课时间
10.25
教学目标
知识与能力
了解表单的交互作用
技能与过程
学会在网页中插入表单；正确设置表单信息的收集方式
情感与价值
能正确对待自己的缺点和别人ቤተ መጻሕፍቲ ባይዱ优点，善于取长补短。
教学重点
学会在网页中插入表单；正确设置表单信息的收集方式
网页表单的教案
网页表单的教案教案标题：网页表单的教案教案概述：本教案旨在帮助学生了解和学习网页表单的概念、用途以及如何创建和处理网页表单。
通过理论讲解和实践操作，学生将能够理解网页表单的作用，并学会使用HTML和CSS创建简单的网页表单。
此外，他们还将学习如何使用JavaScript验证表单输入并处理用户提交的数据。
教学目标：1. 理解网页表单的概念和作用。
2. 学习使用HTML和CSS创建简单的网页表单。
3. 学习使用JavaScript验证表单输入的有效性。
4. 学习处理用户提交的表单数据。
所需材料：1. 计算机和互联网访问设备。
2. Sublime Text或其他文本编辑器。
3. 网页浏览器（Chrome、Firefox等）。
教学步骤：引入（5分钟）：1. 向学生解释什么是网页表单，并提供几个日常生活中使用表单的例子，如注册表单、调查问卷等。
2. 引导学生思考网页表单的主要作用和一些常见的表单元素，如输入框、下拉菜单、单选框等。
理论讲解（10分钟）：1. 讲解HTML表单标签的基本结构和属性，如`<form>`、`<input>`、`<select>`等。
2. 介绍各种常见的表单元素及其用途，如文本框、密码框、单选框、复选框等。
实践演练（30分钟）：1. 指导学生使用HTML和CSS创建一个简单的注册表单，包括姓名输入框、邮箱输入框、密码框等表单元素。
2. 引导学生通过浏览器预览表单，并确保其正常显示和布局良好。
3. 引导学生使用JavaScript添加表单验证功能，例如检查输入是否为空、密码长度是否符合要求等。
示范演示（10分钟）：1. 展示如何处理用户提交的表单数据，包括后端处理（如使用PHP或其他服务器端语言）和前端处理（如使用AJAX）。
2. 演示如何获取和处理表单中的各个输入字段的值。
总结和作业（5分钟）：1. 确认学生对网页表单的概念和创建过程有所理解。
2. 分发作业，要求学生在家中使用所学知识创建一个个人信息登记表单，并在下节课前提交。
公开课《表单网页》教案
江苏省张家港职业教育中心校公开课简案创作任务三、讲练结合，完成任务布置任务一：插入表单、表格及各项目。
布置任务二：在对应的栏目里插入相应的表单域，并修改表单域的属性布置任务三：自行创作表单网页的主题。
根据自己的主题，设计表单网页布置任务四：美化自己的表单网页。
演示说明巡视并及时指出学生操作过程中的问题。
创建表单网页学生反馈练习，插入表单，利用表格进行网页的布局，完成任务。
评价四、作品评价每组选出优秀的学生作品，广播演示，分析学生所运用的表单域。
演示学生作品并点评欣赏同学作品并进行一些评价，积极问答问题。
小结与反思五、小结总结本课知识，设下疑问：1．有一些表单域在这节课里没有使用，它们具有什么用途？2．表单的信息怎样才能收集起来呢？梳理所学知识，设下疑问，激发学生兴趣，为下一节课做好铺垫。
回顾本课所学知识，积极思考。
效果图如下：教学反思：“小步子教学”把每个局部的知识嚼得很细然后喂给学生，生怕他们噎着了，殊不知，当学生真正面对“食物”的时候，他们却不知从何下手！而项目教学法要求学生必须先站在系统的高度分析整个项目，将大项目分解实施完成，很好的解决了这个问题。
项目教学法是师生同学共同实施的一个完整的项目工作而进行的教学活动。
教学实施采取小组合作形式，按“项目展示—分析讨论—操作实施—成果展示与评价—巩固提高”这六个环节进行，由学生自己主动完成知识的建构，取得了好的教学效果。
在本节课项目教学实施过程中，以下几个问题尚需改进：1、合理分组，评价多样化。
要进一步发挥小组间成员协作及小组长的作用。
加大小组集体考核的力度，促进小组成员间的互相协作帮助，以达到共同提高，培养学生团队精神的目的。
实施项目教学的评价方式应该是多样化和多角度的，可以采取教师评价、小组评价和自我评价，也可以对小组成员进行捆绑评价，不管如何，评价以积极鼓励为主。
2、教学项目的设计要尽可能自然有机结合多项知识点，难易程度要针对学生的实际水平、被学生所喜爱。
教师资格证面试《制作表单网页》教案
教师资格证面试《制作表单网页》教案一、教学目标1.知识与技能(1)学生知道表单网页的作用和构成要素，能够使用FrontPage 软件制作简单的表单网页。
2.过程与方法(1)学生通过观察与探索，听老师对表单网页的讲解，知道表单网页的用途和基本构成要素;(2)学生能够利用计算机，进行简单表单网页制作的基本操作。
3.情感态度与价值观学生在解决问题的过程中，能够选择合适的软件和方法来解决生活中和工作中的问题，形成实事求是的态度，逐步养成将科学技术应用于日常生活、社会实践的意识。
二、教学重难点【教学重点】制作表单。
【教学难点】根据需求确定表单要素，并设置合适的控件属性。
三、教学方法任务驱动法，讲授法，合作探究。
四、教学过程1.新课导入，提出任务在前几节课，同学们已经学习了如何创建“发布网页”，我们在日常的生活中，仅仅学会发布信息是远远不够的，通常我们还需要学会如何去搜集信息。
最近啊，学校想组织一次出游的的活动，给我们班的学生安排了一个任务，让大家搜集在校所有学生的个人信息，并且征询一下各位学生出游的意愿，个人信息包括，姓名，性别，班级，想出游的地方，还有家庭住址，还有父母等联系方式，通常会采用哪些方法呢??(学生可能说用采访登记，打电话，向各个班主任去了解等。
)这些方法虽然可以完成任务，但是太耗费时间了。
老师没有那么时间来逐个的打电话或者问班主任。
其实啊，大家如果会制作表单网页的话，利用网页来搜集大家的信息是非常方便的，那么老师本节课就要带领大家一起来学习一下“简单表单网页的制作”，制作好了网页，让每一个学生到网站上填写一下信息就可以了。
这节课就让大家和老师一起来完成学校交给我们这么一个艰巨的的任务吧。
表单网页通常是用来搜集访问者对网站的访问信息，还有个人注册信息，意见、反馈等信息的搜集，首先让大家看一下我们本节课的任务，本节课的任务就是制作一个“网上调查”的简单网页。
制作表单网页老师一共给大家分配了四个小任务，因为网页的制作分为四个步骤。
人教版-信息技术-五年级下册-第12课《制作表单网页》教学设计
学生自主尝试操作。
学生分组讨论。
三、小组汇报
请完成任务的小组做汇报
没有完成任务的小组借鉴其他小组的经验。
让学生们认真阅读小拓展的内容
学生汇报
教学小结
这节课你学会了什么，说来听听，还有什么不明白的吗？
学生交流学习体会
课后实践
练习1、2、3、
课后小记
教师活动
学生活动
引入课题
浏览者通过表单网页输入信息并提交表单后，这些信息会反馈给网页设计者。存储信息的文件是站点中名为“_private”的文件夹，相应的文件名是“form_results.txt ”。
实际应用时，还可以用指定的电子信箱收集浏览都提交的反馈信息。这节课就让我们来共同研究一下，如何设置信息的收和观察102页至103页的内容，小组讨论完成任务一的方法。
学生看书自学操作。
学生自主尝试操作。
学生分组讨论。
二、设置信息的收集方式
任务一：动手做：把自已的电子信箱设为收集反馈信息的方式。
1、教师提示学生看书之后进行实践，2、学生实践并进行相关设计制作
3、教师巡回指导
学生看书自学操作。
课题
制作表单网页
教学目标
知识目标：1、了解表单网页的初步知识2、能够制作简单的表单网页
能力目标：培养学生的动手操作的能力。
情感目标：培养学生自主学习的习惯。
教学重点
知识目标1、2
教学难点
知识目标1、2
教学方法
任务驱动法
教学准备
多媒体网络教室、演示幻灯片、教学素材库、FrontPage软件
教学过程
教学环节
《信息技术》教案-网页表单
《信息技术》教案-网页表单一、教学目标1. 让学生了解网页表单的概念和作用。
2. 让学生掌握网页表单的基本组成和常用元素。
3. 让学生学会使用网页表单进行信息提交和数据交互。
4. 培养学生动手实践能力和团队协作精神。
二、教学内容1. 网页表单的概念和作用2. 网页表单的基本组成和常用元素3. 表单域类型及属性4. 表单控件类型及属性5. 表单提交和数据交互三、教学重点与难点1. 网页表单的基本组成和常用元素2. 表单域类型及属性的应用3. 表单控件类型及属性的应用4. 表单提交和数据交互的方法四、教学方法与手段1. 讲授法：讲解网页表单的概念、基本组成和常用元素。
2. 案例分析法：分析实际案例，展示网页表单的应用。
3. 动手实践法：学生动手编写代码，创建网页表单。
4. 问答法：解答学生提出的问题。
五、教学过程1. 引入新课：通过展示一个简单的网页表单，引发学生对网页表单的兴趣。
2. 讲解网页表单的概念和作用，介绍基本组成和常用元素。
3. 讲解表单域类型及属性，示例演示如何使用。
4. 讲解表单控件类型及属性，示例演示如何使用。
5. 讲解表单提交和数据交互的方法，示例演示如何实现。
6. 学生动手实践：分组编写代码，创建具有实际应用意义的网页表单。
7. 问答环节：解答学生在实践过程中遇到的问题。
9. 布置作业：让学生课后完善所创作的网页表单，提高实践能力。
10. 课后反思：教师对本节课的教学效果进行反思，为下一节课做好准备。
六、教学评价1. 评价学生对网页表单的概念和作用的理解程度。
2. 评价学生对网页表单的基本组成和常用元素的掌握情况。
3. 评价学生对表单域类型及属性的应用能力。
4. 评价学生对表单控件类型及属性的应用能力。
5. 评价学生对表单提交和数据交互的实现方法。
七、教学资源1. 网页表单相关教材或教学参考书。
2. 网络资源，如在线教程、案例分析等。
3. 编程环境，如文本编辑器、网页浏览器等。
中职网页设计与制作教案：创建表单
江苏省XY中等专业学校2021-2022-2教案编号：教学内容一个完整的表单交互包括两个步骤，一是在客户端通过表单收集访问者信息，并提交到服务器，这一步可以由用户浏览的网页文件完成；二是服务器端的应用程序对这些信息加以处理。
所以一个完整的表单包括表单对象和应用程序两个基本组件，表单对象在网页中起描述作用；应用程序则是处理表单中信息的服务器端或客户端程序。
创建表单1、将插入点移至要插入表单的位置。
2、单击“插入”“表单”中的“表单”命令，或选择“插入”工具栏中“表单”选项卡里的“表单”按钮，在文档中插入一个表单，可见表单四周有红线边框，如图4.3所示。
设置表单属性1.单击表单轮廓或显示在文档窗口下的<form>标签，可以选定整个表单。
2.表单“属性”面板如图4.4所示。
在“表单名称”文本框中输入表单的名称“form1”，这样处理表单数据的程序才能接收数据。
在“动作”文本框：用于指定处理表单数据的文件。
“目标”列表框：指定用于显示被调用程序所返回的数注意：表单域属于不可见元素，如果插入表单域后无法显示，应选择“查看”菜单中的“可视化助理”中的“不可见元素”命令。
如果还是不能显示表单的红色边框，应选择“编辑”菜单中的“首选参数”命令，在“首选参数”对话框的“不可见元素”分类中，选中“表单范围”复选框。
教学内容2、单击如图4.6所示“插入”工具栏“表单”选项卡中的“文本字段”按钮,弹出“输入标签辅助功能属性”对话框，如图4.7所示，单击“取消”按钮，在表单中创建一个单行文本域。
3、选中该单行文本区域4、在“文本域”文本框中输入文本域名称“book_name “，这个名称必须是惟一的。
5、在“字符宽度”文本框中输入文本域中允许显示的字符数目“15”。
【课堂小结】教师引导学生小结本课所学内容。
【作业布置】总结本课所学操作实用技巧。
板书设计教后札记。
初中信息技术教案 第七课_制作表单网页教案
接受。
师：这样的网页我们能做出来吗？请大家 分组合作，根据教 带着任务去实践
根据教材提示插入一个表单，出现教材图 材提示插入表单， 可以做到有的放
1-7-3 的效果。
并设计表单的版面 矢。
教师巡视指导
师：现在的效果是否可以称之为表单呢？
学 师：对，我们还需要在特定位置插入若干 生：不可以
表单中的重要元素——控件。请大家根据
解吗？
与 师：根据本节的学习内容，完成“实践与 设计“父母在我心
创新”第一个任务
情
中”表单网页
感
第四阶段：综合实践，巩固与提高，自由创作，迁移运用
第2页共3页
教学 环节
教师活动
学生活动
设计理念
师：同学们是否听说过“留言板”这个概
实 念？在访问其它网站时是否在留言板上
引入新概念，引导 学生对新新知识
教师活动
学生活动
课堂小结本节课的学习内容。
课 师：到今天为止，我们已将“网站设计与 总结
制作”的全过程学习完毕，同学们想必对
堂 此有了一个全面的了解和把握。
但是，我们在本单元学习的网站制作技
小 术只是网站设计的初步，还有更多、更新
的网站技术等待我们去学习和掌握。
结
设计理念
以更高的视角 认识网站建设，让 学生以饱满的学 习热情，探索网站 建设的途径和方 法。
教学 环节
教师活动
学生活动
设计理念
引导学生“读一读”
导
师：经过前面六课的学习，我们已经初步 掌握了网站设计和制作的一般步骤。我们
研读材料，思考问
以格言和名言
入
的网站做得怎么样？有哪些地方需要改 题。 进呢？如果别人给我们提出意见和建议，
(人教版)小学五年级信息技术上册第12课《制作表单网页》word教案
课题：制作表单网页教课设计学科：信息技术第1单元（章、课、节）第7节年级：8第10周第1教课设计总编号：8总 1 课时备课时间课时课型新授第 1 课时使用时间知识目标：认识表单网页的功能与用途，认识表单网页从设计到公布的完好过程。
技术目标：掌握表单元件的插入方法及有关属性设置，掌握公布教课目的表单的方法。
感情目标：培育学生勤于思虑的习惯与解决问题的能力。
可以正确对待自己的弊端和他人的长处，擅长扬长避短，补己之短。
表单元件的插入重点难点教课准备教课方法板书设计表单元件的属性设置表单元件的插入表单元件的属性设置计算机教室教课设计课件任务驱动法自主研究合作沟通教学过程教课改正、反省创建情境激情导入学生阅读与思虑课本p44 页资料问题：如何才能更好的接受他人的建议和建议，使自己的网站越办越好呢？自主研究沟通分享一、在网页中插入表单学生自主研究：1、我们为何要在网页中插入表单？2、如安在网页中插入表单？3、当我们将表单插入到网页中后，应当如何对插入的控件属性进行相应的改正？4、练一练 :课本 P45 页比较“输入表单中的文字提示”挨次插入其余控件，并参照下表的要求，分别对它们进行相应的设置。
二、设置表单信息的采集方式学生自主研究表单属性对话框合作学习，释疑解难请同学们把小组内不会的问题提出来教师赐予适合指导。
实践创作，展现评论据本节课所学内容，题材不限，自由设计作品。
展现评论：有公布竹泉旅行区的、有公布大枣的、有发布小米的 ------作品内容丰富，同学们做的特别棒。
梳理总结，拓展延长生先总结，谈收获。
师再增补，同时，让学生正确认识自己学会展现自己真切的一面。
作业批改记录批阅时间：年月日评论时学校评评论状况评论人间价建议。
《制作表单网页》教学设计范文
《制作表单网页》教学设计一、教学设计部分本课的主要内容与地位本课主要的内容涉及表单的插入和表单数据的收集两个方面的内容。
教学目的是以表单的形式完成对网站的评价。
本课与前后内容的关系最后生成能够实现交互的动态网页，是学生在学习静态网页制作基础之上的知识提升。
知识目标/技能目标知识目标了解表单的交互作用。
技能目标掌握在网页中插入表单的一般操作；学会正确设置表单信息的收集方式。
过程与方法目标通过学习网页表单的设计，学会与人交流，正确收集反馈意见。
情感态度与价值观目标能够正常对待自己的缺点和别人的优点，取人之长、补己之短。
学无止境，让自己不断在进步中成长。
本课的重难点重点：表单的设计；表单数据的收集；难点：表单控件的参数设置。
本课的课时分配建议一课时教法建议由于本节课学习的内容是创建一个动态网页，出现了很多前面没有出现的概念和术语，所以建议教师在讲解时注意对相关知识的补充和拓展。
在讲解组件属性的修改时建议仍以分组探究的形式进行，通过各组之间的对比加深学生对相关知识点的掌握。
在设置表单信息的收集部分，只有网页真正发布以后才能看到信息收集的情况，所以建议教师在教师机器上设置一个能正常访问的网站，预设一个表单网页，然后通过学生的访问表单网页留言，提醒学生时刻关注_private文件夹中form_results．txt和指定的电子邮箱内容的变化。
教学环境准备建议教师机：Windows 2000 Server（安装FrontPage服务器扩展插件）。
自评、互评、师评要注意的问题学生能否完成表单网页的设计和表单数据的收集方法的设置，并且针对设计中存在的问题能否提出建设性的意见和建议。
本节内容涉及网页的交互，为学生下一步学习动态网站的设计起到承上启下的作用，在教学中应注重讲清表单网页的工作原理。
二、补充资料部分网页表单基础知识表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
《表单网页》教案
《表单网页》教案【教学目标】1．知识与技能⑴了解表单网页的概念和作用；⑵掌握表单网页的制作方法。
23艺之乡，每天有许多人通过网络了解如皋的盆景艺术，怎样才能知道他们对我们网站的意见或建议呢？（设计一个留言板网页来采集他们的意见。
）二、过程（一）认识表单网页（8分钟）表单网页是一种结构化的网页，是网站中提供浏览者发表个人意见、提供反馈信息的互动交流的页面。
：用于接收用户输入的单行文本信息，如姓名、地址等。
滚动文本框：可以输入多行信息的文本框，如意见、建议等。
单选按钮：提供两个或多个互斥选项，用户只能选中其中的一项。
如：性别。
：提供一个或一组选项，用户可选择其中的一个或多个选项。
下拉菜单：允许用户从下拉菜单列表中选择其中一项。
按钮：FrontPage2000中的按钮表单域有三种类型，即“普通”、“提交”和“重置”。
“提交”用于表单提交；“重置”用于清除表单所填内容，回到初始状提示：单击“插入”菜单中的“高级”“插件”。
思考：插入一幅GIF动画图片（.gif）和一个FLASH动画（.swf）有何不同？活动3为当前的表单网页添加一个名为“song.mid”的背景音乐。
提示：在网页中的任意位置右击鼠标，选择“网页属性”命令（或单击“文件”菜单，选择“属性”命令），在“常规”选项卡中操作？保存编辑的表单网页并利用平台提交。
作品展示：（5分钟）小结：PPT（3分钟）二、【检测与评价】（4分钟）1．通常可以使用（）来收集访问者的意见，统计调查访问信息。
A.表格B.框架C.表单D.单元格2.利用表单制作留言板时，若要采集访问者的性别，可以选用的表单字段有。
网页制作表单教学设计教案
5．2网页制作——表单教学方法：教学演示、任务驱动、自主练习一、教学目标：1、知识与技能了解表单的概念掌握表单网页的制作方法2、过程与方法体验表单网页的制作过程体验用表单网页进行信息的采集过程3、情感、态度、价值观认识信息技术对人们日常生活、学习、工作的影响激发学生对信息技术的求知欲，形成积极主动地学习和使用信息技术、参与信息活动的态度二、重点难点：表单网页的概念表单网页的制作方法三、课程标准：选修模块3：网络技术应用---网站设计与评价---内容标准---能够根据表达任务的需求，使用常用的网页制作软件制作网页四、教学媒体：(本教案需用到的各种教学媒体和资源)1.硬件：网络机房2.软件：多媒体广播教学软件，FrontPage2000学生在学习本节内容之前，已经学习过因特网的相关知识、会上网，并且已经掌握常用网络工具软件的使用，如QQ、E-mail等等，并且有着浓厚的兴趣。
大部分学生只停留在利用QQ聊天、进行网络游戏、收发E-mail等阶段，对申请QQ 号码和E-mail时的网页结构形式知之甚少。
本节课的关键是通过学习，了解表单网页的制作过程和方法，为以后信息获取和处理打下基础。
六、教材分析：网络基础及应用是高中信息技术课程的重点，是培养学生信息素养的关键章节，对于培养学生获取、评价、利用和表达信息的能力，起着举足轻重的作用。
而表单网页在基于网络的信息收集处理方面有着明显的优势。
一、一、问题的提出制作一张如下所示的用户登记表二、二、问题：1．上述用户登记表中有哪几种表单域？2．表单的工作原理是什么？三、三、表单的构成表单域：是容纳输入信息的容器，是用户输入数据的地方。
表单控制器：负责处理用户在表单中填写的信息。
“提交”和“重置”按钮：将信息提交到站点服务器、清除表单中已填写的内容。
四、四、制作用户登记表单行文本框：用于让用户输入一行文本信息，并能够被Web服务器接受，用户登记表中的姓名、年龄和E_mail均是单行文本框。
《网页制作表单的设计》教学设计
表单的设计网页制作课程
15电商4、5班2课时一、【教学目标】
学会使用表单中文本域、图片域、单选按钮、复选框、跳转菜单、文本区域等的应用
二、【教学重点与难点】：
重点：文本域、跳转菜单，单选按钮的应用
难点：单选按钮的应用，跳转菜单的制作
三、【教学方法】
讨论法、讲授法、演示法、练习法
五、【教学过程】
一、认识表单
表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。
二、生成表单
1、表单的创建与表单字段的添加
“插入”—“表单”—“选择需要的表单类型”
2、表单向导
“文件”—“新建”—“网页”--“常规”——“表单网页向导”
三、表单内容编辑
1、文本域——账号和密码的输入
3、图片域——制作提交按钮
4、单选按钮——性别选项设计
5、复选框——兴趣爱好设置
6、按钮（“验证有效性按钮”登录）
7、跳转菜单菜单——密保问题的设置
8、文本区域——留言框的制作
四、学生练习制作表单
制作一个注册信息表单，要求包括下面的内容：会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子邮件、留言框、收货地址、兴趣爱好、提交按钮、重填按钮
六、【课程小结】
七、【作业】
完成课堂示范案例，校园网站的注册和登录页面设计。
制作表单网页教学设计名师公开课获奖教案百校联赛一等奖教案
制作表单网页教学设计简介表单是网页设计中常用的元素之一，它可以用于收集用户的数据和信息。
本文将介绍如何制作一个表单网页，并提供一套教学设计，帮助读者了解表单设计的基本原理和技巧。
目录1. 表单网页的概述1.1 表单的定义1.2 表单的作用2. 表单网页的基本元素2.1 表单标签2.2 输入字段2.3 提交按钮3. 表单网页的设计原则3.1 明确目的3.2 简洁明了3.3 响应式设计4. 表单网页的实际制作过程4.1 页面结构设计4.2 HTML代码编写4.3 CSS样式设计4.4 JavaScript交互5. 表单网页的常见问题与解决方案 5.1 表单验证5.2 数据安全5.3 提交成功提示6. 表单网页的最佳实践和优化技巧6.1 使用合适的输入字段6.2 设置默认值和提示信息6.3 提供用户友好的错误提示7. 结语1. 表单网页的概述1.1 表单的定义表单是网页中用于收集用户数据和信息的一种交互元素。
它包含了各种输入字段和提交按钮，用于向服务器提交用户输入的数据。
1.2 表单的作用表单在网页中有着重要的作用。
它可以用于注册新用户、登录账号、提交反馈、下单购买等各种场景。
通过表单，网站可以方便地获取用户的信息，实现与用户的互动和交流。
2. 表单网页的基本元素2.1 表单标签表单使用`<form>`标签定义，通过设置不同的属性来控制表单的行为。
常见的属性有`action`和`method`，分别用于指定表单提交的目标URL和提交方式。
2.2 输入字段输入字段是表单的主要元素，用于接收用户的输入数据。
常见的输入字段包括文本框、密码框、下拉菜单、单选框、复选框等。
2.3 提交按钮提交按钮是表单用于触发提交操作的元素。
用户填写完表单后，点击提交按钮可以将表单数据发送到服务器进行处理。
3. 表单网页的设计原则3.1 明确目的在设计表单网页时，首先需要明确其目的和功能。
清晰明确地定义表单的作用可以帮助用户正确使用表单，并提高用户体验。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《表单网页》教案
【教学目标】
1．知识与技能
⑴了解表单网页的概念和作用；
⑵掌握表单网页的制作方法。
2．过程与方法
通过阅读课本、观看演示回忆、感受表单网页的作用；在递进的操作任务中掌握表单网页制作和美化的方法。
3．情感态度与价值观
体验表单网页在网站中的重要作用，激发他们对信息技术的求知欲，形成积极主动地学习和使用信息技术、参与信息活动的态度。
【重点难点】
表单网页的制作方法。
【课时安排】1课时
【教学准备】网络教室、多媒体教学软件。
【教学过程】
一、新课引入（5分钟）
大家有QQ号或者E-mail邮箱吗？在申请QQ和E-mail时，我们要输入一些个人信息？这类采集用户信息的网页都被称为表单网单。
（阅读课本P119）展示一个简单的园艺网站来介绍家乡的盆景艺术，如皋是全国有名的盆景园艺之乡，每天有许多人通过网络了解如皋的盆景艺术，怎样才能知道他们对我们网站的意见或建议呢？（设计一个留言板网页来采集他们的意见。
）
二、过程
（一）认识表单网页（8分钟）
表单网页是一种结构化的网页，是网站中提供浏览者发表个人意见、提供反馈信息的互动交流的页面。
：用于接收用户输入的单行文本信息，如姓名、地址等。
滚动文本框：可以输入多行信息的文本框，如意见、建议等。
单选按钮：提供两个或多个互斥选项，用户只能选中其中的一项。
如：性别。
：提供一个或一组选项，用户可选择其中的一个或多个选项。
下拉菜单：允许用户从下拉菜单列表中选择其中一项。
按钮：FrontPage 2000中的按钮表单域有三种类型，即“普通”、“提交”和“重置”。
“提交”用于表单提交；“重置”用于清除表单所填内容，回到初始状态；“普通”用于执行其它客户的操作。
（二）制作表单网页（15分钟）
表单网页制作方法步骤：依次单击“插入”→“表单”，弹出下级菜单。
实践：制作一个“留言”功能的表单网页。
活动1 建立表单（根据提供的效果样张，完善表单网页）
提示：
①在“姓名”后插入一个“单行文本框”；
②在“性别”后的各选项前分别插入“单选按钮”；
③在“您的兴趣爱好”后的各个选项前分别插入“复选框”，可以复制；
④在“您的职业”，后插入一个“下拉菜单”。
添加“工程师”和“公务员”和“其他”等菜单内容（单击“添加”按钮，添加“工程师”菜单项，重复操作）；
⑤在“您对我们的建议或要求”后插入“滚动文本框”，调整其至合适大小；
⑥修改默认的按钮名称（双击按钮）；
（三）表单网页的美化（5分钟）
活动2 在最后一行表格中插入一个名为“”的Flash动画？
提示：单击“插入”菜单中的“高级”“插件”。
思考：插入一幅GIF动画图片（.gif）和一个FLASH动画（.swf）有何不同？
活动3 为当前的表单网页添加一个名为“”的背景音乐。
提示：在网页中的任意位置右击鼠标，选择“网页属性”命令（或单击“文件”菜单，选择“属性”命令），在“常规”选项卡中操作？
保存编辑的表单网页并利用平台提交。
作品展示：（5分钟）
小结：PPT（3分钟）
二、【检测与评价】（4分钟）
1．通常可以使用（）来收集访问者的意见，统计调查访问信息。
A.表格
B.框架
C.表单
D.单元格
2.利用表单制作留言板时，若要采集访问者的性别，可以选用的表单字段有（）。
A.复选框
B.单选按钮
C.下拉菜单
D.单行文本框
3.利用表单中的字段，我们可以设计功能强大的交互式在线考试试卷。
以下（）字段可以用来采集不定项选择题的答案。
A.单行文本框
B.单选按钮
C.复选框
D.下拉菜单
4．插入FLASH动画时，使用“插入”菜单下的（）命令。
A．图片 B.组件 C.表单 D. 高级→插件
5．若要为当前网页设置背景音乐或背景图片，应下面的（）属性中进行设置。
A．图片属性 B.网页属性 C.表格属性 D. 单元格属性
【课后延伸】
表单网页提交的数据提交到哪儿去了呢？请同学们课后阅读课本P120的相关内容，也可以利用因特网搜索去解开这个奥秘，在学习本册第七章第三节时，我们会为大家解开这个奥秘。