HTML: HTML 输入类型参考
<input>元素的type属性决定了输入字段的外观和行为。HTML提供了20多种输入类型，涵盖文本、数字、日期、选择、按钮以及其他各种场景。
1. 文本类输入
文本类输入用于收集各种形式的文字信息：
type="text"— 默认类型，单行文本输入type="password"— 密码输入，字符被遮盖显示type="email"— 邮箱地址，自动校验格式，移动端弹出 @ 键盘type="tel"— 电话号码，移动端弹出数字键盘type="url"— 网址输入，自动校验 URL 格式type="search"— 搜索框，部分浏览器显示清除按钮
▶ 示例
HTML
<form>
<label>用户名：<input type="text" name="username" placeholder="请输入用户名"></label><br>
<label>密码：<input type="password" name="password" placeholder="至少6位"></label><br>
<label>邮箱：<input type="email" name="email" placeholder="you@example.com"></label><br>
<label>电话：<input type="tel" name="phone" placeholder="13800138000"></label><br>
<label>网站：<input type="url" name="website" placeholder="https://"></label><br>
<label>搜索：<input type="search" name="q" placeholder="搜索关键词"></label>
</form>
2. 数值类输入
数值类输入让用户选择或输入数字、颜色值：
type="number"— 数字输入框，可限制min、max、steptype="range"— 滑块选择器，返回一个数值type="color"— 颜色选择器，返回十六进制颜色值
▶ 示例
HTML
<form>
<label>数量（1-10）：<input type="number" name="qty" min="1" max="10" value="1"></label><br>
<label>音量：<input type="range" name="volume" min="0" max="100" value="50"></label><br>
<label>主题色：<input type="color" name="theme" value="#ff6600"></label>
</form>
<!-- range 与 number 联动（需配合 JS） -->
<input type="range" id="slider" min="0" max="100" value="50">
<input type="number" id="numDisplay" min="0" max="100" value="50">
<script>
const slider = document.getElementById('slider');
const num = document.getElementById('numDisplay');
slider.addEventListener('input', () => num.value = slider.value);
num.addEventListener('input', () => slider.value = num.value);
</script>
3. 日期时间类输入
日期时间类输入让用户通过日历或时间选择器快速选取日期：
type="date"— 日期选择器（年-月-日）type="time"— 时间选择器（时:分）type="datetime-local"— 本地日期+时间type="month"— 月份选择器（年-月）type="week"— 周选择器（年-周）
▶ 示例
HTML
<form>
<label>日期：<input type="date" name="date"></label><br>
<label>时间：<input type="time" name="time"></label><br>
<label>日期+时间：<input type="datetime-local" name="datetime"></label><br>
<label>月份：<input type="month" name="month"></label><br>
<label>周：<input type="week" name="week"></label>
</form>
4. 选择类输入
选择类输入让用户从多个选项中挑选：
type="checkbox"— 复选框，可多选type="radio"— 单选框，同一name组内只能选一个type="file"— 文件上传，配合accept限制文件类型
▶ 示例
HTML
<form>
<p>兴趣爱好（可多选）：</p>
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobby" value="music"> 音乐</label>
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>
<p>性别（单选）：</p>
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
<p>上传头像（仅限图片）：</p>
<input type="file" name="avatar" accept="image/png, image/jpeg, image/gif">
</form>
5. 按钮类输入
按钮类输入用于触发表单操作：
type="submit"— 提交按钮，将表单数据发送到服务器type="reset"— 重置按钮，将表单控件恢复为初始值type="button"— 普通按钮，需配合 JavaScript 使用type="image"— 图片按钮，功能同 submit，但用图片代替文字
▶ 示例
HTML
<form action="/submit" method="post">
<label>姓名：<input type="text" name="name"></label><br>
<!-- 提交按钮 -->
<input type="submit" value="提交表单">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<input type="button" value="点我" onclick="alert('Hello!')">
<!-- 图片按钮 -->
<input type="image" src="btn-submit.png" alt="提交">
</form>
6. 隐式与特殊输入
type="hidden" 隐藏域不会在页面上显示，但会随表单一起提交，常用于传递用户 ID、CSRF token 等元数据：
▶ 示例
HTML
<form action="/update-profile" method="post">
<!-- 用户不可见，但会随表单提交 -->
<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="token" value="abc123xyz">
<label>昵称：<input type="text" name="nickname"></label>
<input type="submit" value="保存">
</form>
💡 提示：
hidden input 常用于表单中传递用户ID、token 等不需要用户看到的数据，但这些数据仍然对用户可见（查看源代码即可），因此不要用 hidden 存储敏感信息，真正的安全校验应在服务端完成。
7. 完整的 input 类型一览表
| Type | 说明 | 常用属性 |
|---|---|---|
text |
单行文本 | placeholder, maxlength, pattern |
password |
密码（遮盖显示） | placeholder, maxlength |
email |
邮箱地址 | placeholder, multiple |
tel |
电话号码 | placeholder, pattern |
url |
网址 | placeholder |
search |
搜索框 | placeholder |
number |
数字 | min, max, step |
range |
滑块 | min, max, step |
color |
颜色选择器 | — |
date |
日期 | min, max, step |
time |
时间 | min, max, step |
datetime-local |
本地日期+时间 | min, max |
month |
月份 | min, max |
week |
周 | min, max |
checkbox |
复选框（多选） | checked |
radio |
单选框 | checked |
file |
文件上传 | accept, multiple |
submit |
提交按钮 | value, formaction |
reset |
重置按钮 | value |
button |
普通按钮 | value, onclick |
image |
图片按钮 | src, alt |
hidden |
隐藏域 | value |
❓ 常见问题
Q 为什么用
email、tel、url这些类型，而不是统一用text？A 使用语义化的输入类型有三个好处：1）移动端会自动弹出对应的键盘（如
email显示@符号，tel显示数字键盘）；2）浏览器会自动验证格式（如email必须包含@）；3）屏幕阅读器能告诉用户"这是邮箱输入框"，提升无障碍体验。虽然用text也能工作，但用正确的类型能提供更好的用户体验。Q
date类型在不同浏览器显示不一致怎么办？A 这是HTML5日期选择器的已知问题——Chrome、Firefox、Safari的UI各不相同。解决方案：1）接受差异，依赖浏览器原生体验；2）用JavaScript日期选择库（如flatpickr、datepicker）统一UI；3）用
text类型+JavaScript验证，完全自定义界面。建议：如果设计要求一致，用方案2或3；如果追求原生体验，用方案1。Q
number和range有什么区别？什么时候用哪个？A
number是精确数字输入，用户可以直接输入数值，适合需要精确值的场景（如数量、年龄、价格）；range是滑块选择，用户只能在范围内滑动，适合不需要精确值的场景（如音量、亮度、评分）。两者都可以用min、max、step限制范围。常见做法：用range做粗调，用number做精调，两者联动。Q
hidden类型安全吗？用户能看到吗？A
hidden输入不会在页面上显示，但用户可以通过"查看源代码"或开发者工具看到它的值。所以绝对不要用hidden存储密码、API密钥等敏感信息。它的正确用途是传递用户ID、CSRF token、会话标识等元数据。安全原则：任何客户端数据都不可信，真正的安全校验必须在服务端完成。📖 小节
<input type="…">有 20+ 种类型，按用途分文本、数值、日期、选择、按钮、隐藏等- 文本类：text、password、email、tel、url、search
- 数值类：number（精确数字）、range（范围滑块）、color（颜色）
- 日期类：date、time、datetime-local、month、week
- 选择类：checkbox（多选）、radio（单选）、file（文件）
- 按钮类：submit（提交）、reset（重置）、button（普通）、image（图片）
- 特殊：hidden（隐藏域，传递元数据）
📝 作业
- 综合表单：创建一个"注册"表单，包含以下 5 种以上的 input 类型：
text（用户名）、email（邮箱）、password（密码）、date（生日）、radio（性别）、checkbox（兴趣爱好）、file（头像上传）、submit（提交）、reset（重置）。 - Range 联动：创建一个 range 滑块和一个 number 输入框，两者值实时同步。range 范围为 0–100，步长 5。
