1
2
3
4
5
6

HTML5的表单设计

发布时间:2021-09-10 14:32   发布人:张晓诺   浏览次数:353

 任务3:HTML5 表单设计 】

        表单网页是一个网站和访问者开展互动的窗口,下面是表单网页设计引的一些基本知识和表单美化方法。表单可以用来在网页中发送数据,特别是经常被用在联系表单-用户输入信息然后发送到Email中。表单本身是没 有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML,你能够自助地找到一些简单的教程, 开发一个服务器端的程序使一个发送到Email的表单工作。

【 案例展示 】

image.png

学习任务

重点、难点

突破方法

1.网页表单设计

1. 表单元素

2. 教学难点:HTML5新增表单元素。

采用翻转课堂、项目导入的教学模式,采用分组讨论、案例教学、演示动画等教学方法,运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握表单属性的使用方法

2.掌握表单属性的使用方法。


1.能根据不同的情况对表单属性进行合理的使用

2.能对表单属性错误检查


1. 养成积极主动学习意识;

2. 养成勤于动手的习惯;

3. 培养团队合作能力。

课程思政


                          


【 视频讲解】

知识储备及案例实现

1、表单自动完成功能1qvod.jpg

2、表单自动完成功能2qvod.jpg

3、表单input元素新属性1qvod.jpg

4、表单input元素新属性2qvod.jpg

5、表单input元素新属性3qvod.jpg

6、表单input元素新属性4qvod.jpg


【 资料下载 】

单元设计

HTML5 表单设计

课程教案

HTML5 表单设计

演示文稿

HTML5 表单设计

任务工单

HTML5 表单设计

案例源码下载

       HTML5表单设计

       style07.css

       自动完成功能

课内同步项目

     HTML5表单设计——测试

课外扩展项目

       css3动画商务宽屏科技Bootstrap整站.rar  

练习题

1、练习1

疑难问题解答

1、HTML5的表单使用技巧有哪些?