HTML Forms

Forms allow users to send data to a server. They're essential for logins, sign-ups, search, and contact forms. The <form> element wraps all form controls.

<form action="/submit" method="POST">
  <!-- Text input -->
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" placeholder="John Doe" required />

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

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

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

  <!-- Dropdown select -->
  <label for="role">Role:</label>
  <select id="role" name="role">
    <option value="">Select a role</option>
    <option value="developer">Developer</option>
    <option value="designer">Designer</option>
    <option value="manager">Manager</option>
  </select>

  <!-- Multi-line textarea -->
  <label for="msg">Message:</label>
  <textarea id="msg" name="message" rows="4" placeholder="Your message..."></textarea>

  <!-- Checkbox -->
  <input type="checkbox" id="agree" name="agree" required />
  <label for="agree">I agree to the Terms & Conditions</label>

  <!-- Radio buttons (same name = one group) -->
  <input type="radio" id="sub-yes" name="subscribe" value="yes" />
  <label for="sub-yes">Subscribe to newsletter</label>
  <input type="radio" id="sub-no" name="subscribe" value="no" />
  <label for="sub-no">No thanks</label>

  <!-- Submit -->
  <button type="submit">Send Message</button>
</form>

Key input types:

• text — Single-line text
• email — Email with built-in format validation
• password — Hides typed characters
• number — Numeric with min/max support
• checkbox — Toggle on/off independently
• radio — Select one from a named group
• file — Browse and upload a file
• date — Native date picker
• range — Slider for numeric ranges
• submit — Submits the form