HTML5 Mastery: The Complete Web Foundation
HomeInsightsCoursesHTMLForm Structure & Methods (GET, POST)
Forms & Input

Form Basics & Input Types

Master HTML forms to collect user input. Learn form structure, input types, validation, accessibility, and how forms submit data to servers.

The <form> Element

Forms collect user input and send it to a server for processing. They're essential for logins, signups, search, checkouts, and any user interaction.

Basic Form Structure
HTML
<form action="/submit" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    
    <button type="submit">Login</button>
</form>

Form Attributes:

  • action - URL where form data is sent
  • method - HTTP method (GET or POST)
  • name - Form identifier
  • autocomplete - Enable/disable browser autocomplete
  • novalidate - Disable HTML5 validation

Form Methods: GET vs POST

GET Method

HTML
<form action="/search" method="GET">
    <input type="search" name="q">
    <button>Search</button>
</form>

<!-- Submits to: /search?q=html --&gt;

Characteristics:

  • Data in URL query string
  • Visible in browser history
  • Can be bookmarked
  • Limited data size (~2000 chars)
  • Should not modify data

Use For:

  • ✅ Search forms
  • ✅ Filters
  • ✅ Pagination
  • ✅ Retrieving data

POST Method

HTML
<form action="/login" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <button>Login</button>
</form>

<!-- Data sent in request body (hidden) --&gt;

Characteristics:

  • Data in request body
  • Not visible in URL
  • Cannot be bookmarked
  • No size limit
  • Can modify server data

Use For:

  • ✅ Login forms
  • ✅ Registration
  • ✅ File uploads
  • ✅ Creating/updating data

Text Input Types

1. Text - type="text"

HTML
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" placeholder="John Doe" maxlength="50">

2. Password - type="password"

HTML
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password" required minlength="8">

3. Email - type="email"

HTML
<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="user@example.com">

Validates email format and shows email keyboard on mobile.

4. Tel - type="tel"

HTML
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Shows numeric keyboard on mobile devices.

5. URL - type="url"

HTML
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">

6. Search - type="search"

HTML
<label for="search">Search:</label>
<input type="search" id="search" name="q" placeholder="Search...">

Shows clear button (X) when text is entered.

Number & Range Inputs

1. Number - type="number"

HTML
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="120" step="1">

Spinners for increment/decrement, numeric keyboard on mobile.

2. Range - type="range"

HTML
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
<output for="volume">50</output>

<script>
const range = document.getElementById('volume');
const output = document.querySelector('output');
range.addEventListener('input', () => {
    output.value = range.value;
});
</script>

Date & Time Inputs

1. Date - type="date"

HTML
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31">

2. Time - type="time"

HTML
<label for="meeting">Meeting Time:</label>
<input type="time" id="meeting" name="meeting" min="09:00" max="18:00">

3. Datetime-local - type="datetime-local"

HTML
<label for="appointment">Appointment:</label>
<input type="datetime-local" id="appointment" name="appointment">

4. Month - type="month"

HTML
<label for="expiry">Card Expiry:</label>
<input type="month" id="expiry" name="expiry" min="2024-01">

5. Week - type="week"

HTML
<label for="week">Select Week:</label>
<input type="week" id="week" name="week">

Selection Inputs

1. Checkbox - type="checkbox"

HTML
<!-- Single checkbox --&gt;
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to terms and conditions</label>

<!-- Multiple checkboxes --&gt;
<fieldset>
    <legend>Interests:</legend>
    <input type="checkbox" id="html" name="interests" value="html">
    <label for="html">HTML</label>
    
    <input type="checkbox" id="css" name="interests" value="css">
    <label for="css">CSS</label>
    
    <input type="checkbox" id="js" name="interests" value="javascript">
    <label for="js">JavaScript</label>
</fieldset>

2. Radio - type="radio"

