无需JavaScript，能否让单个输入字段适配多个表单？

你的代码有两个关键问题导致找回密码表单无法提交邮箱：

1. 邮箱输入框没有设置name属性：表单提交时，只有带有name属性的控件才会被作为请求参数发送。
2. 部分旧浏览器不支持form属性同时指定多个表单ID，兼容性存在风险。

下面是两种不用JavaScript的可行方案：

方案一：利用按钮的formaction属性（兼容性最好，推荐） #

把找回密码按钮放到登录表单内部，通过formaction属性让它提交到找回密码的接口。点击不同按钮时，会将邮箱字段提交到对应的地址：

<form action="/sign-in" method="post" id="signInForm">
  <input type="email" name="email" required> <!-- 用type="email"更符合语义，必须加name -->
  <input type="password" name="password" required>
  <button type="submit">登录</button>
  <!-- 这个按钮会覆盖表单的默认action，提交到找回密码接口 -->
  <button type="submit" formaction="/forgot-password">找回密码</button>
</form>

注：找回密码接口会收到email和password两个参数，只需处理email即可，忽略password不影响功能。

方案二：多表单关联（仅支持现代浏览器） #

如果必须保留两个独立的表单结构，可以给邮箱输入框加上name属性，并正确使用form属性关联两个表单（现代浏览器支持用空格分隔多个表单ID）：

<form action="/sign-in" method="post" id="signInForm">
  <!-- 加name属性，同时关联两个表单 -->
  <input type="email" name="email" form="signInForm forgotPasswordForm" required>
  <input type="password" name="password" required>
  <button type="submit">登录</button>
</form>

<form action="/forgot-password" method="post" id="forgotPasswordForm">
  <button type="submit">找回密码</button>
</form>

注意：这种方式在IE等旧浏览器中可能无法正常工作，优先推荐方案一。

内容的提问来源于stack exchange，提问作者Oscar