所有表单对象_【第十课】常见的表单

前言

从零开始学前端系列课程，与传统的视频大课堂教学不同，没有填鸭；也普通做练习题的方式不同，没有假想的模拟题。

本课程拆出80个左右必须掌握的技能点，并对其分组，从易到难地列出学习曲线。同时从真实项目中拆解出与技能一一对应的不同难度的任务，通过解决任务来巩固夯实知识。

这就是IT修真院集自适应学习、师兄辅导、在线一站式学习的DWS学习法（Learning by Doing ，Learing by Wrong ,Learning by Share），在实战中学习，在试错中学习，在分享中学习。

经过线下5年多的实践探索，通过21万多篇学习日报，实现了1500余名结业学员99%就业率的教学成果。

从零开始学前端系列课程的任务分为两大部分，从CSS到JS，每一部分大概有15个左右的任务。每个部分分为技能任务阶段和复盘任务阶段，在任务实践中完成从技能学习到项目经验的积累。

---

一、这次将要执行的任务

二、为什么要开始这个任务

1.这个任务需要学会什么技能，为什么要优先学习这个技能？

这个任务需要学会用CSS制作流程图，这是在电商网站上非常常用的一个模块，通过这个任务的练习，可以举一反三，理解如京东下单的物流的纵向流程图是怎么制作的。

2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案？

这个任务除了有新的应用型模块“流程图”拓展设计思路外，主要是再次对表单的样式进行集中的练习，加深对表单元素样式模拟的掌握度。同时可以思考表单还有其他什么元素，又应该如何去模拟它们的样式。

3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成？

这个任务所需的基础知识都已通过前面的任务掌握了，所需要的是灵活运用这些知识来完成任务。

4.做这个任务设置了哪些具体步骤，为什么这么设计？

这个任务非常简单，其步骤也非常简单。所需要的不过是写好一个响应式的页面，然后拓展思路想办法，用CSS很巧妙地去完成里面的一些小元素。以后工作在中，遇到的新奇设计也能开动脑筋，将设计转成页面。

5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料？

没有对齐，是初学者常犯的一个错误。需要记住的是，前端开发人员可以没有审美，但是不能没有基本的原则：对齐。无论分辨率是多少，都应该让里面的元素或内容，以某种既定的规则对齐。

6.怎么样才算把这个任务完成了，验收标准为什么要这么制订？

代码规范，没有BUG，响应不同分辨率，兼容现代浏览器如chrome、firefox、safari等，IE浏览器则需要兼容到IE10以上。

7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间？

我们认为这个任务大概需要24个小时即可完成，但每个人的基础知识学习能力等情况各不相同。对这方面本来就有基础或者是学习能力特别好的好人可能只需12个小时，而初次接触这些内容对这方面不是太敏感的同学则可能要花费长大48多个小时的时间。时长在这些时间之内都非常正常，如果有远远超出这个时间也未能做出的同学则应该多去请教一下各位完成过任务的师兄们，也许这个时候只需要旁人稍稍提点几句就能获得突飞猛进的进步。

8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？

在这一节里，应该没什么特别困难的地方，希望所有人都能完成任务。

---

三、学习任务之前要先学会哪些知识点

用于表单的通用HTML结构

除了特定于HTML表单的结构之外，还应该记住表单同样是HTML。这意味着您可以使用HTML的所有强大功能来构造一个HTML表单。

正如您在示例中可以看到的，用<div>元素包装标签和它的小部件是很常见的做法。<p>元素也经常被使用，HTML列表也是如此（后者在构造多个复选框或单选按钮时最为常见）。

除了<fieldset>元素之外，使用HTML标题（例如，<h1>、<h2>）和分段（如<section>）来构造一个复杂的表单也是一种常见的做法。

最重要的是，你要找到一种你觉得很舒服的风格去码代码，而且它也能带来可访问的、可用的形式。

它包含了从功能上划分开并分别包含在<section>元素中的部分，以及一个<fieldset>来包含单选按钮。

---

四、开始动手做吧

1.（环境搭建）观察任务描述，揣摩开发要点（0.5小时） 
2.（环境搭建）配置本地nginx，本地启动服务器通过配置的域名访问新创建的页面（1小时） 
3.（编码实战）按头部底部等大模块，搭建项目基本布局（3小时） 
4.（编码实战）制作头部之后的流程图，注意不同分辨率下的显示（4小时） 
5.（编码实战）制作主体表单，用css+div模拟原生表单并保证元素功能完好，注意不同分辨率下的显示（6小时） 
6.（编码实战）通过改变浏览器宽度的方式，检查各个模块是否显示良好，并调整代码结构和内容（6小时） 
7.（代码重构）根据代码规范优化自己的代码（4小时） 
8.（环境搭建）上传到学员服务器（0.5小时） 
9.（代码调试）使用不同设备访问网址查看页面（0.5小时） 
10.（思考答疑）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时） 
11.（思考答疑）写日报总结学到的知识点和难点是如何解决的，完成后提交审核（1小时） 
12.（JS前期准备）查看W3C中的JS语法，重点理解变量，函数，对象，作用域，数组，IF ELSE，For 循环的含义（1小时） 

五、验收自己的成果

1.橙色进度条和按钮都不使用切图的方式
2.一组单选按钮只能同时选中一个
3.表单能适应小屏幕，改变内容布局
4.配置nginx，在pc和手机能正常访问

六、来做一次深度思考

1.如何改变默认radio和select的样式？ 点击查看相关小课堂
2.自适应小屏幕设备时，该如何布局？ 点击查看相关小课堂

七、总结自己的知识图谱

总结任务中遇到的问题困惑和疑难，用自己的语言将学到的知识记录下来