HTML标签 form
完整的 html form 表单其实已经满足了很多真正开发中的业务场景，例如分组，label 等一些常用的内容，但是好多框架都在底层上都用div来实现，或者保留了必须存在的标签，然后其他的内容用不同的容器来实现，毕竟效果图上的样式一般来说肯定不是默认样式，css不管怎么样都要写，少几个不同标签页省份心不是，或者自己也可以封装一套自己喜欢的 风格。
本篇文章不对封装做褒贬，只是闲来无事重新翻看 html 标签文档的时候，想着把原生标签给整理一下，用不用无所谓，但是至少要知道有这么个东西。虽然现在主流是引用不同的优秀框架，但是知道这些对阅读源码会提供不错的助力。
基于html5支持情况来编辑的文档，这里就直接融合了html5表单的新特性，会单独分一个目录重点标注出来，同样只是为了展示标签，样式和默认方法都不会做说明。
一、所有标签汇总
下面是一个完整的 form 表单
<!DOCTYPE html>
二、html5 表单新特性
html5表单新特性是众多面试题中经常出现的，单独提出来也有必要性，可以作为后续工作中的使用，虽然现在都爱用框架，但是知道这些基本的东西还是很有必要的。
- input
- input 增加了 dataList，实现了类似于 select 的风格，用来提示用户可填的内容，并加入到验证中去。
- input type属性在原来 button、text、password、radio、checkbox、file、hidden、reset、submit的基础上增加了：
- number 数字
- image 图片
- date 日期
- color 颜色
- range 范围
- search 搜索
- email 邮件
- tel 手机号
- url url地址
三、表单提交 默认验证
html5 表单提交的时候结合 html 以前版本，关于到 表单验证的属性有以下几个：
- required 必填
- pattern 正则验证
- min属性与max属性 长度限制
- step属性 步长
<!-- 将上面代码中用户名进行简单修改 -->
修改默认样式的思路是这样的：(纯原生，但是现在大部分框架都已经支持这个效果了，可以作为参考)
// 阻止默认气泡
四、封装思路
不难看出，可以根据以上的信息，完全可以设计一个封装form表单的的思路。
具体思路这样设计，有待验证：
第一步
扫一扫
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
