Forms & Validation 📝

Forms are the primary way users interact with your website—from signing up for accounts to searching products, subscribing to newsletters, or posting comments. Mastering forms means understanding how to collect data safely, validate it properly, and create a smooth user experience.

Think of forms as conversations between your website and users. Good forms make those conversations easy and pleasant. Bad forms frustrate users and cost you conversions.

What you'll learn:

• How form data flows from browser to server
• Best practices for accessibility and UX
• All major input types and when to use them
• Client-side validation techniques
• Security considerations

1. The Form Element

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

<form action="/submit-data" method="POST">
  <!-- Inputs go here -->
</form>

Form Attributes Explained

action - Where the data is sent when submitted. Can be:

• Relative path: /api/users (on your own server)
• Absolute URL: https://api.example.com/submit (external service)
• Empty: Form submits to the same page
• JavaScript: Often omitted when handling submission with JS

method - The HTTP method used to send data:

• GET: Appends data to URL as query parameters

  • Visible in browser address bar
  • Bookmarkable and shareable
  • Limited data size (~2000 characters)
  • Use for: Search forms, filters, non-sensitive data

  <!-- Submits to: /search?query=javascript&sort=recent -->
  <form action="/search" method="GET">
    <input type="text" name="query">
    <select name="sort">
      <option value="recent">Most Recent</option>
    </select>
    <button type="submit">Search</button>
  </form>
  

• POST: Sends data in request body

  • Data not visible in URL
  • No size limits
  • Cannot be bookmarked
  • Use for: Login forms, creating accounts, uploading files, sensitive data

  <!-- Data sent securely in request body -->
  <form action="/register" method="POST">
    <input type="email" name="email">
    <input type="password" name="password">
    <button type="submit">Create Account</button>
  </form>
  

Other useful form attributes:

<form 
  action="/submit" 
  method="POST"
  enctype="multipart/form-data"  <!-- Required for file uploads -->
  autocomplete="on"               <!-- Enable browser autocomplete -->
  novalidate                      <!-- Disable HTML5 validation -->
  target="_blank"                 <!-- Open response in new tab -->
>

Form Submission Flow

User fills form → Clicks submit button → Browser validates (if enabled)
                ↓
        Validation passes?
          ↙         ↘
        Yes          No
         ↓            ↓
  Data sent to   Show error
    server       messages

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Stop page refresh
  
  const formData = new FormData(form);
  // Send data with fetch() instead
  fetch('/api/submit', {
    method: 'POST',
    body: formData
  });
});

2. Inputs & Labels

Always pair an <input> with a <label>. This isn't optional—it's critical for accessibility, usability, and SEO.

Why Labels Matter

Accessibility: Screen readers announce the label text, so users know what each field is for.

Usability: Clicking the label focuses the input, giving users a larger clickable area (especially helpful on mobile).

SEO: Proper form structure helps search engines understand your page purpose.

Proper Label Association

Method 1: Using for attribute (recommended):

<label for="username">Username:</label>
<input type="text" id="username" name="username">

The for attribute matches the input's id. This creates an explicit connection.

Method 2: Wrapping the input:

<label>
  Username:
  <input type="text" name="username">
</label>

Implicit association—works without id/for, but explicit is clearer for complex forms.

