登录失败、留言发不出去，用户很少怪自己。他们会以为网站坏了。表单出问题，多半是看不见的标签、只靠颜色的报错，以及一个写着「提交」却在转圈的按钮。
每个控件都要有可见标签
html
<label for="email">邮箱</label>
<input id="email" name="email" type="email" autocomplete="email" required />不要用 placeholder 当标签。提示一输入就消失，浏览器自动填充时更容易对不上。placeholder 只放例子：you@example.com。
复选框把 <input> 放进 <label> 里，点文字也能勾上：
html
<label>
<input type="checkbox" name="remember" />
记住我
</label>错误要写在控件边上
html
<label for="password">密码</label>
<input id="password" type="password" autocomplete="current-password"
aria-invalid="true" aria-describedby="password-error" />
<p id="password-error">密码至少 6 位。</p>只把边框变红不够。色盲用户、只开屏幕阅读的用户都需要那句文字。aria-invalid 让读屏在进入输入框时就知道这里有错。
前端校验可以挡掉空值，但最终以服务器为准。接口返回「邮箱已注册」时，把焦点移到对应字段，不要只在页面顶上弹一条 toast。
按钮说正在做什么
html
<button type="submit">登录</button>type 一定要写。表单里的 <button> 默认就是 submit，你随手加的「显示密码」如果不写 type="button"，点一下会把整个表交出去。
提交中禁用按钮，并把文案改成「正在登录…」。成功或失败后再解开。否则连点三次会发出三封注册信。
移动端键盘
- 邮箱：
type="email" - 电话：
type="tel" - 数字编号：
inputmode="numeric"而不是type="number"（后者自带小箭头，复制也不顺）
表单不是视觉练习，是一条别人要把数据交给你的路。路要平、要有路标，错了要说人话。