HTML Recipes

Login

Since a login form is a self-contained, complete composition, and could be reused in various document contexts, article is an appropriate element to wrap it.

We use header and footer for common login form aspects like a form title and registration link. See other recipes for details on forms and form validation.

<article>
  <header>
    <h2>Login</h2>
  </header>
  <form>
    <p>
      <label for="username">Username</label>
      <input type="text" id="username" name="username" />
    </p>
    <p>
      <label for="password">Password</label>
      <input type="password" id="password" name="password" />
    </p>
  </form>
  <footer>
    <a href="...">Register</a>
  </footer>
</article>