「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

input是平时开发非常常用的一个标签，但是你真的有好好的了解过它吗？一起来看看吧！

常用型

【text】创建单行文本

text属性，没什么好说的，创建单行文本输入框，是默认的输入类型。

<input type="text" placeholder="请输入内容">

这边可以提一下的是，input有自带的输入长度控制属性，可以限制输入的字符长度。

<input type="text" maxlength="4" placeholder="请输入搜索关键字" />
//只允许输入4个字符，超过将无法输入

【password】密码输入框

和text类似，区别是输入之后，内容会被小黑点代替

<input type="password" placeholder="请输入密码" />

【radio】单选按钮

单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。

注意：同一组选项按钮，name值一定要一致

 <div>
	 <input type="radio" id="huey" name="drone" value="huey" checked>
 	<label for="huey">Huey</label>
 </div>
<div>
	<input type="radio" id="dewey" name="drone" value="dewey">
	<label for="dewey">Dewey</label>
</div>
<div>
	<input type="radio" id="louie" name="drone" value="louie">
	<label for="louie">Louie</label>
</div>

顺带说一下 <label> 标签：

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

【checkbox】复选框

复选框，允许用户从给定数目的选择中选一个或多个选项

注意：和单选框一样，同一组选项按钮，name值需要要一致

 <p>
 	<input type="checkbox" id="cbox1" value="first_checkbox">
 	<label for="cbox1">这是第一个复选框</label>
 </p>
 <p>
 	<input type="checkbox" id="cbox2" value="second_checkbox" checked="checked">
 	<label for="cbox2">这是第二个复选框，并且被默认选中了</label>
 </p>

【button】按钮

没有默认行为的按钮，上面显示 value属性的值，默认为空。

可以通过设置onClick调用点击事件。

<p>什么都没有的一个按钮</p>
<input type="button">

<p>有value值的按钮</p>
<input type="button" value="点击我"  onClick="clickMe">

【submit】提交按钮

用于提交表单的按钮。

和普通按钮的区别是：不需要设置onclick，在单击提交按钮时也会向服务器发送表单数据，数据会发送到表单的 action 属性中指定的页面；

相关资料： MDN input submit Sending form data

【file】文件上传

让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。

<label for="avatar">选择一个头像图片:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">

时间型

【date】日期控件

输入日期的控件（年、月、日，不包括时间）。

value-默认值
min-日期最小值
max-日期最大值

 <input id="date" type="date" value="2021-06-01" min="2021-01-01" max="2022-01-01">

【time】时间控件

用于输入时间的控件（时、分），不包括时区。

  <input type="time" />

【week】周年控件

用于输入以年和周数组成的日期，不带时区。

<input type="week" />

【month】年月控件

定义 month 和 year 控件（不带时区）。

 <input type="month" name="bdaymonth">

【datetime-local】日期时间控件

定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。

 <input type="datetime-local" name="bdaytime">

了解型

【number】数字控件

让用户输入一个数字，其包括内置验证以拒绝非数字输入，即只能输入数字。

浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值。
拥有动态键盘的设备上会显示数字键盘。（比如移动端）
不支持 "number" 类型的浏览器会改用标准的 "text" 输入框。

<input id="number" type="number">

【range】数字范围控件

定义用于精确值不重要的输入数字的控件

max - 规定允许的最大值。
min- 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。

  <input type="range" name="points" min="1" max="10">

【color】颜色选择器

用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。

颜色选择器的value，指定颜色选择器默认选择的颜色。input的value值必须是长度为7的字符串，以#开始，包含16进制格式的颜色值。例如：#FF0000为红色的16进制值。

<p>没有指定默认颜色</p>
<input type="color" />

<p>指定默认红色</p>
<input type="color" value="#ff0000" />

【reset】重置按钮

此按钮将表单的所有内容重置为默认值。不推荐。

通常应该尽量避免在表单中包含重置按钮，它们很少有实用性，更有可能使用户误点。

相关资料：

MDN input reset

【hidden】隐藏域

隐藏域，定义隐藏输入类型用于在表单中增加对用户不可见，但需要提交的额外数据时

disabled属性无法与type="hidden"的input元素一起使用

<input type="hidden" name="hidden" value="提交的值"  />

其他

type='url': 输入URL字段，会自动验证url域的值

<input type="url" />

type='tel': 用来输入电话号码，在手机端会唤出数字键盘

<input type="tel" name="tel" />

type='search': 搜索字符串，在手机端会唤出搜索按键

<input type="search"  />

type='email': 输入“email”地址，会自动验证email域的值，在手机端会唤出英文键盘

<input type="email" />

type='image' : 图像按钮，带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src缺失，alt属性就会显示。

<input type="image" src="" name="确定" width="90" hieght="30" />

注意: 点击激活图片按钮 input type="image" 会发送 X 和 Y 坐标到服务端

type='datetime': 日期加时间控件（已废弃）

参考资料：MDN input

🎨【点赞】【关注】不迷路，更多前端干货等你解锁

往期推荐

input标签的23种用法详细总结

常用型