写表单，是很多前端最头疼的事情之一。为了一个输入校验，一个日期选择，或者一个邮箱格式验证，不是写一堆 JS，就是直接上一个几十 KB 的表单库。

但其实很多人忽略了一件事：HTML 原生的 <input> 已经内置了大量功能。只要用对类型，很多校验和交互浏览器都能帮你搞定。

今天这篇文章就将整理好的Input 类型全部分享出来，用好了，可以帮助我们少写50%的代码。

我们能用原生解决的，就别再重复写多余代码了。

下面我们开始今天的内容。

一、 文本和密码类 

01、type="text" 

最常用的单行文本输入框。

<input type="text" name="username" placeholder="输入用户名">

02、type="password" 

密码输入框，输入的内容会变成黑点。

/

03、type="search"

搜索框。有些浏览器会自带一个"X"按钮，点一下就能清空内容。

<input type="search" name="query" placeholder="搜索...">

04、type="hidden" 

隐藏字段。用户看不见，但提交表单时会一起发出去。适合存用户ID、token这些。

<input type="hidden" name="user_id" value="12345">

二、 数字类 

05、type="number" 

只能输入数字。可以设最小值、最大值、步长。

<input type="number" name="quantity" min="1" max="100" step="1">

手机上会弹出数字键盘。

06、type="range"

滑块。调音量、调亮度用这个。

<input type="range" name="volume" min="0" max="100" step="5" value="50">

可以自己用css改样式。 

三、特殊格式类

 07、type="email" 

邮箱输入。提交时会自动检查格式对不对。手机上会弹出带"@"和".com"的键盘。

<input type="email" name="email" placeholder="your@email.com">

08、type="tel" 

电话号码输入。不会自动校验格式，但手机会弹出数字键盘。

<input type="tel" name="phone" placeholder="(123) 456-7890">

09、type="url" 

网址输入。会检查格式，手机键盘会弹出"/"和".com"。

<input type="url" name="website" placeholder="https://example.com">

四、时间日期类

 10、type="date" 

日期选择器。浏览器会弹出日历，不用自己写日期组件。

<input type="date" name="birthday" min="1900-01-01" max="2025-12-31">

11、type="time"

时间选择器。

<input type="time" name="appointment" min="09:00" max="18:00">

12、type="datetime-local" 

日期和时间一起选。

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

13、type="month" 

选年份和月份。适合信用卡有效期、月度报表。

<input type="month" name="expiry" min="2025-01">

14、type="week" 

选一年中的第几周。排班表、打卡系统能用上。

<input type="week" name="week">

五、选择类 

15、type="checkbox" 

多选框。可以同时选好几个。

<input type="checkbox" name="subscribe" id="subscribe"><label for="subscribe">订阅邮件</label>

16、type="radio"

 单选框。同一组里只能选一个。用相同的name把它们归为一组。

<input type="radio" name="size" value="small" id="small"><label for="small">小杯</label>
<input type="radio" name="size" value="medium" id="medium"><label for="medium">中杯</label>
<input type="radio" name="size" value="large" id="large"><label for="large">大杯</label>

17、type="color"

颜色选择器。点一下弹出调色板。

<input type="color" name="theme-color" value="#4f46e5">

六、 文件类 

18、type="file" 

文件上传。用accept限制文件类型，加multiple可以选多个文件。

<input type="file" name="document" accept=".pdf,.doc,.docx"><input type="file" name="photos" accept="image/*" multiple>

19、capture属性 

在手机上直接打开相机拍照。

<input type="file" accept="image/*" capture="environment">

七、按钮类 

20、type="submit" 

提交表单的按钮。

<input type="submit" value="立即注册">

21、type="reset" 

清空表单。小心用，用户点错会生气。

<input type="reset" value="清空表单">

22、type="button"

 普通按钮，没特殊功能，等JS来绑事件。

<input type="button" value="点我" onclick="doSomething()">

23、type="image"

用图片当提交按钮。会把点击的坐标也发给后台。

<input type="image" src="submit-icon.png" alt="提交">

八、让表单更好用的属性 

24、required 

必填。不填不让提交。

<input type="email" name="email" required>

25、placeholder 

输入框里的灰色提示文字。

<input type="text" placeholder="输入你的名字">

26、pattern 

用正则表达式限制输入。

<input type="text" pattern="[A-Za-z]{3,}" title="至少3个字母">

27、minlength / maxlength 

限制最少和最多字符数。

<input type="text" minlength="3" maxlength="50">

28、readonly 

只读，不能改但能提交。

<input type="text" value="你改不了我" readonly>

29、disabled

禁用，不能改也不会提交。

<input type="text" value="灰的，用不了" disabled>

30、autocomplete 

控制浏览器自动填充。

<input type="email" name="email" autocomplete="email">

31、autofocus 

页面加载完光标自动落到这个输入框。

<input type="text" autofocus>

32、list + datalist 

原生的联想输入。不用JS就能实现下拉提示。

<input type="text" list="browsers"><datalist id="browsers">  <option value="Chrome">  <option value="Firefox">  <option value="Safari"></datalist>

33、inputmode 

控制手机弹出什么键盘，不影响输入内容格式。

<input type="text" inputmode="numeric">

34、multiple

允许选多个文件或输多个邮箱。

<input type="file" multiple>

35、accept

限制文件类型。

<input type="file" accept="image/png, image/jpeg">