Method 3: Using aria-label (when visual label isn't desired):

<input 
  type="search" 
  name="query" 
  aria-label="Search products"
  placeholder="Search..."
>

<input type="email" placeholder="Email address">

<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="you@example.com">

The name Attribute

The name attribute is what actually gets sent to the server:

<input type="text" id="user-email" name="email">

When submitted, the server receives: email=user@example.com (uses name, not id).

Best practices:

• Use lowercase with underscores or hyphens: user_name or user-name
• Be descriptive: shipping_address not just address
• Match backend expectations (if backend expects firstName, use that)

3. Common Input Types

HTML5 provides specialized input types that offer built-in validation, better mobile keyboards, and improved UX.

Text-Based Inputs

type="text" - General text input (default):

<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

type="email" - Validates email format automatically:

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

• Shows @ on mobile keyboards
• Validates format: user@domain.com
• Can accept multiple emails: <input type="email" multiple>

type="password" - Hides characters as dots:

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

• Never shows actual characters (security)
• Often paired with password strength indicators
• Consider adding "show password" toggle button

type="search" - Styled as search field:

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

• Shows "×" clear button in some browsers
• May have rounded corners (browser styling)

type="tel" - Telephone number:

<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
• Doesn't validate format (use pattern for that)

type="url" - Validates URL format:

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

• Shows .com and / on mobile keyboards
• Requires protocol: https://example.com

Numeric Inputs

type="number" - Numeric input with spinner:

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

• Shows number keyboard on mobile
• Supports min, max, step attributes
• Use for integer counts, quantities

type="range" - Slider control:

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

• Good for non-precise values (volume, brightness)
• Consider showing current value with <output>

Date & Time Inputs

type="date" - Date picker:

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2026-01-17">

type="datetime-local" - Date and time:

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

type="time" - Time picker:

<label for="alarm">Set Alarm:</label>
<input type="time" id="alarm" name="alarm">

type="month" and type="week" - Month or week picker:

<input type="month" name="credit-card-expiry">
<input type="week" name="vacation-week">

Selection Inputs

type="checkbox" - Select multiple options:

<fieldset>
  <legend>Select your interests:</legend>
  
  <label>
    <input type="checkbox" name="interests" value="coding">
    Coding
  </label>
  
  <label>
    <input type="checkbox" name="interests" value="design">
    Design
  </label>
  
  <label>
    <input type="checkbox" name="interests" value="writing">
    Writing
  </label>
</fieldset>

type="radio" - Select one option from a group:

<fieldset>
  <legend>Choose payment method:</legend>
  
  <label>
    <input type="radio" name="payment" value="credit" checked>
    Credit Card
  </label>
  
  <label>
    <input type="radio" name="payment" value="paypal">
    PayPal
  </label>
  
  <label>
    <input type="radio" name="payment" value="crypto">
    Cryptocurrency
  </label>
</fieldset>

Key points:

• Radio buttons with same name form a group (only one selectable)
• Use checked to preselect an option
• Use <fieldset> and <legend> to group related options

File Inputs

type="file" - File upload:

<label for="avatar">Choose profile picture:</label>
<input 
  type="file" 
  id="avatar" 
  name="avatar"
  accept="image/png, image/jpeg"
  required
>

Multiple file upload:

<label for="documents">Upload documents:</label>
<input 
  type="file" 
  id="documents" 
  name="documents"
  accept=".pdf,.doc,.docx"
  multiple
>

Important: Forms with file uploads MUST use enctype="multipart/form-data":

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">Upload</button>
</form>

Other Input Types

type="color" - Color picker:

<label for="brand-color">Brand Color:</label>
<input type="color" id="brand-color" name="color" value="#3b82f6">

type="hidden" - Hidden from user (stores data):

<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="csrf_token" value="abc123xyz">

Common uses: CSRF tokens, user IDs, tracking data

4. Other Form Controls

Textarea

For multi-line text input:

<label for="message">Message:</label>
<textarea 
  id="message" 
  name="message" 
  rows="5" 
  cols="50"
  maxlength="500"
  placeholder="Write your message here..."
  required
></textarea>

Attributes:

• rows / cols - Initial size (can be resized by user)
• maxlength - Character limit
• Users can resize unless you add CSS: resize: none;

Select Dropdown

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

With optgroups:

<select name="device">
  <option value="">Select device</option>
  
  <optgroup label="Mobile">
    <option value="iphone">iPhone</option>
    <option value="android">Android</option>
  </optgroup>
  
  <optgroup label="Desktop">
    <option value="mac">Mac</option>
    <option value="windows">Windows</option>
  </optgroup>
</select>

Multiple selections:

<label for="skills">Skills (hold Ctrl/Cmd to select multiple):</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="react">React</option>
  <option value="node">Node.js</option>
</select>

Buttons

type="submit" - Submits the form (default):

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

type="button" - Does nothing by default (for JavaScript):

<button type="button" onclick="clearForm()">Clear</button>

type="reset" - Resets form to initial values:

<button type="reset">Reset Form</button>

Note: Avoid type="reset" buttons—users rarely want to clear entire forms, and accidental clicks are frustrating.

5. Client-Side Validation

You can enforce rules before the data even reaches the server, providing instant feedback and better UX.

HTML5 Validation Attributes

required - Field cannot be empty:

<input type="email" name="email" required>

minlength / maxlength - Character limits:

<input type="text" name="username" minlength="3" maxlength="20" required>
<textarea name="bio" maxlength="500"></textarea>

min / max - Number/date limits:

<input type="number" name="age" min="18" max="120">
<input type="date" name="appointment" min="2026-01-17" max="2026-12-31">

step - Increment value:

<input type="number" name="price" step="0.01" min="0">  <!-- Allows decimals -->
<input type="range" name="rating" min="1" max="5" step="1">  <!-- Only integers -->

pattern - Regular expression validation:

<!-- US phone number: 123-456-7890 -->
<input 
  type="tel" 
  name="phone" 
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  title="Format: 123-456-7890"
  placeholder="123-456-7890"
>

<!-- Only letters and spaces -->
<input 
  type="text" 
  name="name" 
  pattern="[A-Za-z ]+"
  title="Only letters and spaces allowed"
>

<!-- Strong password (min 8 chars, 1 letter, 1 number) -->
<input 
  type="password" 
  name="password" 
  pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}"
  title="Must contain at least one number and one letter, minimum 8 characters"
