HTML - Form Elements

Overview

Estimated time: 25–35 minutes

Compose accessible forms with the right controls and associations.

Examples

<label for="name">Name</label>
<input id="name" name="name">

<label for="color">Color</label>
<select id="color" name="color"><option>Red</option></select>

<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="4"></textarea>

<fieldset>
  <legend>Contact Preference</legend>
  <label><input type="radio" name="pref" value="email"> Email</label>
  <label><input type="radio" name="pref" value="phone"> Phone</label>
</fieldset>

<button type="submit">Go</button>

Try it

Common Pitfalls

• Inputs without labels or visually-hidden labels.
• Grouping radios without a fieldset/legend.