HTML Forms Guide

Learn how to create interactive forms with HTML

Introduction to HTML Forms

HTML forms are essential for collecting user input on websites. They allow users to enter data that is sent to a server for processing. Forms can contain various input elements like text fields, checkboxes, radio buttons, dropdowns, and more.

Basic Form Examples

Basic Form

Simple form with text inputs and submit button

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Submit</button>
</form><form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Submit</button>
</form>

Login Form

Typical login form with username and password

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

Input Types

Text Inputs

Various text-based input types

<form>
  <label for="text">Text:</label>
  <input type="text" id="text" name="text">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <label for="tel">Phone:</label>
  <input type="tel" id="tel" name="tel">
  
  <label for="url">Website:</label>
  <input type="url" id="url" name="url">
</form><form>
  <label for="text">Text:</label>
  <input type="text" id="text" name="text">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <label for="tel">Phone:</label>
  <input type="tel" id="tel" name="tel">
  
  <label for="url">Website:</label>
  <input type="url" id="url" name="url">
</form>

Specialized Inputs

Date, color, range, and file inputs

<form>
  <label for="date">Date:</label>
  <input type="date" id="date" name="date">
  
  <label for="color">Color:</label>
  <input type="color" id="color" name="color">
  
  <label for="range">Volume:</label>
  <input type="range" id="range" name="range" min="0" max="100">
  
  <label for="file">Upload File:</label>
  <input type="file" id="file" name="file">
</form><form>
  <label for="date">Date:</label>
  <input type="date" id="date" name="date">
  
  <label for="color">Color:</label>
  <input type="color" id="color" name="color">
  
  <label for="range">Volume:</label>
  <input type="range" id="range" name="range" min="0" max="100">
  
  <label for="file">Upload File:</label>
  <input type="file" id="file" name="file">
</form>

Form Controls

Checkboxes & Radios

Selection controls with labels

<form>
  <fieldset>
    <legend>Choose your interests:</legend>
    <label>
      <input type="checkbox" name="sports"> Sports
    </label>
    <label>
      <input type="checkbox" name="music"> Music
    </label>
    <label>
      <input type="checkbox" name="movies"> Movies
    </label>
  </fieldset>
  
  <fieldset>
    <legend>Gender:</legend>
    <label>
      <input type="radio" name="gender" value="male"> Male
    </label>
    <label>
      <input type="radio" name="gender" value="female"> Female
    </label>
    <label>
      <input type="radio" name="gender" value="other"> Other
    </label>
  </fieldset>
</form><form>
  <fieldset>
    <legend>Choose your interests:</legend>
    <label>
      <input type="checkbox" name="sports"> Sports
    </label>
    <label>
      <input type="checkbox" name="music"> Music
    </label>
    <label>
      <input type="checkbox" name="movies"> Movies
    </label>
  </fieldset>
  
  <fieldset>
    <legend>Gender:</legend>
    <label>
      <input type="radio" name="gender" value="male"> Male
    </label>
    <label>
      <input type="radio" name="gender" value="female"> Female
    </label>
    <label>
      <input type="radio" name="gender" value="other"> Other
    </label>
  </fieldset>
</form>

Select & Textarea

Dropdown and multi-line text inputs

<form>
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
    <option value="au">Australia</option>
  </select>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>
</form><form>
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
    <option value="au">Australia</option>
  </select>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>
</form>

Form Validation

HTML5 Validation

Built-in form validation attributes

<form>
  <label for="username">Username (required):</label>
  <input type="text" id="username" name="username" required minlength="4">
  
  <label for="email">Email (valid format):</label>
  <input type="email" id="email" name="email" required>
  
  <label for="age">Age (18-100):</label>
  <input type="number" id="age" name="age" min="18" max="100">
  
  <label for="password">Password (pattern):</label>
  <input type="password" id="password" name="password" 
         pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
         title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 characters">
  
  <button type="submit">Submit</button>
</form><form>
  <label for="username">Username (required):</label>
  <input type="text" id="username" name="username" required minlength="4">
  
  <label for="email">Email (valid format):</label>
  <input type="email" id="email" name="email" required>
  
  <label for="age">Age (18-100):</label>
  <input type="number" id="age" name="age" min="18" max="100">
  
  <label for="password">Password (pattern):</label>
  <input type="password" id="password" name="password" 
         pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
         title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 characters">
  
  <button type="submit">Submit</button>
</form>

< Previous Next >