别让input裸奔：给它穿对属性，用户才肯乖乖打字的秘籍

给 <input> 写注释，就像给猫戴铃铛——戴对了，它才肯乖乖让你撸。

1. 先认脸：最常用的 7 个“招牌”

2. 行为开关：想让框“听话”就靠它们

• readonly —— 只能看不能改，像博物馆里的展品。
• disabled —— 直接贴封条，连表单都不带它玩。
• autocomplete="off" —— 不让浏览器瞎猜，银行页面最爱。
• autofocus —— 页面一跳进来就插队，最好只放一个，不然打架。
• required —— 空着就弹窗，比老板还凶。
• inputmode="numeric" —— 手机秒变数字键盘，省用户切来切去。
• spellcheck="false" —— 写验证码别再被红线抢戏。

3. 自带安检：前端先挡一刀

4. 彩蛋区：冷门但好用

• list="ice-cream" + <datalist id="ice-cream">
  下拉建议+手动输入二合一，比 <select> 自由。
• multiple —— 文件上传想一次拖 10 张图，就靠它。
• form="form2" —— 输入框住在外表单的“隔壁”，也能一起交作业。

5. 一段直接能抄的“小作文”

<form action="/join" method="post">
  <label>
    昵称
    <input name="nick" type="text" required maxlength="12" autofocus placeholder="2~12个字">
  </label>

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

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

  <label>
    验证码
    <input name="code" type="text" pattern="\d{6}" required inputmode="numeric" autocomplete="one-time-code">
  </label>

  <label>
    头像（可多选）
    <input name="avatar" type="file" multiple accept="image/*">
  </label>

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

把 label 包一圈，手机用户点字就能对焦；
验证码加上 autocomplete="one-time-code"，iPhone 自动读短信，爽到飞起。

6. 收个尾

别再把 <input> 当成“默认框”随手就扔。
把属性当调料，少量多次，尝一口就知道差在哪。
前端多拦一道，后端少掉一半头发，用户顺手，你省心——三赢。