HTML
<fieldset>
    <legend>Choose a payment method:</legend>
    
    <input type="radio" id="credit" name="payment" value="credit" checked>
    <label for="credit">Credit Card</label>
    
    <input type="radio" id="debit" name="payment" value="debit">
    <label for="debit">Debit Card</label>
    
    <input type="radio" id="paypal" name="payment" value="paypal">
    <label for="paypal">PayPal</label>
</fieldset>
💡
Radio vs Checkbox: Radio buttons allow one selection from a group (same name attribute). Checkboxes allow multiple selections.

File & Color Inputs

1. File - type="file"

HTML
<!-- Single file --&gt;
<label for="avatar">Profile Picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">

<!-- Multiple files --&gt;
<label for="photos">Upload Photos:</label>
<input type="file" id="photos" name="photos" multiple accept="image/png, image/jpeg">

<!-- Specific file types --&gt;
<label for="document">Upload PDF:</label>
<input type="file" id="document" name="document" accept=".pdf,application/pdf">

2. Color - type="color"

HTML
<label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">

Hidden & Submit Inputs

1. Hidden - type="hidden"

HTML
<!-- Store data not shown to user --&gt;
<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="csrf_token" value="abc123def456">

2. Submit - type="submit"

HTML
<input type="submit" value="Submit Form">

<!-- Better: use <button> --&gt;
<button type="submit">Submit Form</button>

3. Button - type="button"

HTML
<button type="button" onclick="doSomething()">Click Me</button>

4. Reset - type="reset"

HTML
<button type="reset">Clear Form</button>
⚠️ Avoid Reset Buttons: Users rarely want to clear entire forms. Reset buttons often cause frustration when clicked accidentally.

Common Input Attributes

required

Field must be filled before submission

HTML
<input type="text" name="username" required>

placeholder

Hint text shown when empty

HTML
<input type="email" placeholder="user@example.com">

disabled

Make input non-editable and unsubmittable

HTML
<input type="text" value="Cannot edit" disabled>

readonly

Editable = false, but submittable

HTML
<input type="text" value="Read only" readonly>

maxlength

Maximum character limit

HTML
<input type="text" maxlength="50">

minlength

Minimum character requirement

HTML
<input type="password" minlength="8">

pattern

Regular expression validation

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

autocomplete

Control browser autocomplete

HTML
<input type="email" autocomplete="email">
<input type="text" autocomplete="off">

Complete Form Example

Registration Form
HTML
<form action="/register" method="POST">
    <h2>Create Account</h2>
    
    <!-- Text inputs --&gt;
    <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="password">Password:</label>
    <input type="password" id="password" name="password" 
           required minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
    <small>Must contain uppercase, lowercase, and number</small>
    
    <!-- Date --&gt;
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob" required>
    
    <!-- Radio --&gt;
    <fieldset>
        <legend>Gender:</legend>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
        
        <input type="radio" id="other" name="gender" value="other">
        <label for="other">Other</label>
    </fieldset>
    
    <!-- Checkbox --&gt;
    <input type="checkbox" id="newsletter" name="newsletter" value="yes">
    <label for="newsletter">Subscribe to newsletter</label>
    
    <input type="checkbox" id="terms" name="terms" required>
    <label for="terms">I agree to Terms & Conditions</label>
    
    <!-- Buttons --&gt;
    <button type="submit">Create Account</button>
    <button type="button" onclick="window.location='/login'">
        Already have an account?
    </button>
</form>

Best Practices Summary

✅ Do

  • Use appropriate input types
  • Always include labels
  • Use GET for searches, POST for data changes
  • Add required and validation attributes
  • Provide helpful placeholder text
  • Use fieldset for grouped inputs
  • Test on mobile devices
  • Provide clear error messages

❌ Don't

  • Use placeholder as label
  • Forget name attributes
  • Use type="text" for everything
  • Add reset buttons unnecessarily
  • Make fields required without indication
  • Use GET for sensitive data
  • Forget mobile keyboard optimization
  • Disable paste in password fields

What's Next?

Now that you understand form basics, let's learn about form validation and accessibility.

Next: Form Validation & Accessibility →