HTML Forms

The Basic Form Structure

<form action="/submit" method="POST">
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Submit</button>
</form>

Every form needs three things:

• action — the URL the form submits to.
• method — GET for search/filters, POST for creating/updating data.
• name on every input — this is the key sent to the server.

Every Input Type You Need

Native Validation Attributes

All of these work without a single line of JavaScript:

<!-- Required field -->
<input type="text" required>

<!-- Length constraints -->
<input type="text" minlength="3" maxlength="20">

<!-- Numeric range -->
<input type="number" min="18" max="120">

<!-- Regex pattern -->
<input type="text" pattern="[A-Za-z]{3,}">

<!-- Custom error message -->
<input type="text" required
       title="Please enter your full name">

<!-- Only shown when the field is valid -->
<input type="email">

What each does:

• required — the field cannot be empty.
• minlength / maxlength — string length limits.
• min / max — numeric or date limits.
• pattern — regex check on the input value.
• title — custom error message shown by the browser.

Accessibility — Labels Are Mandatory

Every input must have a label. There are two ways to associate them:

<!-- Method 1: for + id (preferred) -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- Method 2: Wrap the input in the label -->
<label>
    Email address
    <input type="email" name="email">
</label>

<!-- ❌ Wrong — no label, placeholder isn't a label -->
<input type="email" placeholder="Email address">

Group related inputs with fieldset:

<fieldset>
    <legend>Shipping Address</legend>

    <label for="street">Street</label>
    <input type="text" id="street" name="street">

    <label for="city">City</label>
    <input type="text" id="city" name="city">
</fieldset>

Styling Valid, Invalid, and Focus States

CSS pseudo-classes let you style validation state without JavaScript:

/* Default state */
input {
    border: 1px solid #475569;
    padding: 8px 12px;
    border-radius: 6px;
}

/* Focused */
input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Invalid — but only after the user has typed */
input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Valid — but only after typing */
input:valid:not(:placeholder-shown) {
    border-color: #10b981;
}

/* Required but empty */
input:required:placeholder-shown {
    border-color: #475569;
}

A Complete Production Form

<form action="/signup" method="POST" novalidate>
    <fieldset>
        <legend>Create your account</legend>

        <div class="field">
            <label for="name">Full Name</label>
            <input type="text" id="name" name="name"
                   required minlength="2" maxlength="60"
                   autocomplete="name">
        </div>

        <div class="field">
            <label for="email">Email</label>
            <input type="email" id="email" name="email"
                   required autocomplete="email">
        </div>

        <div class="field">
            <label for="password">Password</label>
            <input type="password" id="password" name="password"
                   required minlength="8"
                   autocomplete="new-password"
                   aria-describedby="password-help">
            <small id="password-help">
                At least 8 characters
            </small>
        </div>

        <div class="field">
            <input type="checkbox" id="terms" name="terms" required>
            <label for="terms">I agree to the terms</label>
        </div>

        <button type="submit">Create Account</button>
    </fieldset>
</form>

Key details:

• autocomplete — helps browsers and password managers fill fields correctly.
• aria-describedby — connects help text to the input for screen readers.
• novalidate — disables browser default UI so you can style validation yourself.
• fieldset + legend — groups related fields with a heading.