Sign-up form

How to use it

Use for creating a new account with a name, email and password. Do not use it for signing in (use the sign-in form) or for passwordless sign-up. The submit handler only prevents submission and shows a demo message: the developer must wire the real registration endpoint, keep the minlength in sync with the hint text, point the terms link at the real terms page, and rename the dcl-signup ids if it appears twice on a page.

Accessibility

Each field has a <label for>; the password uses autocomplete="new-password" so password managers offer to generate one, and its requirements hint is attached with aria-describedby so it is read with the field. The terms checkbox is required and its label contains a native link; every control is reachable with Tab and shows a 2px blue focus-visible outline, and the outcome goes to a role="status" region. Text #0f172a on white is 17.85:1, the hint #475569 on white is 7.58:1, the link #1d4ed8 on white is 6.70:1, and the button's white on #1d4ed8 (#1e40af hovered) is 6.70:1 (8.72:1).

Source (copy-ready)

Copy code

<form class="dcl-signup" aria-labelledby="dcl-signup-title">
  <h2 id="dcl-signup-title" class="dcl-signup__title">Create your account</h2>
  <div class="dcl-signup__field">
    <label for="dcl-signup-name" class="dcl-signup__label">Full name</label>
    <input type="text" id="dcl-signup-name" name="name" class="dcl-signup__input" autocomplete="name" required>
  </div>
  <div class="dcl-signup__field">
    <label for="dcl-signup-email" class="dcl-signup__label">Email address</label>
    <input type="email" id="dcl-signup-email" name="email" class="dcl-signup__input" autocomplete="email" required>
  </div>
  <div class="dcl-signup__field">
    <label for="dcl-signup-password" class="dcl-signup__label">Password</label>
    <input type="password" id="dcl-signup-password" name="password" class="dcl-signup__input" autocomplete="new-password" minlength="12" required aria-describedby="dcl-signup-password-hint">
    <p id="dcl-signup-password-hint" class="dcl-signup__hint">Use at least 12 characters. A short phrase of unrelated words works well.</p>
  </div>
  <div class="dcl-signup__check">
    <input type="checkbox" id="dcl-signup-terms" name="terms" class="dcl-signup__checkbox" required>
    <label for="dcl-signup-terms" class="dcl-signup__check-label">I agree to the <a href="../about.html" class="dcl-signup__link">terms of service</a></label>
  </div>
  <button type="submit" class="dcl-signup__submit">Create account</button>
  <p class="dcl-signup__status" role="status"></p>
</form>
<style>
.dcl-signup { display: flex; flex-direction: column; gap: 1rem; max-width: 24rem; padding: 1.5rem; border: 1px solid #cbd5e1; border-radius: 0.75rem; font: inherit; color: #0f172a; background-color: #ffffff; box-sizing: border-box; }
.dcl-signup__title { margin: 0; font-size: 1.375rem; color: #0f172a; background-color: #ffffff; }
.dcl-signup__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.dcl-signup__label { font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-signup__input { width: 100%; box-sizing: border-box; padding: 0.55rem 0.65rem; border: 1px solid #64748b; border-radius: 6px; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-signup__input:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-signup__hint { margin: 0; font-size: 0.875rem; color: #475569; background-color: #ffffff; }
.dcl-signup__check { display: flex; align-items: flex-start; gap: 0.5rem; }
.dcl-signup__checkbox { flex: none; width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; }
.dcl-signup__checkbox:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-signup__check-label { color: #0f172a; background-color: #ffffff; }
.dcl-signup__link { color: #1d4ed8; background-color: #ffffff; }
.dcl-signup__link:hover { color: #1e40af; background-color: #ffffff; }
.dcl-signup__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-signup__submit { padding: 0.65rem 1rem; border: none; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; color: #ffffff; background-color: #1d4ed8; }
.dcl-signup__submit:hover { color: #ffffff; background-color: #1e40af; }
.dcl-signup__submit:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-signup__status { margin: 0; font-size: 0.9rem; color: #334155; background-color: #ffffff; }
</style>
<script>
(function () {
  document.querySelectorAll(".dcl-signup").forEach(function (form) {
    if (form.dataset.dclBound) {
      return;
    }
    form.dataset.dclBound = "true";
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      var status = form.querySelector(".dcl-signup__status");
      if (status) {
        status.textContent = "Demo only: no account was created. Connect this form to your registration endpoint.";
      }
    });
  });
})();
</script>