Sign-in form

How to use it

Use as the only form on a sign-in page or panel. Do not use it for creating an account (use the sign-up form) or for re-entering a password mid-session. The submit handler here only prevents submission and shows a demo message: the developer must wire it to the real sign-in endpoint, point the forgot-password link at the real reset page, and rename the dcl-signin ids if the form appears more than once on a page.

Accessibility

A native <form> labelled by its heading, with a <label for> on every field, autocomplete="username" on the email and autocomplete="current-password" on the password so password managers fill them. The Remember me checkbox, the forgot-password link and the submit button are all native controls in a logical Tab order, each with a 2px blue focus-visible outline, and the result is written to a role="status" region. Body text #0f172a on white is 17.85:1, the link #1d4ed8 on white is 6.70:1, and the button's white text on #1d4ed8 (#1e40af while hovered) is 6.70:1 (8.72:1).

Source (copy-ready)

Copy code

<form class="dcl-signin" aria-labelledby="dcl-signin-title">
  <h2 id="dcl-signin-title" class="dcl-signin__title">Sign in</h2>
  <div class="dcl-signin__field">
    <label for="dcl-signin-email" class="dcl-signin__label">Email address</label>
    <input type="email" id="dcl-signin-email" name="email" class="dcl-signin__input" autocomplete="username" required>
  </div>
  <div class="dcl-signin__field">
    <div class="dcl-signin__row">
      <label for="dcl-signin-password" class="dcl-signin__label">Password</label>
      <a href="../index.html" class="dcl-signin__link">Forgot password?</a>
    </div>
    <input type="password" id="dcl-signin-password" name="password" class="dcl-signin__input" autocomplete="current-password" required>
  </div>
  <div class="dcl-signin__check">
    <input type="checkbox" id="dcl-signin-remember" name="remember" class="dcl-signin__checkbox">
    <label for="dcl-signin-remember" class="dcl-signin__check-label">Remember me on this device</label>
  </div>
  <button type="submit" class="dcl-signin__submit">Sign in</button>
  <p class="dcl-signin__status" role="status"></p>
</form>
<style>
.dcl-signin { display: flex; flex-direction: column; gap: 1rem; max-width: 22rem; padding: 1.5rem; border: 1px solid #cbd5e1; border-radius: 0.75rem; font: inherit; color: #0f172a; background-color: #ffffff; box-sizing: border-box; }
.dcl-signin__title { margin: 0; font-size: 1.375rem; color: #0f172a; background-color: #ffffff; }
.dcl-signin__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.dcl-signin__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.dcl-signin__label { font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-signin__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-signin__input:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-signin__link { font-size: 0.9rem; color: #1d4ed8; background-color: #ffffff; }
.dcl-signin__link:hover { color: #1e40af; background-color: #ffffff; }
.dcl-signin__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-signin__check { display: flex; align-items: center; gap: 0.5rem; }
.dcl-signin__checkbox { width: 1.1rem; height: 1.1rem; margin: 0; }
.dcl-signin__checkbox:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-signin__check-label { color: #0f172a; background-color: #ffffff; }
.dcl-signin__submit { padding: 0.65rem 1rem; border: none; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; color: #ffffff; background-color: #1d4ed8; }
.dcl-signin__submit:hover { color: #ffffff; background-color: #1e40af; }
.dcl-signin__submit:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-signin__status { margin: 0; font-size: 0.9rem; color: #334155; background-color: #ffffff; }
</style>
<script>
(function () {
  document.querySelectorAll(".dcl-signin").forEach(function (form) {
    if (form.dataset.dclBound) {
      return;
    }
    form.dataset.dclBound = "true";
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      var status = form.querySelector(".dcl-signin__status");
      if (status) {
        status.textContent = "Demo only: nothing was sent. Connect this form to your sign-in endpoint.";
      }
    });
  });
})();
</script>