网站输入问题

网站上的输入框，用户每天都要碰，但很多问题不是写个input就完事。一个框背后有键盘、校验、编码、安全、无障碍几摊事。做得好用户没感觉，做得差就是卡在最后一步。

先说标签。很多页面拿placeholder当标签，框里灰字一消失，用户就忘了填什么。placeholder适合举例，不该承担标签职责。用label的for绑到input的id，点击标签能聚焦，读屏也能读。错误提示别只飘在顶部，放在字段旁边，用aria-describedby关联，色弱用户也能靠文字知道哪里错。

移动端坑更多。iOS Safari里输入框字号小于16px，聚焦会自动放大页面，用户得手动缩回去。把字号设到16px以上能避开。键盘类型也要对：邮箱用type=email，电话用type=tel，验证码用inputmode=numeric，别让用户在全键盘里找数字。自动大写、自动纠错该关就关，尤其是用户名、邮箱、验证码。

自动填充别跟浏览器对着干。用标准autocomplete值，比如name、email、tel、current-password、new-password、one-time-code，密码管理器才认得。有的网站怕用户粘贴验证码，直接禁用粘贴，这很烦。验证码本来就难输，允许粘贴能少一半错误。密码框给个可见按钮，别默认明文，也别强制复杂规则到用户猜不透。

中文输入法要处理组合事件。用户打拼音时，input事件会频繁触发，实时搜索或字数统计容易把拼音算进去。监听compositionstart和compositionend，等组合结束再校验。实时校验别太急，输入到一半就红字警告，用户会烦。常见做法是失焦校验，或者输入后防抖200到400毫秒。错误文案说清楚怎么改，别只写“格式错误”。

提交环节也容易出问题。网络慢时用户连点按钮，会重复提交。提交后禁用按钮并显示状态，服务端做幂等。表单字段越多放弃率越高，这是公开可用性研究反复提到的。能合并的合并，能选的不让填，能自动带出的别让用户再输。必填项提前标出来，别等提交才说。

安全上，前端校验只是体验，服务端必须再校验。长度、类型、范围、白名单都要查。SQL用参数化查询，输出做转义，防注入和XSS。OWASP Top 10里注入和跨站脚本常年上榜。文件上传看类型、大小、内容，别只看扩展名。CSRF token该加就加。错误提示别把数据库报错原样抛给用户。

无障碍和点击目标也别忽略。Lighthouse建议可点击目标至少48×48 CSS像素，WCAG 2.2的AA级要求目标尺寸至少24×24 CSS像素。按钮太小，手机上容易点错。输入框要有可见焦点样式，别为了好看把outline干掉。错误汇总可以给，但字段级提示更管用。

最后，测试别只测正常路径。空值、超长、emoji、中文、空格、粘贴、自动填充、断网、重复提交，都走一遍。输入框是用户和系统之间的门，门不好开，后面做得再好也白搭。