（中职）Web前端设计基础 项目五-1电子教案.docx
-
资源ID：76722203
资源大小：143.28KB
全文页数：7页
- 资源格式： DOCX
下载积分：10金币
快捷下载
会员登录下载
微信登录下载
三方登录下载：
微信扫一扫登录
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
（中职）Web前端设计基础 项目五-1电子教案.docx
（中职）Web前端设计基础 项目五-1电子教案教学课题项目5 网页中的表单5.1项目描述、5.2知识准备授课班级授课时间教学目标知识目标1.掌握网页中表单的作用和语法格式；2.掌握表单中各元素的作用和语法格式。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，已经掌握了代码编辑工具的使用、HTML的基本结构、图文混排的方法、网页中表格的制作方法以及如何创建超链接和制作音频、视频播放器。本项目学习使用HTML5创建表单，这是实现动态页面的第一步，表单最重要的功能就是在客户端收集用户的信息，然后将数据传递给服务器去处理。教学重点1.网页中表单的作用和语法格式；2.表单中各元素的作用和语法格式。教学难点1.网页中表单的语法格式；2.表单中各元素的语法格式。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个网页页面，通过页面中的用户与服务器之间的信息交互，导入本节课的表单内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、表单概述表单的标签为<form></form>，其格式如下：<form name="表单名称" action="url" method=”get/post” target=”目标显示方式” enctype=”mime”></form>其中各属性的含义如表所示。属性含义说明name表单名称为了区分多个表单，用该属性给表单命名，以防止表单提交到后台程序出现混乱。action表单提交地址用于指定表单数据提交到哪个地址进行处理或者以邮件形式发送到哪个邮箱。method传送方法指明提交表单的HTTP方法，取值为get或post。target目标显示方式目标窗口的打开位置，与超链接<a>标签一样，有四个属性值：l _self：默认值，表示在当前的窗口打开页面。l _blank：表示在新的窗口打开页面（常用）。l _parent：表示在父级窗口中打开页面。l _top：页面载入到包含该链接的窗口，取代当前在窗口中的所有页面。enctype编码方式用于设置表单信息提交的编码方式，有两个值：l application/x-www-form-urlencoded：默认的编码方式。l multipart/form-data：MIME编码，对于“上传文件”这种表单必须选择该值。二、表单基本元素<input>标签用于搜集用户信息，通过设置不同的type属性值，可以有很多类型，type属性值如表所示。type值含义说明text单行文本框用户可在其中输入简短文本，默认宽度为 20 个字符。password密码为了保证文本的安全性，该字段中的字符被掩码，以点的形式显示。checkbox复选框用户在一组选项中可以选择一项或多项。radio单选按钮用户在一组选项中只能选择一项。button普通按钮可点击的按钮，一般用于通过 JavaScript 启动脚本。submit提交按钮作用是把表单数据发送到服务器。reset重置按钮作用是清除表单中的所有数据。image图像域图像形式的提交按钮。file上传按钮定义输入字段和浏览按钮，供文件上传。hidden隐藏字段需要提交数据又不显示在浏览器中的表单元素。【例5-1】制作一个登录框实例，代码如下所示。1 <!DOCTYPE html> 2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>创建一个登录框</title>6 </head>7 <body>8 <form method="post" action="">9 姓名：<input type="text" value="请输入姓名" size="20" maxlength="15"/><br/> 10 密码：<input type="password" size="20" maxlength="15"/><br/> 11 <input type="submit" value="登录" />12 <input type="reset" value="重置"/>13 </form>14 </body>15 </html>在Chrome浏览器中预览，效果如图所示。【例5-2】制作一个满意度测评表单实例，代码如下所示。1 <!DOCTYPE html> 2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>满意度测评</title>6 </head>7 <body>8 <form method="post" action="">9 网站满意度打分：<br/>10 <input type="radio" name="Question1" value="best" checked="checked"/>非常满意<br/>11 <input type="radio" name="Question1" value="better"/>比较满意<br/>12 <input type="radio" name="Question1" value="good"/>一般<br/>13 <input type="radio" name="Question1" value="bad"/>不满意<br/>14 您希望我们增加些哪方面的知识：<br/>15 <label for="c1">网页设计：</label> 16 <input type="checkbox" id="c1" value="painting" checked="checked"><br/>17 <label for="c2">css3动画：</label>18 <input type="checkbox" id="c2" value="writting"><br/>19 <label for="c3">后期运营维护：</label>20 <input type="checkbox" id="c3" value="travelling"><br/>21 <input type="submit" value="提交"/>22 </form>23 </body>24 </html>在Chrome浏览器中预览，效果如图所示。【例5-3】制作上传附件页面实例，代码如下所示。1 <!DOCTYPE html> 2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>上传附件</title>6 </head>7 <body>8 <form method="post" action="">9 上传图片：<input type="file"/><br/>10 <input type="button" value="图片要求" onclick="alert('文件不能大于10M；必须是JPG类型文件；')"><br/>11 <input type="image" src="images/upload.png"/><br/>12 </form>13 </body>14 </html>在Chrome浏览器中预览，效果如图所示。单击“上传图片”后的“选择文件”按钮，将弹出“打开”对话框，如图所示，在此对话框中可以选择上传的图片文件。单击“图片要求”按钮，将会弹出如图所示的提示窗口，提示用户上传文件的要求。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳本节课学习了HTML中表单、各种表单元素的作用和语法格式。标签属性说明formname表单名称action表单提交地址method提交表单的HTTP方法，取值为get或posttarget目标显示方式：_self、_blank、_parent、_topenctype编码方式inputtypetext单行文本框password密码checkbox复选框radio单选按钮button普通按钮submit提交按钮reset重置按钮image图像域file上传按钮hidden隐藏字段required必填项教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.下列_是表单的标签。A table B form C video D img2.下列_是可以让用户输入数据的表单组件。A radio B date C text D button3.在_表单域中，用户输入的内容会变成星号或圆点。A password B textarea C radio D text二、上机实训上机完成例5-1和例5-3的实例操作。学生上机完成任务并提交，进行分组互评。教学反思感谢您的支持与使用如果内容侵权请联系删除仅供教学交流使用
