资源简介

课题 网页表格与表单( 二 ）
课时 2课时（90 min）
教学目标 知识技能目标： （1）熟悉表单的基本结构 （2）能够在网页中添加表单 （3）熟悉表单控件的种类 （4）能够在网页中添加表单控件 （5）能够设置表单样式 思政育人目标： （1）勤动脑、多思考，持续提升工作能力。 （2）了解我国高铁的辉煌成就，提升民族自豪感。
教学重难点 教学重点：表单控件的种类 教学难点：在网页中添加表单控件
教学方法 情景模拟法、问答法、讨论法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（10 min）→传授新知（23 min）→课堂抢答（15 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在Dreamweaver CC中如何添加表单 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望
考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况
问题导入 （10 min） 【教师】提出以下问题： 在网页中表单的作用是什么？ 【学生】思考、举手发言 表单是实现用户与网站沟通的重要元素，主要用于数据的收集与处理。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容
传授新知 （23 min） 【教师】通过学生的发言，引入新的知识点，介绍使用Dreamweaver CC添加表单，表单控件并设置样式 一、添加表单 【教师】展示Dreamweaver CC中表单的添加界面，帮助学习理解 使用Dreamweaver CC可以直接在网页文档中添加表单，将插入点置于想要添加表单的位置；然后打开“插入”面板，在最上方的下拉列表中选择“表单”选项，面板中显示“表单”列表；接着单击“表单”按钮 、“标签”按钮 和具有某种功能的表单控件按钮（如“文本”按钮 ），可添加一个简单的表单结构。 （详见教材） 【教师】展示Dreamweaver CC中表单的基本结构，帮助学习理解 表单结构通常包括表单域与表单控件。其中，表单控件至少包含一个提交按钮。此外，为使表单更具实际意义，可在表单域中添加提示信息。一般将表单控件和提示信息统称下面进行几点说明。 （1）表单域：放置表单控件与提示信息的容器，用于收集用户输入或选择的数据，并以一定的方式传送到服务器。 （2）表单控件：体现表单功能的控件，如文本框、单选钮、复选框、提交按钮、搜索框等。在HTML5中，标签及若干其他标签可用于标记表单控件。 (详见教材) 【课堂互动】教师提出以下问题： “表单”按钮及“标签”按钮有何区别？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 “表单”按钮表示表单域；“标签”按钮表示提示信息；其余各按钮表示其他各种功能的表单控件 二、表单控件 1．常用表单控件 【教师】展示HTML5中常用的表单控件按钮界面，帮助学习理解 表单控件用于收集用户在表单中输入的信息。在HTML5中，常用输入标签标记表单控件。通过为该标签设置不同的type属性值可以创建不同类型的输入型文本框，如密码框、单选钮与复选框等。 （1）“文本”按钮 表示文本框，用于输入简短的文本，如用户名、账号等。其代码为。 （2）“电子邮件”按钮 表示邮箱地址文本框，用于输入邮箱地址文本，它可以验证文本框中的内容是否符合邮箱地址的格式。其代码为。 （3）“密码”按钮 表示密码框，用于输入密码文本，其中输入的内容将显示为黑色的圆点。其代码为。 （4）“Url”按钮表示地址文本框，用于输入URL文本。 （5）“Tel” 按钮表示电话号码文本框，用于输入电话号码文本。 （6）“搜索”按钮表示搜索框，它能够记录输入的字符。 （7）“数字”按钮表示数值文本框，用于输入数字。 （8）“范围”按钮表示数值范围滑块，就是将数值文本框显示为一个可拖动的滑块，使用鼠标指针拖动滑块即可调节数值。 （9）“颜色”按钮表示颜色输入框，单击后将打开“颜色”对话框，可在其中选择颜色。 （10）“月”“周”“日期”“时间”“日期时间”“日期时间（当地）”按钮分别表示不同格式的日期时间文本框。 （11）“按钮”按钮，表示普通按钮，需要配合JavaScript使用。 （12）“‘提交’按钮”按钮，表示提交按钮。 （13）“‘重置’按钮”按钮，表示重置按钮。 （14）“文件”按钮，表示文件域。 （15）“图像按钮”按钮，表示图像形式的提交按钮。 （16）“单选按钮”按钮，表示一个单选钮。 （17）“复选框”按钮，表示一个复选框。 （详见教材） 【教师】提出以下学习任务： 我们刚刚已经学习了常用的表单控件，请同学们根据教材及教师讲解，总结常用表单控件的按钮样式，含义，用途及代码，最后形成表格提交至文旌课堂APP 【学生】思考、分析、完成表格 2．其他表单控件 【教师】展示HTML5中其他表单控件，帮助学习理解 （1）“文本区域”按钮 表示文本区域，用于输入大量信息，其代码为…。 （2）“选择”按钮 表示选择框，其代码格式为： 选项 …… （详见教材） 3．表单控件的属性 【教师】展示表单控件属性说明表格，帮助学习理解 （1）name属性用于设置表单控件的名称，value属性用于设置表单控件的默认值，为同一个表单控件设置这两个属性之后，服务器即可通过name属性值找到对应的value属性值。 （2）readonly属性用于设置表单控件中的内容不可修改，而disabled属性用于禁用表单控件。两者都会使输入型文本框变为不可编辑状态，但readonly属性无法作用于单选钮及复选框等控件。 （3）checked属性用于设置默认选中某个单选钮或复选框。 （4）autocomplete属性用于设置自动完成功能。 （5）autofocus属性用于设置表单控件自动获取焦点。 （6）form属性用于设置表单控件所属的表单。 （7）placeholder属性用于设置表单控件内的提示信息。 （8）required属性用于设置表单控件不可为空。 （9）pattern属性用于设置限制表单控件输入内容的正则表达式。 （详见教材） 【课堂互动】教师提出以下问题： 什么是正则表达式？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 正则表达式又称规则表达式，它使用特定的字符描述一种字符串匹配模式，用于检查字符串是否包含某种字符或是否符合某个条件等。关于正则表达式的具体内容，读者可查阅相关资料。 4．表单对象分组 【教师】展示HTML5中表单对象分组的界面，帮助学习理解 对于表单控件较多的表单，可将它们分组放置以便用户理解。在HTML5中，使用

标签为表单对象分组；使用

标签设置表单分组的标题。具体格式为：

分组标题

表单对象

（详见教材） 三、设置表单样式 【教师】展示CSS3中“focus”选择器的界面，帮助学习理解 因表单控件特有的交互属性，通常会通过伪类选择器匹配表单控件的各种状态，从而设置表单的样式。 （1）“:focus”选择器可用于设置表单控件获得焦点时的样式。当鼠标指针单击输入型文本框时，光标出现在文本框中，即称其获得了焦点。部分表单控件具有获得焦点时的样式效果，不同浏览器的效果有所不同。在实际的网页制作中，通常需要重新设置该样式，以符合网页的整体风格。 （2）“:checked”选择器可用于设置选中的单选钮或复选框的样式。 （3）“:disabled”选择器可用于设置禁用的表单控件的样式。 （4）“:enable”选择器可用于设置可用的表单控件的样式。 （5）“:required”选择器可用于设置必填的表单控件的样式。 （6）“:optional”选择器可用于设置非必填的表单控件的样式。 （7）“:invalid”选择器可用于设置输入非法值的表单控件的样式。 （8）“:valid”选择器可用于设置输入合法值的表单控件的样式。 （详见教材） 【课堂互动】教师提出以下问题： 在CSS3中，如何设置轮廓线？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 在CSS3中，可以使用outline属性设置轮廓线，突出元素的显示效果。文本框获得焦点时显示的边框效果实际上就是轮廓线。为了统一效果，通常会将其设置为“none”，表示去除轮廓线效果。在设置轮廓线样式时，设置方法与设置border属性的方法相同，它与border属性的区别就是轮廓线不会占用页面空间。 【课堂互动】教师提出以下问题： 如果想将单选钮或复选框隐藏，我们需要做些什么？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 单选钮与复选框的默认样式比较单一，无法满足网页设计的需求，往往需要使用CSS3重新设置它们的样式，而使用CSS3只能简单设计单选钮与复选框的样式。为满足需要，可以先将单选钮或复选框隐藏，再通过设置其提示信息的样式来实现单选钮与复选框的功能。 这就要用到伪类选择器“:checked”，它可以匹配选中的单选钮或复选框，搭配其他选择器使用就可以匹配到选中的单选钮或复选框的提示信息。设置了相应提示信息的样式之后，就可以通过提示信息的样式变化提醒用户选择了哪个选项，从而在单选钮或复选框隐藏的同时实现单选或复选的功能。。 【教师】演示使用Dreamweaver CC为表单添加单选钮组，并为其添加样式的方法 （1）在Dreamweaver CC中创建一个名为“ex4.html”的网页文档，将其网页标题修改为“设置表单样式”。 （2）将插入点置于标签中，打开“插入”面板，在最上方的下拉列表中选择“表单”选项，面板中显示“表单”列表，单击其中的“表单”按钮，添加一个标签。 （3）将文件保存，按“F12”键在浏览器中打开。此时的单选钮组为默认的页面效果，单击单选钮或其对应的提示信息都可以选中单选钮。 （4）在页面中定义样式。在