<htmlstart/>

HTML Form Elements

Forms use input, textarea, select, button, and fieldset elements to collect data.

Form Elements Overview

<form action="/submit" method="post">

  <!-- Text input with label -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <!-- Multi-line text -->
  <label for="msg">Message:</label>
  <textarea id="msg" name="message" rows="5"></textarea>

  <!-- Dropdown -->
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="">Choose...</option>
    <option value="gb">United Kingdom</option>
    <option value="us">United States</option>
    <option value="in">India</option>
  </select>

  <!-- Group related inputs -->
  <fieldset>
    <legend>Preferred contact:</legend>
    <input type="radio" id="r-email" name="contact" value="email">
    <label for="r-email">Email</label>
    <input type="radio" id="r-phone" name="contact" value="phone">
    <label for="r-phone">Phone</label>
  </fieldset>

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

</form>

Key Form Elements

ElementPurpose
<input>Single-line data entry (many types)
<textarea>Multi-line text entry
<select>Dropdown list of options
<button>Clickable button (submit, reset, or button)
<label>Text label linked to an input
<fieldset>Groups related inputs with a border
<legend>Caption for a fieldset
<datalist>Autocomplete suggestions for an input
Always pair <label for="id"> with <input id="id"> — clicking the label focuses the input, which is essential for accessibility and mobile usability.