做项目的时候会遇到一个比较头疼的问题，一个大表单里面有好多控件，一个一个做设置太麻烦，更头疼的是，需求还总在变化，一会多选、一会单选、一会下拉的，变来变去的烦死宝宝了。
那么怎么解决这个问题呢？我们可以做一个组件来搞定这些烦人的事情。我们使用Vue.js基于原生HTML来做一套表单控件！前端不管是哪种框架、类库，其基础都是HTML、CSS和JavaScript，不管用什么方式写项目，我们都有必要先了解一下基础知识。所以呢我们先来看看HTML5的表单和表单元素都有哪些属性以及功能。
HTML5原生的表单和表单元素
要想做好表单组件，必须先知道HTML5里面的表单和表单元素都有哪些属性，以及属性的效果和作用，否则的话可能折腾半天才发现，原来HTML5已经自带了这个功能！
比如要实现这样一个功能：文本框只能输入数字，然后要加上两个按钮，按一个数值+1，按另一个数值-1。以前要写js代码实现，现在只需要把type改成number就可以了。而且可以对输入的文字做拦截，非数字根本输入不进去，这样就不用我们自己再去写代码实现了。所以磨刀不误砍柴工，我们先来整理一下，表单和表单属性都有哪些属性。
表单属性
首先是表单（<form>）的属性，<form>的属性主要是对表单元素做一个统一设定，比如表单里的元素是否需要自动完成的功能，以及提交的时候是否需要做验证等。如果某个表单元素不符合这个统一设定的话，可以给表单元素单独设置属性进行说明。这样就更灵活和方便了。
其他的就是通过submit按钮对表单进行一些控制的属性了。不过这些都是针对表单提交的，我们现在基本都是ajax，所以这些属性基本都用不上了。
表单元素的分类
表单元素都有哪些？说到分类就有点头疼，<intut>一开始理解是文本类的，输入嘛，结果现实却很丰满，提交按钮也用这个，还有单选和多选也是这个input。多行文本反倒不是这个了，而是单独的一个。不过不管那么多了，还是从使用的角度来分类：文本框类和选择类。
<intut>的type增加了一些新的类型，在PC机的浏览器里面看，区分不是很大，但是到了手机浏览器里面，区分就比较大了，主要是可以控制打开的输入法的默认模式。比如number，打开输入法之后，直接就是数字方式，这个就很人性化，方便用户操作。
我们先看一下分类：
HTML5新增特性
新增的特性（好吧也不算新了，都好多年了），主要是对文本框的增强，增加了一些类型以及辅助功能，比如增加了一个备选框（<datalist>）的功能，这个还是比较实用的吧。
在手机网页里的展现效果
表单元素在PC浏览器里是什么样子的，大家很容易看到，那么在手机浏览器里是什么样子的呢？先看一下表单整体效果：
注意看那几个带下三角的，那个不是下拉列表框，而是日期相关的，可以选择日期时间等。具体效果我们一个一个看。
1、单行文本type="text"
还是老样子的文本框，也是使用最多的表单元素。还是原来的样子，不贴图了。
2、多行文本<textarea > </textarea>
一般会被富文本编辑器代替。还是不贴图了。
3、密码 type="password"
这个就不一样了，系统不同表现也不同，比如某系统会变成系统特定的输入法，而不是用户设定的输入法，并且不让截屏，所以我只好拍照片了。
4、日期 type="date"
手机浏览器里面，如何方便的输入日期？很简单，只需要设置type=”date”就可以了，至于效果如何吗，就要看手机系统、版本、浏览器、输入法的了。我手头测试设备很少，不能全面测试，举一个作为例子，大家看一下效果图：
5、日期时间 type="datetime-local"
这个不仅可以选择日期，还可以选择时间。不过要注意type="datetime"是不行的（各大浏览器都不支持），要用type="datetime-local"才行。不多说了，看图。
6、时间 type="time"
单独选择时间的。
7、月份 type="month"
选择年和月的，不是只有月份。
8、周 type="week"
同理，也是选择年和周，一年内第多少周。
9、上传文件和图片 type="file"
上传功能，有一个特性，可以调用手机摄像头（后摄）拍照，然后还可以访问拍下来的照片，于是就产生了一种功能，扫码二维码。在网上找了半天，已经有测试成功的了。以前以为手机浏览器无法扫二维码呢，现在看来也是可以的。悄悄的透露一下地址：https://blog.csdn.net/yisuowushinian/article/details/50548742
10、选择颜色 type="color"
可以调用系统的调色板，选择颜色，不过对于我这样没有艺术细胞的人，只能是瞎点。
