Form Controls, Input Types & Labels

Interactive Form Architecture

Every input control must be paired with an accessible <label> using matching for and id attributes:

<form action="/register" method="POST">
    <div class="form-group">
        <label for="user-email">Email Address:</label>
        <input type="email" id="user-email" name="email" required placeholder="you@example.com" autocomplete="email">
    </div>
    <div class="form-group">
        <label for="user-password">Password:</label>
        <input type="password" id="user-password" name="password" required minlength="8">
    </div>
    <button type="submit">Create Account</button>
</form>