HTML meter Element: Gauges, Colour Zones and Password Strength

<form id="signup" action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

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

  <label for="password">Password</label>
  <input type="password" id="password" name="password"
         minlength="8" autocomplete="new-password" required
         aria-describedby="strength-text">

  <label for="strength">Password strength</label>
  <meter id="strength" min="0" max="4" low="2" high="3" optimum="4" value="0">0 of 4</meter>
  <span id="strength-text" aria-live="polite">Too weak</span>

  <button type="submit">Create account</button>
</form>

<script>
  const password = document.getElementById("password");
  const meter = document.getElementById("strength");
  const text = document.getElementById("strength-text");
  const labels = ["Too weak", "Weak", "Fair", "Good", "Strong"];

  // One point per rule: length >= 8, a digit, an upper-case letter, a symbol
  function score(pw) {
    let s = 0;
    if (pw.length >= 8) s++;
    if (/\d/.test(pw)) s++;
    if (/[A-Z]/.test(pw)) s++;
    if (/[^A-Za-z0-9]/.test(pw)) s++;
    return s;
  }

  password.addEventListener("input", () => {
    const s = score(password.value);
    meter.value = s;          // 0-1 red, 2-3 yellow, 4 green
    meter.textContent = s + " of 4";
    text.textContent = labels[s];
  });
  // The meter has no name, so only email and password are sent
</script>