Forms Mozilla和Chrome在错误的字段中自动填充表单字段

我正在与React合作（但我认为这无关紧要）。总之，我有两个简单的表单（登录/注册），在登录表单上有两个字段： 电子邮件和密码

在注册表格中，我有3个字段： 电子邮件、推荐代码和密码

当我保存我在登录表单中输入的密码后，这些数据将正确地放置在同一（登录）表单上

但是当我转到注册表单时，自动填写数据（电子邮件）被放在错误的字段（在推荐代码中）。密码自动填充数据位于正确的密码字段中

所以我试着添加不同的id、名称等，但不起作用。 请告诉我，如果有人知道如何解决这个问题，我会非常适合的

代码示例： 登录表单

<form id="signIn" class="auth-form st-form">

   <label class="st-form-label-text valid">

      <input class="st-form-field" placeholder="Email" name="email" value="velidan@rambler.ru" type="text">

   </label>

   <label class="st-form-label-text valid">
      <input class="st-form-field" placeholder="Password" name="password" value="12345678" type="password">
   </label>

  <input class="st-form-submit-btn btn" value="Log in" type="submit">
</form>

<form id="stepOneSignUp" class="auth-form st-form">

   <label for="email" class="st-form-label-text pristine">
      <input id="email" class="st-form-field" placeholder="Email" name="email" value="" type="email">

   </label>

   <label for="referral" class="st-form-label-text referral-code">
      <input id="referral" class="st-form-field" placeholder="Referral Code Placeholder" name="referralCode" value="velidan@rambler.ru" type="text">
   </label>

   <label for="password" class="st-form-label-text pass valid">
      <input id="password" class="st-form-field" placeholder="Password" name="Password" type="password">
   </label>

   <input class="st-form-submit-btn" value="Create new account" type="submit">
</form>

注册表格

<form id="signIn" class="auth-form st-form">

   <label class="st-form-label-text valid">

      <input class="st-form-field" placeholder="Email" name="email" value="velidan@rambler.ru" type="text">

   </label>

   <label class="st-form-label-text valid">
      <input class="st-form-field" placeholder="Password" name="password" value="12345678" type="password">
   </label>

  <input class="st-form-submit-btn btn" value="Log in" type="submit">
</form>

<form id="stepOneSignUp" class="auth-form st-form">

   <label for="email" class="st-form-label-text pristine">
      <input id="email" class="st-form-field" placeholder="Email" name="email" value="" type="email">

   </label>

   <label for="referral" class="st-form-label-text referral-code">
      <input id="referral" class="st-form-field" placeholder="Referral Code Placeholder" name="referralCode" value="velidan@rambler.ru" type="text">
   </label>

   <label for="password" class="st-form-label-text pass valid">
      <input id="password" class="st-form-field" placeholder="Password" name="Password" type="password">
   </label>

   <input class="st-form-submit-btn" value="Create new account" type="submit">
</form>

---

为确保注册表单上的

电子邮件

/

用户名

字段正确保存以供自动填写而需要采取的步骤：

• 确保您的

  电子邮件

  /

  用户名

  字段后面紧跟着

  密码

  字段，因为输入字段的顺序似乎很重要

• 避免使用名称以

  名称结尾的字段（例如
  名字
  ，
  姓氏
  -使用
  第一个
  ，
  最后一个
  ），因为Chrome可能错误地假设并使用此字段（而不是
  电子邮件
  ）作为用户名自动填充
  
  

• 如果您只使用

  电子邮件

  （否

  用户名

  ），则在

  电子邮件

  字段中使用

  id=“username”

  （是的，您读得正确）

---

谢谢你的夸奖