HTML5+CSS3网页设计实战 教案 4.10 表单类标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.10表单类标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）form标签及相关属性。（2）input标签及常见类型。（3）textarea标签及相关属性（4）select标签及相关属性。能力目标：（1）具备自行学习input标签常见类型的能力。（2）具备完成百度搜索界面的能力。（3）具备完成用户登录窗口的布局能力。素养目标：（1）强化责任意识与诚信品质：在编程过程中，代码的质量直接影响到软件的功能和安全性。因此，编程课程应强调责任意识，要求学生对自己的代码负责，遵守编程规范，不抄袭、不剽窃，树立诚信品质。表单类标签的应用form标签及相关属性，input标签及常见类型，select标签及相关属性。通过案例练习及思政讲解，让学生掌握表单类标签的用法。input标签及常见类型。通过标签的效果对比及代码对比，使知识点难度降低。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习页面中哪些区域可以采用table标签来定义。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入现在的网页发展趋势，越来越讲究人机交互，人机交互其中一个内容就是本地数据如何发送到服务器端，这里就需要采用表单类标签，简单的说，表单类标签就是收集用户填写的数据，发送到对应的接收页面。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.10.1form标签<form>标签用于创建HTML表单，目的为接收用户输入的数据。☆思政讲解：（1）使用get时发送form数据时，存在数据安全隐患。提醒在大数据时代，注意个人数据保护意识。（2）使用公共电脑浏览网页时，要注意个人数据及隐私的保护。人离开时要关闭浏览器，最好执行关机操作。 用法示例：<formname=”user”action="/action_page.php"method="get"> <label>名字：</label> <inputtype="text"> <inputtype="submit"value="提交"></form>form元素可以包含以下一个或多个表单元素：<input>、<label>、<textarea>、<button>、<select>、<option>、<fieldset>等等。4.10.2input标签<input>标签定义输入字段，用户可以在其中输入数据。<input>元素可以以多种方式显示，具体取决于<inputtype="value">设置的type属性值，用法示例：<inputtype="text"><inputtype="checkbox">下表4-5所示为type类型对应的不同取值。值描述button定义可点击的按钮（主要与JavaScript一起使用以激活脚本）。checkbox定义复选框。date定义日期控件（年月日，无时间）。datetime-local定义日期和时间控件（年、月、日、时间，无时区）。file定义文件选择字段和“浏览”按钮（用于文件上传）。hidden定义隐藏的输入字段。image定义图像作为提交按钮。number定义用于输入数字的字段。password定义密码字段。radio定义单选按钮。range定义范围控件（如滑块控件）。reset定义重置按钮。submit定义提交按钮。text默认。定义单行文本字段。time定义输入时间的控件（无时区）。week定义周和年控件（无时区）。表4-5input标签的type属性值4.10.3textarea标签<textarea>标签定义一个多行的文本输入控件。可以通过cols和rows属性来规定textarea的尺寸大小，不过更好的办法是使用CSS的height和width属性。4.10.4select标签 <select>元素用于创建下拉列表。该元素需要设置name属性，如果省略name属性，下拉列表中的数据将不会被提交。用法示例：<label>请选择一个汽车品牌：</label><selectname="cars"> <optionvalue="byd">比亚迪</option> <optionvalue="geely">吉利</option></select>听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习1】完成百度首页搜索区域的效果，如图4-114所示。（1）编写对应的HTML代码，如图4-115所示。（2）编写相应的CSS代码，如图4-116所示。（3）保存文件后，预览页面效果。【练习2】完成如图4-117所示的新浪用户登录窗口。（1）编写HTML代码，如图4-118所示。图4-118HTML代码（2）完成对应的CSS代码，如图4-119所示。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10练习：百度界面表单标签代码正确，书写缩进规范20Css样式定义正确，预览效果一致。20练习：新浪登录界面表单标签代码正确，书写缩进规范20Css样式定义正确，预览效果一致。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）form标签及相关属性。（2）input标签及常见类型。（3）textarea标签及相关属性（4）select标签及相关属性。（5）从课本自行学习input常见类型，完成简单用法的代码。听讲归纳本任务的开展情况，梳理知识点。采用归纳法分析班级完成的任