HTMLHTML · Lesson 5 of 8

Forms

Forms are how users give you data. Every login page, every search box, every contact form is made with these elements.

HTML
<form action="/submit" method="POST">

  <!-- Text input -->
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" placeholder="Alice Smith" required>

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

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

  <!-- Number -->
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="0" max="150">

  <!-- Date -->
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">

  <!-- Select dropdown -->
  <label for="language">Favorite Language:</label>
  <select id="language" name="language">
    <option value="">-- Choose one --</option>
    <option value="python">Python</option>
    <option value="js">JavaScript</option>
    <option value="rust">Rust</option>
  </select>

  <!-- Textarea -->
  <label for="bio">About you:</label>
  <textarea id="bio" name="bio" rows="4" cols="50"></textarea>

  <!-- Checkboxes -->
  <fieldset>
    <legend>Interests:</legend>
    <input type="checkbox" id="web" name="interest" value="web">
    <label for="web">Web Development</label>
    <input type="checkbox" id="data" name="interest" value="data">
    <label for="data">Data Science</label>
  </fieldset>

  <!-- Radio buttons -->
  <fieldset>
    <legend>Experience:</legend>
    <input type="radio" id="beginner" name="level" value="beginner">
    <label for="beginner">Beginner</label>
    <input type="radio" id="intermediate" name="level" value="intermediate">
    <label for="intermediate">Intermediate</label>
  </fieldset>

  <!-- Submit button -->
  <button type="submit">Submit</button>
  <button type="reset">Clear</button>
</form>
⚠ Warning
Always associate labels with inputs using for and id attributes. Without this, screen readers can't tell users what an input is for, and clicking a label won't focus the input. This is basic accessibility.