Frontend·Beginner·10 questions

HTML Forms & Media

Collect user input with forms, input types, validation, and embed media with HTML5 elements.

Overview

HTML forms are the primary way users send data to a server. The <form> element wraps all inputs and has two key attributes: action (the URL where data is sent) and method (GET or POST). GET appends data to the URL as query strings — good for search forms. POST sends data in the request body — required for passwords, file uploads, or any sensitive data. Every input needs a name attribute so the server can identify the field.

HTML5 introduced a wide range of input types beyond the basic text field: email (validates email format), password (masks characters), number (shows numeric keyboard), date (shows date picker), checkbox (true/false toggle), radio (one choice from a group), file (opens file browser), range (slider), color (color picker), tel (phone number), and url (validates URL format). The browser handles validation for most of these automatically when you submit the form.

Form accessibility relies on properly associating labels with inputs using the for attribute on <label> matching the id on the input. The required attribute marks fields as mandatory. The placeholder attribute shows hint text inside an empty field. For styling, use CSS pseudo-classes like :focus, :valid, :invalid, and :required. Fieldsets group related inputs and the legend provides a group caption, which is especially important for radio button groups.

Code Example

Complete Registration Form with Validation and Accessibility
html
<form action="/register" method="POST" enctype="multipart/form-data">

  <!-- Text inputs with labels -->
  <div>
    <label for="fullname">Full Name *</label>
    <input type="text" id="fullname" name="fullname" placeholder="John Doe" required />
  </div>

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

  <div>
    <label for="password">Password *</label>
    <input type="password" id="password" name="password" minlength="8" required />
  </div>

  <div>
    <label for="age">Age</label>
    <input type="number" id="age" name="age" min="18" max="120" />
  </div>

  <div>
    <label for="dob">Date of Birth</label>
    <input type="date" id="dob" name="dob" />
  </div>

  <!-- Radio buttons need fieldset + legend -->
  <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>

  <!-- Dropdown select -->
  <div>
    <label for="country">Country</label>
    <select id="country" name="country">
      <optgroup label="Asia">
        <option value="pk">Pakistan</option>
        <option value="in">India</option>
      </optgroup>
      <optgroup label="Europe">
        <option value="uk">United Kingdom</option>
      </optgroup>
    </select>
  </div>

  <!-- Textarea -->
  <div>
    <label for="bio">Bio</label>
    <textarea id="bio" name="bio" rows="4" placeholder="Tell us about yourself..."></textarea>
  </div>

  <!-- File upload -->
  <div>
    <label for="avatar">Profile Picture</label>
    <input type="file" id="avatar" name="avatar" accept="image/*" />
  </div>

  <!-- Checkbox -->
  <div>
    <label>
      <input type="checkbox" name="terms" value="agreed" required />
      I agree to the Terms and Conditions
    </label>
  </div>

  <!-- Buttons -->
  <button type="submit">Create Account</button>
  <button type="reset">Clear Form</button>

</form>

Test Your Knowledge

Ready to test what you've learned? Take the quiz with 10 questions and see your score.