HTML Forms: Complete Guide to User Input

Introduction to HTML Forms

Forms are essential for collecting user input on websites. From simple contact forms to complex checkout processes, understanding HTML forms is crucial for web development.

Basic Form Structure

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

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

Key attributes:

• action: Where form data is sent
• method: HTTP method (GET or POST)

Input Types

HTML5 introduced many specialized input types:

Text Inputs

<input type="text" placeholder="Regular text">
<input type="email" placeholder="email@example.com">
<input type="password" placeholder="Password">
<input type="tel" placeholder="Phone number">
<input type="url" placeholder="https://example.com">
<input type="search" placeholder="Search...">

Number Inputs

<input type="number" min="0" max="100" step="1">
<input type="range" min="0" max="100" value="50">

Date and Time

<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

Selection Inputs

<input type="checkbox" id="agree" name="agree">
<input type="radio" name="choice" value="a">
<input type="color" value="#3b82f6">
<input type="file" accept="image/*">

Select Dropdowns

<select name="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
</select>

Textarea

<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

Form Validation

HTML5 provides built-in validation:

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

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

<!-- Min/Max length -->
<input type="text" minlength="3" maxlength="50">

<!-- Number constraints -->
<input type="number" min="1" max="100">

Accessible Forms

Always use labels and consider these practices:

<form>
    <div>
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email"
               aria-describedby="email-help" required>
        <small id="email-help">We'll never share your email.</small>
    </div>

    <fieldset>
        <legend>Notification Preferences</legend>
        <label>
            <input type="checkbox" name="notifications" value="email">
            Email notifications
        </label>
        <label>
            <input type="checkbox" name="notifications" value="sms">
            SMS notifications
        </label>
    </fieldset>
</form>

Complete Form Example

<form action="/contact" method="POST">
    <h2>Contact Us</h2>

    <div class="form-group">
        <label for="name">Full Name *</label>
        <input type="text" id="name" name="name" required
               autocomplete="name">
    </div>

    <div class="form-group">
        <label for="email">Email *</label>
        <input type="email" id="email" name="email" required
               autocomplete="email">
    </div>

    <div class="form-group">
        <label for="subject">Subject</label>
        <select id="subject" name="subject">
            <option value="">Choose a topic</option>
            <option value="support">Support</option>
            <option value="sales">Sales</option>
            <option value="other">Other</option>
        </select>
    </div>

    <div class="form-group">
        <label for="message">Message *</label>
        <textarea id="message" name="message" rows="5" required></textarea>
    </div>

    <button type="submit">Send Message</button>
</form>

Best Practices

1. Always use <label> elements with for attributes
2. Group related fields with <fieldset> and <legend>
3. Use appropriate input types for better mobile keyboards
4. Provide clear error messages
5. Include autocomplete attributes for common fields
6. Test forms with keyboard navigation

Related Resources

• Learn form styling with CSS Fundamentals
• Add interactivity with JavaScript Basics