最稳妥方案是用 display: none/block 切换登录注册面板，配合 aria-hidden、tabindex、独立 form action、aria tab 语义及 js 聚焦滚动修复。
登录注册面板用 display: none 切换最稳妥
直接用 CSS 控制两个表单的显隐，比重载页面或 JS 模拟路由更轻量、无刷新、兼容性好。关键不是“怎么切换”，而是“怎么避免 DOM 重复渲染和焦点丢失”。
常见错误是用 visibility: hidden 或 opacity: 0 隐藏——它们仍占布局空间且表单控件可被聚焦、可被屏幕阅读器读取，不符合语义和可访问性要求。
- 始终用
display: none和display: block（或flex）切换主容器 - 切换后手动调用
input.focus()，比如登录态切到注册页时，自动聚焦到username输入框 - 给两个表单加
aria-hidden="true/false"，配合tabindex="-1"确保键盘导航不跳进隐藏面板
form 标签必须各自独立，不能共用一个 action
登录和注册是两条不同后端路径，form 的 action 属性不能写死成同一个值，否则用户点注册按钮却发请求到 /login，后端直接 405 或 500。
也不建议用 JS 动态改 form.action —— 这会让纯 HTML 提交失效，且 SSR 场景下首次加载逻辑混乱。
- 登录
form的action设为"/login"，method 用"POST" - 注册
form的action设为"/register"，同样用"POST" - 两个
form平级放在同一父容器内，靠 CSS 控制显隐，不嵌套、不复用
切换按钮要带 role="tab" 和 aria-controls
单纯用 button 切换样式，对键盘用户和读屏软件不友好。浏览器不会自动识别这是标签页式导航，Tab 键可能跳过按钮，或无法告知当前激活状态。
必须补全 ARIA 属性，让语义明确：
- 登录按钮加
role="tab"、aria-selected="true"、aria-controls="login-form" - 注册按钮加
role="tab"、aria-selected="false"、aria-controls="register-form" - 对应表单加
id="login-form"和id="register-form"，形成可编程关联 - JS 切换时同步更新
aria-selected值，否则读屏软件会误判当前状态
移动端键盘弹起后，注册表单可能被遮挡
iOS Safari 和部分安卓 WebView 在软键盘弹出时，不会自动滚动到聚焦的输入框，尤其当注册表单在底部且初始不可见时，用户看到的是空白或按钮，根本找不到输入框。
这不是 CSS 能解决的问题，得靠 JS 微调：
- 切换到注册面板后，等
offsetHeight渲染完成再调用input.scrollIntoView({ behavior: 'smooth', block: 'center' }) - 避免用
window.scrollTo，它滚动的是整个页面，而用户可能已手动滑动过，反而造成错位 - 加个
setTimeout延迟 100ms 再 scroll，确保 DOM 重排完成（特别是用display切换后）
这个细节在桌面端几乎没影响，但一上线就会被大量 iOS 用户反馈“点注册没反应”——其实是有反应，只是输入框被键盘盖住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
