HTML Forms

A labelled input

Try submitting an empty or malformed address. The documentation preview blocks navigation and submission.

<form>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Check email</button>
</form>

1. for matches id, giving the input an accessible name.
2. name supplies the field key when a real form is submitted.
3. required and type provide browser validation.

Basic Contact Form

A simple contact form with name, email, and message fields.

<form action="/contact" method="POST">
  <div>
    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" placeholder="John Doe" required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="john@example.com" required>
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" placeholder="Your message..."></textarea>
  </div>
  <button type="submit">Send Message</button>
</form>

Login Form

A login form with username, password, and remember me checkbox.

<form action="/login" method="POST">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" autocomplete="username" required>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" autocomplete="current-password" required>
  </div>
  <div>
    <input type="checkbox" id="remember" name="remember">
    <label for="remember">Remember me</label>
  </div>
  <button type="submit">Log In</button>
  <a href="/forgot-password">Forgot password?</a>
</form>

Multi-Step Registration Form

A comprehensive registration form with fieldsets grouping related inputs.

<form action="/register" method="POST">
  <fieldset>
    <legend>Personal Info</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" required>
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname" required>
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob" required>
  </fieldset>
  <fieldset>
    <legend>Account Details</legend>
    <label for="reg-email">Email:</label>
    <input type="email" id="reg-email" name="email" required>
    <label for="reg-pass">Password:</label>
    <input type="password" id="reg-pass" name="password" minlength="8" required>
    <label for="confirm-pass">Confirm Password:</label>
    <input type="password" id="confirm-pass" name="confirm_password" required>
  </fieldset>
  <button type="submit">Create Account</button>
</form>