Forms: Every Input Type Explained

HTML forms are how users interact with your application. A well-built form uses the right input types, provides clear labels, validates input, and communicates errors accessibly. This lesson covers every input type and best practice.

Form Structure

<form action="/submit" method="POST" id="signup-form" novalidate>
    <!-- novalidate disables browser validation so we can handle it with JS -->
    
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" id="email" name="email" required autocomplete="email">
        <span class="error" role="alert" aria-live="polite"></span>
    </div>
    
    <button type="submit">Sign Up</button>
</form>

Critical rules:

Every input must have a <label> — linked via for and id
Labels must come before inputs (except checkboxes/radios)
Never use placeholder text as a label replacement

Text Inputs

<!-- Plain text -->
<input type="text" name="username" placeholder="johndoe"
       minlength="3" maxlength="30" autocomplete="username">

<!-- Email — keyboard optimization on mobile, basic validation -->
<input type="email" name="email" required autocomplete="email">

<!-- Password -->
<input type="password" name="password" minlength="8" autocomplete="new-password">

<!-- Search — shows clear button in some browsers -->
<input type="search" name="q" placeholder="Search...">

<!-- URL — validates URL format -->
<input type="url" name="website" placeholder="https://example.com">

<!-- Tel — numeric keyboard on mobile -->
<input type="tel" name="phone" placeholder="+1 (555) 000-0000" autocomplete="tel">

<!-- Textarea for multi-line text -->
<textarea name="message" rows="4" cols="50" maxlength="500" 
          placeholder="Your message here..."></textarea>

Numeric Inputs

<!-- Number — up/down arrows, mobile numpad -->
<input type="number" name="quantity" min="1" max="100" step="1" value="1">

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5" value="50">
<output for="volume" id="volume-display">50</output>

<!-- Hidden field -->
<input type="hidden" name="csrf_token" value="abc123">

Date & Time Inputs

<!-- Date picker -->
<input type="date" name="dob" min="1900-01-01" max="2010-12-31">

<!-- Time -->
<input type="time" name="appointment" min="09:00" max="17:00">

<!-- Date and time (local) -->
<input type="datetime-local" name="event_time">

<!-- Month -->
<input type="month" name="expiry">

<!-- Week -->
<input type="week" name="week">

Checkboxes and Radio Buttons

<!-- Single checkbox -->
<label class="checkbox-label">
    <input type="checkbox" name="terms" required>
    I agree to the <a href="/terms">Terms of Service</a>
</label>

<!-- Checkbox group (multiple selection) -->
<fieldset>
    <legend>Select your interests</legend>
    <label><input type="checkbox" name="interests" value="javascript"> JavaScript</label>
    <label><input type="checkbox" name="interests" value="css" checked> CSS</label>
    <label><input type="checkbox" name="interests" value="python"> Python</label>
</fieldset>

<!-- Radio buttons (single selection from group) -->
<fieldset>
    <legend>Choose a plan</legend>
    <label>
        <input type="radio" name="plan" value="free" checked>
        Free — $0/month
    </label>
    <label>
        <input type="radio" name="plan" value="pro">
        Pro — $9/month
    </label>
    <label>
        <input type="radio" name="plan" value="enterprise">
        Enterprise — $49/month
    </label>
</fieldset>

Select Dropdowns

<!-- Basic select -->
<select name="country" required>
    <option value="">Select your country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
</select>

<!-- Select with groups -->
<select name="timezone">
    <optgroup label="Americas">
        <option value="EST">Eastern (UTC-5)</option>
        <option value="PST">Pacific (UTC-8)</option>
    </optgroup>
    <optgroup label="Europe">
        <option value="GMT">Greenwich (UTC+0)</option>
        <option value="CET">Central European (UTC+1)</option>
    </optgroup>
</select>

<!-- Multiple select -->
<select name="languages" multiple size="4">
    <option value="js" selected>JavaScript</option>
    <option value="ts">TypeScript</option>
    <option value="py">Python</option>
    <option value="go">Go</option>
</select>

File Input

<!-- Single file -->
<input type="file" name="avatar" accept="image/*">

<!-- Multiple files -->
<input type="file" name="documents" multiple accept=".pdf,.doc,.docx">

<!-- Camera on mobile -->
<input type="file" name="photo" accept="image/*" capture="environment">

Autocomplete Hints

<!-- Tell the browser what to autofill -->
<input autocomplete="name">
<input autocomplete="given-name">
<input autocomplete="email">
<input autocomplete="tel">
<input autocomplete="street-address">
<input autocomplete="postal-code">
<input autocomplete="cc-number">        <!-- credit card -->
<input autocomplete="new-password">    <!-- don't fill in registration -->
<input autocomplete="current-password"> <!-- do fill in login -->
<input autocomplete="off">             <!-- disable autofill -->

Buttons

<!-- Submit form -->
<button type="submit">Create Account</button>

<!-- Reset form to defaults -->
<button type="reset">Reset</button>

<!-- No form action (use in JavaScript) -->
<button type="button" id="preview-btn">Preview</button>

<!-- Disabled state -->
<button type="submit" disabled>Processing...</button>

<!-- Loading state with ARIA -->
<button type="submit" aria-busy="true">
    <span class="spinner"></span> Saving...
</button>

Accessibility Checklist

<!-- Error messages -->
<div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" 
           aria-describedby="email-error"
           aria-invalid="true">
    <span id="email-error" role="alert">Please enter a valid email address</span>
</div>

<!-- Required field indication -->
<label for="name">
    Name <span aria-label="required">*</span>
</label>
<input type="text" id="name" required aria-required="true">

<!-- Group description -->
<fieldset>
    <legend>Shipping Address</legend>
    <!-- inputs here -->
</fieldset>

Next lesson: CSS Selectors & Specificity — targeting exactly the right elements.