一个登录框，藏着多少坑

你看到的登录代码登录界面，表面是界面用户名、密码两个框加一个按钮。网页实际上，登录代码那行HTML代码里堆满了人类的界面懒惰和偏执。别急着写漂亮样式，网页先看最基础的登录代码结构：

<form action="/login" method="post"> <label for="username">用户名</label> <input type="text" id="username" name="username" required> <label for="password">密码</label> <input type="password" id="password" name="password" required> <button type="submit">登录</button> </form>

就这几行，够新手折腾半小时。界面第一个坑：label的网页for必须和input的id对上，否则点击“用户名”三个字时，登录代码输入框不会获得焦点。界面你试试就知道，网页那种点了没反应的登录代码感觉，像极了网页在装死。界面

第二个坑藏在type="password"里。它确实会显示成圆点，但如果你忘了加required，用户空着点登录，后端得自己处理空字符串。我见过一个项目，后端没校验，结果数据库里存了条空密码记录，用户用空格都能登进去——因为空字符串和空格在PHP里都是falsy。

说回前端。很多人上来就堆CSS，什么渐变背景、毛玻璃效果，结果忘了最要命的事——移动端键盘弹出会不会遮住输入框。我测过一个案例：页面高度设成100vh，底部按钮被iOS键盘顶到屏幕外，用户死活点不到登录键。后来加了position: fixed配合visualViewport监听才解决，但那已经是另一个故事了。

真正专业的登录页，会考虑错误提示的位置。你可以在HTML里预留一个空div：

<div id="error-msg" role="alert" aria-live="polite"></div>

这个role="alert"不是装饰——屏幕阅读器会立刻朗读错误内容，视障用户才知道自己输错了。我见过太多团队把错误提示做成红色小字，颜色一浅，近视的年轻人眯着眼都看不清，更别说老年用户了。

还有个细节，很多人忽略autocomplete属性。密码框加autocomplete="current-password"，浏览器才能正确提示保存的密码。不加的话，Chrome偶尔会自作聪明地填充用户名，但密码总是空的——用户一脸懵，以为网站出bug了。

写登录界面最烦的是“记住我”复选框。这个功能实现起来要动cookie或localStorage，但很多新手直接塞个<input type="checkbox">就完事，后端根本不接收这个字段。结果用户勾了，刷新页面，用户名还是没记住。信任感瞬间崩塌。

最后说个反直觉的案例。有个A/B测试，把登录按钮从“登录”改成“进入系统”，转化率反而降了12%。用户看到“进入系统”心里发慌——我还没登录呢，进什么系统？还是老老实实写“登录”吧，别玩文字游戏。

HTML代码本身是死的，但每个属性背后都是用户习惯的博弈。下次你写登录框，先别急着美化，问问自己：键盘弹出会不会挡住按钮？密码管理器能不能识别？错误提示有没有被读屏软件念出来？这些答案，远比一个炫酷的CSS渐变重要。