TechLead
ContactAbout

HTML Forms

Form elements, inputs, validation, and best practices

What are HTML Forms?

Forms are the primary way users interact with websites—logging in, searching, commenting, checking out, etc. HTML provides powerful form elements with built-in validation, accessibility, and mobile-friendly input types.

The <form> Element

Every form starts with the <form> tag. It has two key attributes:

action: URL where form data is sent
method: GET (URL params) or POST (request body) 
<form action="/submit-contact" method="POST">
  <!-- form fields go here -->
  <button type="submit">Send</button>
</form>

Input Types with Visual Examples

Text Inputs

<input type="text" placeholder="Enter text" />
<input type="email" placeholder="user@example.com" />
<input type="password" placeholder="Password" />
<input type="tel" placeholder="555-1234" />
<input type="url" placeholder="https://..." />
<input type="search" placeholder="Search..." />

Numbers & Dates

<input type="number" min="0" max="100" />
<input type="range" min="0" max="100" />
<input type="date" />
<input type="time" />
<input type="datetime-local" />
<input type="color" />

Checkboxes & Radio Buttons

Checkboxes (multi-select):

Radio buttons (single-select):

<!-- Checkboxes (multiple selections) -->
<label>
  <input type="checkbox" name="skills" value="html" /> HTML
</label>
<label>
  <input type="checkbox" name="skills" value="css" /> CSS
</label>

<!-- Radio buttons (single selection - same name!) -->
<label>
  <input type="radio" name="plan" value="free" /> Free
</label>
<label>
  <input type="radio" name="plan" value="pro" /> Pro
</label>

Select & Textarea

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

<textarea name="message" rows="4"></textarea>

Complete Registration Form Example

Minimum 8 characters 
<form action="/register" method="POST">
  <div>
    <label for="name">Full Name *</label>
    <input 
      type="text" 
      id="name" 
      name="name" 
      placeholder="John Doe"
      required 
      minlength="2"
      maxlength="50"
    />
  </div>

  <div>
    <label for="email">Email *</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      placeholder="john@example.com"
      required 
    />
  </div>

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

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

  <div>
    <label for="bio">Bio</label>
    <textarea id="bio" name="bio" rows="4"></textarea>
  </div>

  <div>
    <input type="checkbox" id="terms" name="terms" required />
    <label for="terms">I agree to the terms *</label>
  </div>

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

HTML5 Validation Attributes

Built-in browser validation—no JavaScript needed!

required

Field must be filled

minlength / maxlength

Character limits

min / max / step

Number constraints

pattern

Regex validation

<!-- Required field -->
<input required />

<!-- Min/max length (for text) -->
<input minlength="5" maxlength="100" />

<!-- Number range -->
<input type="number" min="0" max="100" step="5" />

<!-- Pattern (regex) -->
<input 
  pattern="[A-Za-z]{3,}" 
  title="Only letters, minimum 3"
/>

<!-- Multiple files/emails -->
<input type="file" multiple />
<input type="email" multiple />

<!-- Custom validation message -->
<input 
  type="email" 
  required 
  title="Please enter a valid email"
/>

⚠️ Common Mistakes

  • ❌ Missing labels: Every input needs a <label> for accessibility
  • ❌ Forgetting name attributes: Data won't be submitted without name="..."
  • ❌ Wrong button types: Use type="submit", not just <button>
  • ❌ Same name for radio buttons in different groups: Each group needs unique names
  • ❌ No form action/method: Form won't know where to send data

✓ Form Best Practices

  • Always link labels to inputs: Use matching for and id attributes
  • Use semantic input types: email, tel, url trigger correct mobile keyboards
  • Provide helpful placeholders: Show example formats ("555-1234")
  • Group related fields: Use <fieldset> and <legend>
  • Enable autocomplete: Add autocomplete attributes for better UX
  • Mark required fields: Use both visual indicators (*) and required attribute
  • Validate on submit: Don't annoy users with validation while typing

Learn More