HTML Forms & Input Types

Difficulty: Beginner

Question

How do HTML forms work? What input types are available and how do you validate them?

Answer

HTML forms collect user input and submit it to a server. Key concepts:

1. <form> wraps all inputs with action (URL) and method (GET/POST) 2. Input types: text, email, password, number, date, file, checkbox, radio, range, color, tel, url, search 3. Built-in validation: required, pattern, min/max, minlength/maxlength 4. Labels are required for accessibility 5. FormData API for JavaScript form handling

HTML5 added many input types that provide native validation and mobile-optimized keyboards.

Code examples

Form with Various Input Types

<form action="/api/register" method="POST">
  <!-- Text with pattern validation -->
  <label for="username">Username</label>
  <input id="username" type="text" name="username"
         required minlength="3" maxlength="20"
         pattern="[a-zA-Z0-9_]+"
         placeholder="john_doe" />

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

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

  <!-- Number with range -->
  <label for="age">Age</label>
  <input id="age" type="number" name="age"
         min="18" max="120" />

  <!-- Date picker -->
  <label for="dob">Date of Birth</label>
  <input id="dob" type="date" name="dob" />

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

HTML5 input types give you free validation and mobile keyboards. type=email shows @ keyboard, type=number shows numeric pad, type=date shows date picker.

Radio, Checkbox, Select

<form>
  <!-- Radio: only one selection -->
  <fieldset>
    <legend>Plan</legend>
    <label>
      <input type="radio" name="plan" value="free"
             checked />
      Free
    </label>
    <label>
      <input type="radio" name="plan" value="pro" />
      Pro
    </label>
  </fieldset>

  <!-- Checkbox: multiple selections -->
  <fieldset>
    <legend>Skills</legend>
    <label>
      <input type="checkbox" name="skills"
             value="html" />
      HTML
    </label>
    <label>
      <input type="checkbox" name="skills"
             value="css" />
      CSS
    </label>
  </fieldset>

  <!-- Select dropdown -->
  <label for="country">Country</label>
  <select id="country" name="country">
    <option value="">Select...</option>
    <option value="us">United States</option>
    <option value="in">India</option>
  </select>
</form>

Use fieldset/legend to group related inputs. Radio buttons with the same name are mutually exclusive. Checkboxes allow multiple selections.

FormData API in JavaScript

<form id="myForm">
  <input name="title" value="Hello" />
  <input type="file" name="avatar" />
  <button type="submit">Submit</button>
</form>

<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = new FormData(form);
  // formData.get('title') => 'Hello'
  // formData.get('avatar') => File object

  // Add extra data
  formData.append('timestamp', Date.now());

  // Send with fetch
  const res = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
    // Do NOT set Content-Type header
    // Browser sets it with boundary automatically
  });
});
</script>

FormData handles file uploads and multipart data. Never manually set Content-Type when using FormData - the browser adds the correct multipart boundary.

Key points

• Always use label elements - either wrapping the input or using for/id
• Use fieldset and legend for grouping related radio/checkbox inputs
• HTML validation is for UX only - always validate on the server too

Concepts covered

Forms, Input Types, Validation, FormData, Accessibility