第一次听到这个问题，是一位前辈分享他面试别人的题目，乍一听，这么没营养的也问？
或许他只是随便一说，我却记住了，因为转念一想，好像真说不全，text、submit、checkbox、radio…还有啥来着？
常见的需求：
- 登录/注册
- 输入金额
- 填写个人资料
除此之外，其他场景貌似不多，但就算这些，也不是每款产品都需要，再加上HTML5加入的新成员，更加难以捉摸。
本篇文章我们就一起回顾一下，当然，鉴于其本身内容较多，我们只看那些较“实用”的。
表现
为更好区分和记忆，可分为如下几类。
手动输入
input本意就是输入，所以，它肯定存在一个 text （文本）类型.
但是，虽然都是文本，也有不同形式的特定需求。
text:文字
number:数字
password:密码
tel:电话号码
email:邮箱地址
search:搜索框
url:链接
以上几种，从输入框的表面来看，只有数字是不同的，可以使用箭头操作。
更多细节：
number类型可以设置最大和最小值，且可以设置数字变化的幅度（step）
密码的输入不可见
号码、url和邮箱类型，输入框获得焦点后，会弹出更利于输入的键盘种类，比如：纯数字，或者带有@、.com等符号。
跟搜索框相关的，一个是联想列表 datalist，每输入一个字，就会出现相关的搜索列表或者热搜词（当然，这些需要js和数据作为支撑），更强大的是，一边输入，一边直接出现相关的搜索结果。
它们中的大多数，看起来没有明显区分，但在浏览器实现层面，如果你使用了某个类型，而格式又不相符的时候，可能会有错误提示。
点击选择
radio:单选checkbox:复选time:时间date:日期month:月份week:周color:颜色range:范围、界限
这里需要注意的是，日期和时间，以及月份、周之间有什么区别呢？
- 时间，几点几分
- 日期，某年某月某天
- 月，某年某月
- 周，某年第几周
它们都是指代某个时间点，但由于粒度不同，可以分别适配特定的场景，而不用再对数据进行额外的处理，当然，需要的话，也可以组合使用。
功能性
file：上传文件。
image：可以把图片当做表单元素（按钮）来使用。
按钮
button:按钮submit:提交reset:重置
三者看起来都是按钮的样子，且提交和重置按钮会自带文案，button则需要增加value才可以。
从用处看，提交按钮是用来提交整个表单，而重置是将表单重置为默认值，一般来说，这是一个带有风险的操作，需谨慎使用。
而button类型就是单纯地按钮，没有默认操作，需要JS绑定事件进行操作。
还有一种，并非由用户输入，就是hidden类型，它可用于那种并不需要在页面展示，但仍用得到的数据。
属性
HTML的属性是个易忽视的点，大家习惯于用CSS实现样式，用JS来实现交互甚至数据传输，却忽视了HTML本身也可以做一些事情，譬如，笔者就曾被editable属性给惊呆了，所以，本文我们来看看，关于表单，有哪些能发挥重要作用的属性。
disabled:字面意思，我们定义类名时也常用，就是禁用。
checked:首次加载即被选中。
readonly:只读，不可更改。
placeholder:可输入内容的提示。
autocomplete:自动补全，一个增强体验的属性，很多时候可减少输入。
autofocus:自动获取焦点，在打开页面之后，帮助用户直接获取某表单的焦点进行输入。
pattern:规定输入字段的正则匹配模式。
required:必填项。
novalidate:提交表单时不验证。
它们当中，有些不需要被设定某种值的属性是不需要写属性值的，比如：checked、required、readonly等。具体用法和效果，还请读者自行试验了~
小结
我相信，你可能真的没想到，小小input居然有这么多种，就像曾经有人问我，我说”反正就是很多“，这么说也没错，但肯定是不会加分的，所以，本文简单汇总一下，就算温习了。
