基本信息
文件名称:Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版) 教案 第14讲次 任务15 表单与input元素.docx
文件大小:990.87 KB
总页数:7 页
更新时间:2025-05-27
总字数:约1.41千字
文档摘要

教案

序号:14

授课日期

课时数

4

章节名称

任务15表单与input元素

教学内容

重点

表单与input元素。

难点

input元素的属性。

教学目的与要求

理解表单的属性和作用。

熟悉常用的表单元素。

了解网页中常用的表单功能。

教学方法

与手段

教师采用任务驱动法,使用教学PPT辅助授课。

教师操作演示,学生实训练习。

学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。

作业及

思考题

完成课堂上未完成的习题,通过网络平台上交作业。

通过回帖的方式回答课上留下的思考题。

预习下一节内容。

讲授内容

课堂组织

第一学时

(任务15过渡与变形属性

15.1认识表单、15.2创建表单)

实操任务目标发布

实战演练——制作登录界面

图14-SEQ图\*ARABIC\r11登录界面

强化训练——制作简历表单

图14-SEQ图\*ARABIC2简历表单

知识准备

认识表单

表单:用于收集用户在客户端提交的信息,并将这些信息发送给服务器进行处理。如常见的搜索功能、用户登录功能、注册功能等。

组成:表单元素(也叫表单控件)、提示信息和表单域。

图14-SEQ图\*ARABIC3表单的组成

创建表单

表单定义:

formaction=url地址method=提交方式name=表单名称

各种表单元素

/form

action属性:接收表单数据的服务器程序的url地址。

method属性:表单数据的提交方式。

(1)get:默认值,提交的表单数据将显示在浏览器的地址栏中,保密性差,且有数据量的限制。

(2)post:表单数据传递的保密性较好,并无数据量的限制。

name属性:定义表单的名称。

autocomplete属性:控制表单自动完成功能的开启和关闭。

novalidate属性:规定当提交表单时不对其进行验证。

第二学时

(任务15过渡与变形属性

15.3input元素及属性)

知识准备

input元素及属性

input元素:表单中最常用的元素,它可以定义单行文本输入框、密码输入框、单选按钮、复选框、提交按钮、重置按钮等。

语法格式:inputtype=控件类型/

第三学时

实战演练——制作登录界面

案例描述:设计并制作网站登录界面,网页效果如下图1所示。当光标移到按钮上时,光标图案和按钮背景颜色会发生变化,如图2所示。

图14-SEQ图\*ARABIC4“登录界面”网页

图14-SEQ图\*ARABIC5鼠标指针移至按钮上时的效果

图14-SEQ图\*ARABIC6“登录界面”的网页布局

第四学时

强化训练——制作简历表单

案例描述:设计并制作简历表单,网页效果如下。

图14-SEQ图\*ARABIC7“简历”表单

图14-SEQ图\*ARABIC8“简历”表单的网页布局

课后实训

图14-SEQ图\*ARABIC9“会员登录系统”表单

图14-SEQ图\*ARABIC10用户输入登录信息时的效果

发布任务,学生能够有目标地进行学习

教师讲解

学生操作巩固

教师讲解

学生操作巩固

理论讲解

教师操作演示

学生练习

学生练习