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

Question

我正在使用 React（但我认为这没关系）。无论如何，我有 2 个简单的表单（登录/注册），在登录表单上我有 2 个字段： 电子邮件和密码。

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

当我保存我在登录表单中输入的密码后，这些数据将正确放置在同一个 (LOGIN) 表单中。

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

所以我尝试添加不同的 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>

Answer 1

需要采取的步骤来确保注册表单上的email/username 字段正确保存以供自动填充：

• 确保email/username 字段后面紧跟password 字段，因为输入字段的顺序似乎很重要。

• 避免字段名称以name 结尾（例如first_name、last_name - 改用first、last），因为Chrome 可能会错误地假设并使用此字段（而不是email）用于用户名自动填充。

• 如果您只使用email（不使用username），则在email 字段中使用id="username"（是的，您没看错）。