《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第14课 使用CSS3美化表单

第课第课使用CSS3美化表单的基基本本14421PAGE61421使用CSS3美化表单第1421使用CSS3美化表单第课PAGE71412使用CSS3美化表单第1412使用CSS3美化表单第课PAGE1

课题使用CSS3美化表单课时2课时（90min）教学目标知识技能目标：（1）学习CSS3美化表单背景的方法（2）掌握使用CSS3美化表单控件思政育人目标：通过本节课的学习，提高学生的审美能力和实践能力，培养学生深入思考和独立思考的良好习惯，并通过大量典型案例，使学生将理论和实践结合起来教学重难点教学重点：掌握CSS3美化表单背景和表单控件的方法教学难点：使用CSS3美化表单背景和表单控件教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：考勤（2min）→导入新知（4min）→知识讲解（18min）→课堂练习（14min）→交流讨论（7min）第2节课：案例分析（34min）→课堂小结（7min）→作业布置（4min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】介绍表单控件的优点，引出新知识点表单控件有许多其他元素所不具备的状态，如获得焦点、选中等，设置这些状态下的样式能够使表单在易读的同时更加美观。通过CSS3语言对表单进行设置，让其可以达到上述的要求【学生】思考、讨论通过对表单控件优势的介绍，让学生主动思考如何美化表单，激发学生的求知欲知识讲解

