Skip to content
HTML

Accessible Form with Inputs

Build an accessible HTML form with labels, inputs, select, and checkbox.

By EZ4Code Team
forminputbeginner

Code

<form action="/submit" method="POST">
  <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 />

  <label for="role">Role</label>
  <select id="role" name="role">
    <option value="">Choose...</option>
    <option value="admin">Admin</option>
    <option value="user">User</option>
  </select>

  <fieldset>
    <legend>Preferences</legend>
    <label>
      <input type="checkbox" name="newsletter" /> Subscribe to newsletter
    </label>
  </fieldset>

  <button type="submit">Submit</button>
</form>

Explanation

Builds an accessible form using label[for] paired with input[id] so screen readers announce fields correctly. The select element provides a dropdown, and fieldset/legend groups related checkbox controls. The required attribute enables native browser validation before submission.

More HTML Snippets