admin 管理员组

文章数量: 1086019


2024年5月10日发(作者：鼠笼电动机原理示意图)

教案名称

知识目标

任务8 制作学生信息注册表单

掌握创建表单的HTML标记

掌握表单的CSS样式控制

计划学时 6学时

思政目标

引导学生做好职业规划，在课程学习中树立职业理想。

激发学生爱国热情、为科技强国而努力学习

创建表单的HTML标记

表单的CSS样式控制

表单的CSS样式控制

教学做一体化

线上+线下混合教学

教学活动及主要环节

第1、2学时

（表单的创建）

思政元素

切入点

随着互联

网的飞速

发展，各种

智能终端

的普及，前

端开发越

来越受到

重视，人才

需求量巨

大，不仅仅

是普通的

静态页面，

教学重点

教学难点

教学模式

课前发布任务：

观看学习通平台相关学习视频。

做课前测试题。

I.学生讨论：（10分钟）

表单的标记是什么？表单控件有哪些？

II.重难点内容讲授：

一、 认识表单 （5分钟）

更多的是

表单是允许浏览者进行输入的区域，可以使用表单从客户端收集信息。浏

页面的冲

击和美感

览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应

的享受。

用程序会对这些信息进行处理并响应，这样就完成了浏览者和网站服务器之

激发学生

间的交互。 学好该门

HTML5新增了很多表单控件，完善了表单的功能，新特性提供了更好的

课，成为未

来的优秀

用户体验和输入控制。

Web前端开

表单的构成：

发工程师。

 表单域（

标记）：标记是一个包含框，是包含表单控件的

容器。

 提示信息：表单控件周围用于提示输入内容的文字。

 表单控件（标记等）：用于输入用户信息的控件，如文本框、密

码框、单选按钮、复选框和按钮等。

二．表单标记 （10分钟）

表单是一个包含表单控件的容器，表单控件允许用户在表单中使用表单域

输入信息。可以使用标记在网页中创建表单。表单使用的标记

是成对出现的，在开始标记和结束标记

之间的部分就是一个表

单。

通过编写

表单的基本语法及格式如下。

CSS代码，

让学生了

autocomplete=”on|off” novalidate>

解代码书

……

写要遵循

规范，小错

标记主要用于处理和传送表单信息，其常用属性的含义如下。

误可能会

（1）name属性。给定表单名称，以区分同一个页面中的多个表单。

影响大局

（2）action属性。指定处理表单信息的服务器端URL。

面，要养成

（3）method属性。用于设置表单数据的提交方式，其取值为get或post。

严谨细致

其中，get为默认值，以这种方式提交的数据将显示在浏览器的地址栏中，保

的工匠精

密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，

神。

使用method="post"可以大量提交数据。

（4）autocomplete属性。用于指定表单是否有自动完成功能。所谓“自

动完成”，是指将用户在表单控件中输入的内容记录下来，当再次输入时，

会将输入的历史记录显示在一个下拉列表中，以实现自动完成输入。该属性

的取值有on和off，若该属性值为on，则表示有自动完成功能，否则表示没


本文标签： 表单 信息 输入 控件 学生

版权声明：本文标题：信息注册表单电子教案 Web前端开发案例教程(HTML5+CSS3) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1715338844a687383.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。