「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」
上一节介绍了 form 的一些能力，本篇来看 form 中最重要的 input 元素。
input
input 是最基础的用户输入标签，最基础的表现是一个文本框，可以采集用户输入内容，除了用于 from 也常用于其他输入框场景，是一个非常常用的标签。
input 不止可以用作普通的文本输入框，它有一个 type 属性，可以用来设置输入标签的类型，不同的类型展示出的 UI 效果也不相同，覆盖了大部分数据采集场景。由于不同的 type 的作用是完全不同的，因此 input 的其他属性也与 type 强关联，接下来看一下都有哪些可以使用的类型。
text
不设置任何值时默认为 text 类型，这个是最简单的 input，用来输入单行文本，样式就是一个最普通的输入框。input 只能输入单行文本，换行会被自动忽略，如果想输入多行文本需要使用 textarea 标签。
tel、email、number、password、search、url
从样式表现上来看，这几个与 text 类似，渲染出来的都是单行输入框，因此把这几个放在一组介绍。从命名上大概可以猜测出对应类型代表的含义，我们来看一下这几个的差异：
- tel：电话号码类型，在移动端会调起电话号码键盘，由于不同国家电话格式差异较大，因此不会对内容合法性进行校验。
- email：电子邮件类型，如果平台支持会调起 email 键盘，提交时会校验格式是否合法。
- number：数字类型，移动端会调起数字键盘，部分浏览器在输入框尾部会渲染步进器，自带输入限制，不允许输入非数字元素（除了数字，小数点，正负号，表示科学计数法的 e 也都是数字元素）。
- password：密码输入，回显内容会被隐藏，在非安全环境会提示。
- search：搜索，在尾部会渲染清空按钮，在移动平台如果键盘支持会显示回车。
- url：url 输入，支持校验内容，在特定平台会展示专用键盘。
date、datetime-local、month、time、week
这几项都与时间相关，此外还有一个 datetime 已经废弃，这部分会渲染成对应的时间或日期的选择器，这部分内容在不同浏览器下 UI 差异会很大，对应的内容从命名上可以看出来：date（年月日）、datetime-local（年月日时间）、month（年月）、time（时间）、week（年周）。
button、reset、submit
这几个都是渲染按钮，效果与 button 的 type 属性类似，现在可以直接使用 button 标签来实现，input 这里就不展开了。
radio、checkbox
radio 为单选框，设置相同 name 的 radio 作为一组选项，同一组中只能选择一个。
checkbox 为复选框，设置相同 name 的 radio 作为一组选项，同一组可以选择多个。
除了用作复选，只使用一个 checkbox 也可以作为开关，用选中与未选中来切换 boolean 数据。
range
拖动条，可以指定一组范围，拖动选择。
image
image 类型是一个图片提交按钮，表现为一张图片，当图片无法显示时展示 alt 属性值。
color
颜色选择器，可以取 16 进制的色值。
file
文件上传，使用 accept 指定文件类型，对于多媒体类型可以指定 capture 来触发多媒体采集。
hidden
什么都不显示，用来提交一些隐藏内容，可以用在防止 csrf 等场景。
以上就是 input 支持的一系列类型，前面提到过 input 的属性比较特殊，通常不具备通用性，因此不适合展开介绍，可以根据需要到查询 MDN 查询。
