表单中找回密码链接必须用原生<a href="/forgot-password">，禁用button模拟；需设独立class确保可识别，容器加display:block和margin-top对齐布局；不加target="_blank"除非必要，且必须配rel="noopener"。
怎么在表单里加「找回密码」链接
直接加 <a> 标签就行，但得让它视觉上属于表单一部分，又不能被提交逻辑干扰。很多人误用 type="submit" 或塞进 <form> 的 action 里，结果点一下就触发登录提交。
- 链接必须用
<a href="/forgot-password">找回密码</a>，绝对不要套在<button>或<input type="button">里 - 放在
<form>内部时，确保它不在<input type="submit">的默认表单提交路径上——也就是别包在<label>里，也别加formaction - 如果页面用 CSS 重置了
a样式（比如去掉了下划线、改了颜色），记得单独给这个链接加类名，比如<a class="form-link" href="...">，否则用户根本看不出它是可点击的
为什么不能用 button 模拟链接
表面上看 <button onclick="location.href='/forgot-password'"> 能跳转，但实际埋了三个坑：不支持右键新标签页打开、无障碍阅读器无法识别为导航链接、SEO 不收录该路径。更重要的是，如果 JS 失效或未加载，这个按钮就彻底失效，而原生 <a> 始终可用。
- 搜索引擎只抓取
href属性，onclick里的路径不会被索引 - 屏幕阅读器对
<button>默认读作“按钮”，对<a>才读作“链接”，语义完全不同 - 移动端长按
<a>会弹出“在新标签页打开”等菜单，<button>没这行为
表单下方排版常见错位问题
链接紧贴输入框底部时，经常被误认为是按钮的一部分，或者因 margin/padding 计算错误导致换行错乱。本质是块级元素和行内元素的盒模型没对齐。
- 给包含链接的容器加
display: block和明确的margin-top（比如12px），别依赖父级<form>的默认间距 - 避免用
<br>换行——HTML5 已不推荐，且不同浏览器渲染高度不一致 - 如果表单用了 flex 布局，确保链接容器设了
align-self: flex-start，否则可能被拉伸或居中，破坏辅助操作的视觉层级
要不要加 rel="noopener" 或 target="_blank"
除非业务明确要求「找回密码页必须新开标签」，否则一律不用 target="_blank"。多数场景下，用户填完邮箱返回原登录页更自然；强行新开页反而增加跳出率，还可能被浏览器拦截。
立即学习“前端免费学习笔记（深入）”；
- 如果真要新开页（比如 SSO 系统需跳转到独立认证域），必须加
rel="noopener"，否则新页面可通过window.opener访问原页面 DOM，有安全风险 -
rel="nofollow"不需要加——找回密码是合法导航路径，不是广告或用户生成内容 - 移动端 Safari 对
target="_blank"支持不稳定，部分版本会静默忽略，导致链接退化为当前页跳转
href 和视觉位置比样式细节更重要。很多人花半小时调按钮圆角，却忘了检查链接能否被键盘 Tab 到达——那才是真正的断裂点。 