（18min）【教师】讲述设置表单背景的方法设置表单背景在网页中应用表单时，一般会为表单设置背景颜色或背景图像，以符合整个页面的风格，增强表单的可用性。【教师】演示【例7-11】操作流程，制作用户登录表单在<style>标签中的form{…}内添加以下代码，为表单域添加渐变背景。background:linear-gradient(#fffad2,#b69e4555%,#fffad2);在<style>标签中添加以下代码，为表单控件添加背景颜色与背景图像。input.in_id{text-indent:2em;background:#ffffffurl(images/id.png)no-repeat2%center;}input.in_pw{text-indent:2em;background:#ffffffurl(images/pw.png)no-repeat2%center;}/*设置两个表单控件的缩进、背景颜色与背景图像*/【教师】讲述设置表单控件获得焦点时的样式设置表单控件获得焦点时的样式当鼠标指针单击输入型文本框时，光标出现在文本框中，即称其获得了焦点。部分表单控件具有获得焦点时的样式效果，不同浏览器的效果有所不同。在实际的网页制作中，通常需要重新设置该样式，以符合网页的整体风格。【教师】演示【例7-12】操作流程，制作用户注册表单在<style>标签中添加以下代码，设置表单控件的样式input{border:solid1px#9f9fd9;}/*设置表单控件的边框*/input:focus{border:solid2px#55557f;background-color:#f3f4ff;outline:none;}/*设置表单控件获得焦点时的边框与背景颜色，去除轮廓线*/【学生】聆听、思考、理解【教师】讲述设置单选钮与复选框的样式设置单选钮与复选框的样式单选钮与复选框的默认样式比较单一，无法满足网页设计的需求，往往需要使用CSS3重新设置它们的样式。而使用CSS3只能简单设计单选钮与复选框的样式。为满足需要，可以先将单选钮或复选框隐藏，再通过设置其提示信息的样式来实现单选钮与复选框的功能。这就要用到伪类选择器“:checked”，它可以匹配选中的单选钮或复选框，搭配其他选择器使用就可以匹配到选中的单选钮或复选框的提示信息。设置了相应提示信息的样式之后，就可以通过提示信息的样式变化提醒用户选择了哪个选项，从而在单选钮或复选框隐藏显示的同时不影响使用它们的功能。【学生】聆听、思考、理解【教师】巡视课堂，指导学生理解知识内容通过讲解知识点，让学生了解CSS3美化表单的基本操作课堂练习

（14min）【教师】布置课堂练习内容制作基本信息表单，设置单选钮与复选框的样式，页面效果如图7-20所示。未选中单选钮选中复选框未选中单选钮选中复选框图7-20基本信息表单的页面效果【教师】分析课堂练习在<style>标签中输入以下代码，设置提示信息的样式input[type="radio"]+label,input[type="checkbox"]+label{background:linear-gradient(#d3cdf110%,#d6dbff50%,#d3cdf1);border-radius:10px;padding:0px15px;margin-left:15px;text-shadow:none;border:solid2px#b5c5fc;color:#55557f;}/*设置单选钮与复选框对应提示信息的渐变背景、圆角、内边距、左外边距、文本阴影、边框与文本颜色*/input[type="radio"]:checked+label,input[type="checkbox"]:checked+label{color:#fcffee;background:linear-gradient(#53667f10%,#99b4ff50%,#53667f);}/*设置选中单选钮与复选框时，对应提示信息的文本颜色与渐变背景*/【学生】阅读题目，对不理解的地方进行提问【教师】回答学生提问，指导学生【学生】完成课堂练习【教师】公布参考答案【学生】对照参考答案，修改内容利用练习法，培养出学生对CSS3美化表单操作的经验交流讨论

（7min）【教师】组织交流讨论设置交流讨论内容，以小组为单位进行讨论（1）CSS3美化表单和美化表格的不同之处在哪里（2）CSS3设置表单背景图像和背景颜色的不同（3）如何快速使用CSS3设置复选框格式【学生】参与交流讨论【教师】随机抽取小组讲述交流内容【学生】讲述交流内容，形成书面汇报【教师】收取小组汇报通过交流讨论，提高学生的交流表达能力，巩固知识点第二节课案例分析

（34min）【教师】多媒体展示案例内容制作大学生职业规划调查问卷，页面效果如图7-23所示图7-23大学生职业规划调查问卷的页面效果【学生】聆听、思考、理解【教师】给出问题分析除了常用的“:focus”与“:checked”选择器之外，CSS3还提供了能够匹配其他形式表单控件的伪类选择器，主要有以下几种（1）:disabled。匹配禁用的表单控件。（2）:enable。匹配可用的表单控件。（3）:required。匹配必填的表单控件。（4）:optional。匹配非必填的表单控件。（5）:invalid。匹配输入非法值的表单控件。（6）:valid。匹配输入合法值的表单控件。【学生】写出程序伪码，画出流程图【教师】显示参考代码在<style>标签中添加以下代码，设置单选钮与复选框及其提示信息的样式。input[type="radio"],input[type="checkbox"]{display:none;}/*隐藏单选钮与复选框*/input[type="radio"]+label,input[type="checkbox"]+label{border:solid2px#8e9bc6;padding:1px5px;margin:5px2px;background-color:#f7fffe;}/*设置单选钮与复选框对应提示信息的边框、内外边距与背景颜色*/input[type="radio"]:checked+label,input[type="checkbox"]:checked+label{border:solid2px#55557f;background-color:#55557f;color:#f7fffe;}/*设置选中单选钮或复选框时，对应提示信息的边框、背景颜色与文本颜色*/继续在<style>标签中添加以下代码，完善提示信息的样式。.self{text-indent:3em;}/*设置个人信息部分的缩进*/.selfspan{margin-right:60px;color:#aa0000;}/*设置个人信息部分文本“*”的右外边距与文本颜色*//*设置所有绑定表单控件的提示信息的文本颜色、圆角与字体加粗*/label:not([for]){font-size:1.2em;font-weight:bold;}/*设置所有未绑定表单控件的提示信息的字号与字体加粗*/继续在<style>标签中添加以下代码，设置必填表单控件的样式。input:required{background-color:#fefff4;border:solid2px#8e9bc6;}/*设置必填表单控件的背景颜色与边框*/【学生】观察代码，对比自身内容，思考【教师】讲解代码【学生】聆听、思考、记录通过对经典案例的分析、讲解，加深学生对本章内容的理解课堂小结

（7min）【教师】简要总结本章的知识要点本节课学习了使用CSS3美化表单背景和表单控件的方法。希望同学们在课下多加练习，熟练掌握所学知识。【学生】总结回顾知识点总结知识点，巩固印象作业布置

（4min）【教师】布置课后作业在DW中打开本书配套素材“项目7”→“项目实训”→“eol”→“signup.css”文档，按照以下要求修改文档（1）将“用户注册”标题的文本颜色设置为“#9a3012”，字号为1.8em，上内边距为25px，文本阴影为“1px1px1px#ffaa7f”，添加背景图像（images文件夹中的bg_1.png）、背景图像不重复、显示位置为“50%90%”（2）将提示信息的字号设置为1.2em，字体加粗，文本颜色为“#ca5303”，文本阴影为“1px1px2px#ffaa7f”（3）设置文本框的边框宽度为2px，颜色为“#ff9e4e”，样式为单实线（4）设置文本框获得焦点时的边框宽度为2px，颜色为“#c18060”，样式为单实线，背景颜色为“#e1e1e1”，去除轮