22个Input类型，让你少写80%的表单代码
每次写表单都像受刑？为了一个校验，动不动就引入一大坨JS库。其实html里的<input>早就进化了，自带一堆功能。今天我把22个类型全给你列出来，能用原生的就别自己写JS。
01 文本和密码类
type="text"
最常用的单行文本输入框。
<input type="text" name="username" placeholder="输入用户名">type="password"
密码输入框，输入的内容会变成黑点。
<input type="password" name="password" placeholder="输入密码">type="search"
搜索框。有些浏览器会自带一个"X"按钮，点一下就能清空内容。
<input type="search" name="query" placeholder="搜索...">type="hidden"
隐藏字段。用户看不见，但提交表单时会一起发出去。适合存用户ID、token这些。
<input type="hidden" name="user_id" value="12345">02 数字类
type="number"
只能输入数字。可以设最小值、最大值、步长。
<input type="number" name="quantity" min="1" max="100" step="1">手机上会弹出数字键盘。
type="range"
滑块。调音量、调亮度用这个。
<input type="range" name="volume" min="0" max="100" step="5" value="50">可以自己用css改样式。
03 特殊格式类
type="email"
邮箱输入。提交时会自动检查格式对不对。手机上会弹出带"@"和".com"的键盘。
<input type="email" name="email" placeholder="your@email.com">type="tel"
电话号码输入。不会自动校验格式，但手机会弹出数字键盘。
<input type="tel" name="phone" placeholder="(123) 456-7890">type="url"
网址输入。会检查格式，手机键盘会弹出"/"和".com"。
<input type="url" name="website" placeholder="https://example.com">04 时间日期类
type="date"
日期选择器。浏览器会弹出日历，不用自己写日期组件。
<input type="date" name="birthday" min="1900-01-01" max="2025-12-31">type="time"
时间选择器。
<input type="time" name="appointment" min="09:00" max="18:00">type="datetime-local"
日期和时间一起选。
<input type="datetime-local" name="meeting">type="month"
选年份和月份。适合信用卡有效期、月度报表。
<input type="month" name="expiry" min="2025-01">type="week"
选一年中的第几周。排班表、打卡系统能用上。
<input type="week" name="week">05 选择类
type="checkbox"
多选框。可以同时选好几个。
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">订阅邮件</label>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>type="color"
颜色选择器。点一下弹出调色板。
<input type="color" name="theme-color" value="#4f46e5">06 文件类
type="file"
文件上传。用accept限制文件类型，加multiple可以选多个文件。
<input type="file" name="document" accept=".pdf,.doc,.docx">
<input type="file" name="photos" accept="image/*" multiple>capture属性
在手机上直接打开相机拍照。
<input type="file" accept="image/*" capture="environment">07 按钮类
type="submit"
提交表单的按钮。
<input type="submit" value="立即注册">type="reset"
清空表单。小心用，用户点错会生气。
<input type="reset" value="清空表单">type="button"
普通按钮，没特殊功能，等JS来绑事件。
<input type="button" value="点我" onclick="doSomething()">type="image"
用图片当提交按钮。会把点击的坐标也发给后台。
<input type="image" src="submit-icon.png" alt="提交">08 让表单更好用的属性
required
必填。不填不让提交。
<input type="email" name="email" required>placeholder
输入框里的灰色提示文字。
<input type="text" placeholder="输入你的名字">pattern
用正则表达式限制输入。
<input type="text" pattern="[A-Za-z]{3,}" title="至少3个字母">minlength / maxlength
限制最少和最多字符数。
<input type="text" minlength="3" maxlength="50">readonly
只读，不能改但能提交。
<input type="text" value="你改不了我" readonly>disabled
禁用，不能改也不会提交。
<input type="text" value="灰的，用不了" disabled>autocomplete
控制浏览器自动填充。
<input type="email" name="email" autocomplete="email">autofocus
页面加载完光标自动落到这个输入框。
<input type="text" autofocus>list + datalist
原生的联想输入。不用JS就能实现下拉提示。
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>inputmode
控制手机弹出什么键盘，不影响输入内容格式。
<input type="text" inputmode="numeric">multiple
允许选多个文件或输多个邮箱。
<input type="file" multiple>accept
限制文件类型。
<input type="file" accept="image/png, image/jpeg">09 写在最后
这22个<input>类型和一堆属性，大部分你每天都在用，有些可能还没碰过。能用原生就用原生。浏览器把这些都做好了，不用自己写JS去模拟。省代码、省时间、用户体验还好。
下次写表单的时候，先翻翻这个列表，看看有没有原生就能搞定的。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！