表单✅

input 类型有哪些？

答案

HTML <input> 标签的 type 属性支持多种类型，决定了输入控件的表现和用途。常见类型如下：

• 文本输入
  • text：单行文本输入
  • password：密码输入，内容以掩码显示
  • search：搜索框，样式略有不同
• 数值输入
  • number：数值输入，可限制范围和步长
  • range：滑块选择数值
• 日期与时间
  • date：日期选择器
  • time：时间选择器
  • datetime-local：本地日期时间选择
  • month、week：选择月份或周
• 选择类型
  • checkbox：复选框，可多选
  • radio：单选按钮，配合 name 属性实现单选
• 按钮类型
  • submit：提交表单
  • reset：重置表单
  • button：普通按钮
• 其他
  • email：邮箱输入，带格式校验
  • url：网址输入，带格式校验
  • tel：电话号码输入
  • file：文件上传，可多选
  • color：颜色选择器
  • hidden：隐藏字段，不显示但可提交

<input type="text">
<input type="password">
<input type="number" min="0" max="100">
<input type="date">
<input type="checkbox">
<input type="file" multiple>

提示

实际开发中，合理选择 type 能提升表单体验和数据校验准确性。例如，email 和 url 会自动校验格式，number 可用原生控件限制输入范围。

注意

部分类型如 date、color 在旧版浏览器或部分移动端兼容性有限，需注意回退方案。

延伸阅读

• MDN: <input> - HTML — 官方文档，详细介绍所有类型及属性
• HTML Living Standard: Input types — HTML 标准原文
• Can I use input types — 各类型兼容性查询