📝 HTML Forms

Forms are how websites collect information from users. Whether it's a login page, contact form, or search bar, forms are essential for user interaction.

The <form> Element

The <form> element wraps all form controls and defines how data is submitted. 

<!-- Basic form structure -->
<form action="/submit" method="POST">
  <!-- Form inputs go here -->
</form>
Attribute Description
action URL where form data is sent
method HTTP method (GET or POST)
name Form identifier

Text Inputs

The <input> element creates various input fields:

<!-- Text input -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<!-- Email input (validates email format) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<!-- Password input (hides characters) -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
Live Example



Input Types

Type Purpose Example
text Single-line text Name, username
email Email address user@example.com
password Hidden text ••••••••
number Numeric input Age, quantity
tel Phone number (123) 456-7890
url Web address https://example.com
date Date picker 2024-01-15
checkbox Multiple choice ☑ Agree to terms
radio Single choice ◉ Option A ○ Option B

Labels

Always use <label> with inputs for accessibility: 

<!-- Method 1: Using 'for' attribute (most common) -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<!-- Method 2: Wrapping input (implicit association) -->
<label>
  Username:
  <input type="text" name="username">
</label>
♿ Accessibility

Labels are essential for screen readers and improve usability. Users can click the label to focus the input.

Checkboxes and Radio Buttons

Checkboxes (multiple selection)
<label>
  <input type="checkbox" name="hobbies" value="reading">
  Reading
</label>
<label>
  <input type="checkbox" name="hobbies" value="sports">
  Sports
</label>
<label>
  <input type="checkbox" name="hobbies" value="music">
  Music
</label>
Radio Buttons (single selection)
<!-- Same 'name' groups radio buttons together -->
<label>
  <input type="radio" name="size" value="small">
  Small
</label>
<label>
  <input type="radio" name="size" value="medium" checked>
  Medium
</label>
<label>
  <input type="radio" name="size" value="large">
  Large
</label>

Textarea

For multi-line text input:

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="50">
Default text here...
</textarea>

Select Dropdown

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">-- Select --</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

<!-- With option groups -->
<select name="food">
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
  </optgroup>
</select>

Buttons

<!-- Submit button (submits form) -->
<button type="submit">Submit</button>

<!-- Reset button (clears form) -->
<button type="reset">Reset</button>

<!-- Regular button (no default action) -->
<button type="button">Click Me</button>

<!-- Alternative submit button -->
<input type="submit" value="Submit">

Form Validation

HTML5 Validation Attributes

Attribute Purpose
required Field must be filled
minlength Minimum text length
maxlength Maximum text length
min / max Number range
pattern Regex validation 
<!-- Required field -->
<input type="text" name="username" required>

<!-- Length constraints -->
<input type="password" minlength="8" maxlength="20" required>

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

<!-- Pattern matching (regex) -->
<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

<!-- Email validation (built-in) -->
<input type="email" required>

Complete Form Example

<form action="/submit" method="POST">
  <!-- Personal Information -->
  <fieldset>
    <legend>Personal Information</legend>

    <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>

    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>

  <!-- Preferences -->
  <fieldset>
    <legend>Preferences</legend>

    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="">-- Select --</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
    </select>

    <label>
      <input type="checkbox" name="newsletter">
      Subscribe to newsletter
    </label>
  </fieldset>

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

Form Best Practices

💡 Best Practices
  • Always use labels with inputs
  • Use appropriate input types for validation
  • Provide clear error messages
  • Use placeholder text for examples, not labels
  • Group related fields with <fieldset>
  • Make required fields obvious
  • Keep forms as short as possible

Summary

📚 What you learned
  • Form structure with <form> element
  • Various input types (text, email, password, etc.)
  • Labels and their importance for accessibility
  • Checkboxes and radio buttons
  • Textareas and select dropdowns
  • HTML5 validation attributes
  • Complete form structure with fieldsets
← Semantic HTML CSS Basics →