HTML 词条目录
前端Wiki/词条/input 类型大全

input 类型大全

定义表单输入控件的总称,一个 type 属性决定它是文本框、复选框还是日期选择器

input 的 type 决定了它的交互形态:text 普通文本、password 密码、number 数字、email 邮箱、date 日期、range 滑块、color 取色、file 文件上传、checkbox 复选、radio 单选。email、url、number 等类型自带基础格式校验,submit 时浏览器会先拦一道,配合 required、pattern、minlength 等属性可以不写 JS 就完成常见验证。

并不是所有输入都该用 input:多行文本用 textarea,下拉选择用 select,按钮优先用 button 标签(语义和可样式性都更好)。移动端上 type 的选择直接影响弹出的键盘:email 出 @ 键、number 出数字键盘、tel 出电话拨号盘,对用户体验影响很大。每种类型记得配 label,否则无 accessibility 不达标。

HTML
<style>
  form.f label { display: block; font-size: 13px; margin-top: 8px; }
  form.f input { display: block; margin-top: 3px; padding: 5px 8px;
                 border: 1px solid #4a9eff; border-radius: 5px; }
</style>
<form class="f" action="#" method="post">
  <label>邮箱(自带格式校验)
    <input type="email" required placeholder="name@example.com">
  </label>
  <label>生日
    <input type="date">
  </label>
  <label>满意度
    <input type="range" min="0" max="10" value="7">
  </label>
  <label>记住我
    <input type="checkbox">
  </label>
  <input type="submit" value="提交">
</form>
⚠ 常见误区
🔗 相关词条input表单验证
← 返回来源章节input