>

title attribute shows as tooltip and in validation messages—use it with pattern to explain requirements.

Input Modes

Control mobile keyboard layout with inputmode:

<!-- Numeric keyboard (for credit cards, codes) -->
<input type="text" inputmode="numeric" pattern="[0-9]*">

<!-- Decimal keyboard (for prices) -->
<input type="text" inputmode="decimal">

<!-- Email keyboard -->
<input type="text" inputmode="email">

<!-- URL keyboard -->
<input type="text" inputmode="url">

<!-- Search keyboard -->
<input type="text" inputmode="search">

Complete Validation Example

<form action="/register" method="POST" novalidate>
  <!-- Username -->
  <div>
    <label for="username">Username:</label>
    <input 
      type="text" 
      id="username" 
      name="username"
      minlength="3"
      maxlength="20"
      pattern="[a-zA-Z0-9_-]+"
      title="3-20 characters, letters, numbers, underscores and hyphens only"
      required
      autocomplete="username"
    >
  </div>

  <!-- Email -->
  <div>
    <label for="email">Email:</label>
    <input 
      type="email" 
      id="email" 
      name="email"
      required
      autocomplete="email"
    >
  </div>

  <!-- Password -->
  <div>
    <label for="password">Password:</label>
    <input 
      type="password" 
      id="password" 
      name="password"
      minlength="8"
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
      title="At least 8 characters with uppercase, lowercase, and number"
      required
      autocomplete="new-password"
    >
  </div>

  <!-- Age -->
  <div>
    <label for="age">Age:</label>
    <input 
      type="number" 
      id="age" 
      name="age"
      min="18"
      max="120"
      required
    >
  </div>

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

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

Custom Validation Messages

JavaScript lets you customize error messages:

const emailInput = document.querySelector('#email');

emailInput.addEventListener('input', () => {
  if (emailInput.validity.typeMismatch) {
    emailInput.setCustomValidity('Please enter a valid email address');
  } else {
    emailInput.setCustomValidity(''); // Clear custom message
  }
});

Styling Validation States

CSS pseudo-classes for validation feedback:

/* Valid input */
input:valid {
  border-color: green;
}

/* Invalid input */
input:invalid {
  border-color: red;
}

/* Required input */
input:required {
  border-left: 3px solid blue;
}

/* Optional input */
input:optional {
  border-left: 3px solid gray;
}

/* Only show invalid styling after user interaction */
input:not(:placeholder-shown):invalid {
  border-color: red;
}

// ❌ This alone is NOT enough
if (password.length >= 8) {
  submitForm();
}

// ✅ Must also validate server-side
// Backend: Check length, hash password, verify against requirements

6. Accessibility Best Practices

Use Fieldsets for Grouped Inputs

<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">
  
  <label for="zip">ZIP Code:</label>
  <input type="text" id="zip" name="zip">
</fieldset>

<fieldset> groups related inputs, <legend> provides context.

ARIA Attributes for Forms

<!-- Required field indicator -->
<label for="email">
  Email <span aria-label="required">*</span>
</label>
<input type="email" id="email" required aria-required="true">

<!-- Error message association -->
<label for="username">Username:</label>
<input 
  type="text" 
  id="username"
  aria-describedby="username-error"
  aria-invalid="true"
>
<span id="username-error" role="alert">
  Username must be at least 3 characters
</span>

<!-- Help text -->
<label for="password">Password:</label>
<input 
  type="password" 
  id="password"
  aria-describedby="password-help"
>
<small id="password-help">
  Must include uppercase, lowercase, number, and be 8+ characters
</small>

Form Accessibility Checklist

✅ Every input has an associated <label>
✅ Related inputs grouped in <fieldset> with <legend>
✅ Required fields marked visually AND with required attribute
✅ Error messages linked with aria-describedby
✅ Logical tab order (matches visual order)
✅ Submit button clearly labeled
✅ Form purpose clear from heading or intro text
✅ Works without JavaScript (progressive enhancement)

7. Resources & Tools

Official Documentation:

• MDN Forms Guide - Comprehensive tutorial series
• HTML5 Input Types - Complete reference
• Form Validation Guide - Client and server validation

Validation & Testing:

• HTML5 Pattern Tester - Test regex patterns
• Regex101 - Build and test regular expressions
• Can I Use - Check browser support for input types

Accessibility:

• WebAIM Forms Accessibility - Comprehensive guide
• A11y Form Validation - Best practices
• ARIA Forms - ARIA authoring practices

Tools & Libraries:

• Formspree - Form backend for static sites (no server required)
• Netlify Forms - Form handling for Netlify-hosted sites
• React Hook Form - Popular React validation library
• Yup - JavaScript schema validation