Input 选款指南：把“打字框”换成“省心框”，用户才肯填到底

别再把 input 当成“万能 text”——给它合适的“性格”，用户才愿意把信息交出来。

1. 老底子类型（HTML4 就有的那几位）

• text —— 最百搭，却最没脾气，谁都能输。
• password —— 自动打码，看不着也复制不了。
• checkbox / radio —— 多选打勾、单选打点，适合“你选我”而不是“你写我”。
• submit / reset —— 一个“交卷”，一个“撕卷”，现在 reset 基本没人敢用。
• hidden —— 页面看不到，提交时悄悄带数据，后台最喜欢的“小透明”。

2. HTML5 新同学，各个身怀绝技

3. 一段能直接粘的“demo 简历”

<form action="/join" method="post">
  <label>
    用户名
    <input name="nick" type="text" required maxlength="15" placeholder="2~15个字">
  </label>

  <label>
    密码
    <input name="pwd" type="password" required minlength="6">
  </label>

  <label>
    邮箱
    <input name="email" type="email" required placeholder="you@example.com">
  </label>

  <label>
    手机号
    <input name="phone" type="tel" inputmode="numeric" pattern="\d{11}">
  </label>

  <label>
    年龄
    <input name="age" type="number" min="18" max="120" value="18">
  </label>

  <label>
    生日
    <input name="birthday" type="date" min="1900-01-01" max="2030-12-31">
  </label>

  <label>
    主页
    <input name="site" type="url" placeholder="https://">
  </label>

  <label>
    主题色
    <input name="theme" type="color" value="#ff681f">
  </label>

  <label>
    简历附件
    <input name="cv" type="file" accept=".pdf,.doc,.docx">
  </label>

  <button type="submit">提交</button>
</form>

把 label 包一整圈，手机用户点文字就能对焦；
accept=".pdf,.doc" 直接过滤文件选择框，省得用户错传表情包。

4. 顺手塞几张“小贴士”便利贴

1. 老浏览器不认新类型？别慌，它自动退回到 text，样式不变，功能不炸。
2. 想让滑杆 range 实时显示数值，绑一行 JS 就够了：oninput="this.nextElementSibling.textContent=this.value"。
3. color 弹出的调色盘各浏览器肤色不同，想要完全一致再调 UI 库。
4. file 多图上传别忘了后端也要支持 multipart/form-data，否则只能收到空气。

5. 收个尾

input 的“长相”浏览器已经帮你画好，把 type 用对，等于给用户发一张“填表路线图”。
先让类型做第一道门神，再用属性补第二道护栏，后端就能少写一堆“数据不合规”的吐槽信。
表单体验好不好，往往就看这一行 <input> 有没有“对号入座”。