HTML input type password: masked fields done right

<form action="https://splitforms.com/api/submit" method="POST">
  <!-- Demo only: never email real account passwords through a form backend.
       This form just shows how the password field works. -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="email">Email</label>
  <input type="email" id="email" name="email" autocomplete="email" required>

  <label for="password">Password</label>
  <input type="password" id="password" name="password"
         autocomplete="new-password" minlength="8" required
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
         title="At least 8 characters, with a number, a lowercase and an uppercase letter">

  <label>
    <input type="checkbox" id="show-password"> Show password
  </label>
  <script>
    document.getElementById("show-password").addEventListener("change", function (e) {
      document.getElementById("password").type = e.target.checked ? "text" : "password";
    });
  </script>

  <!-- Honeypot: hidden from people, bots fill it in -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">Sign up</button>
</form>