Forms · Lesson 11 of 16

Grouping form controls

radio, select, textarea and fieldset.

8 minutes2 games

Radio inputs sharing a name form a single-choice group; checkboxes represent independent choices. fieldset groups related fields and legend names the group. Use select for options and textarea for longer text.

HTML

<form>
  <fieldset>
    <legend>Study mode</legend>
    <label><input type="radio" name="mode" value="online" checked> Online</label>
    <label><input type="radio" name="mode" value="campus"> Campus</label>
  </fieldset>
  <label for="level">Level</label>
  <select id="level" name="level"><option value="beginner">Beginner</option><option value="advanced">Advanced</option></select>
  <label for="notes">Notes</label>
  <textarea id="notes" name="notes" rows="3"></textarea>
  <button type="submit">Apply</button>
</form>

fieldset groups

legend names

label describes each choice

Complete the code

Complete the group label.

<fieldset>
  <>Contact preference</>
</fieldset>

Exercise

Create a select named level linked to a label, with two options.

HTML

Learn more from

Played 0 of 2 games

HTML

Forms · Lesson 11 of 16

Grouping form controls

radio, select, textarea and fieldset.

8 minutes2 games

HTML

<form>
  <fieldset>
    <legend>Study mode</legend>
    <label><input type="radio" name="mode" value="online" checked> Online</label>
    <label><input type="radio" name="mode" value="campus"> Campus</label>
  </fieldset>
  <label for="level">Level</label>
  <select id="level" name="level"><option value="beginner">Beginner</option><option value="advanced">Advanced</option></select>
  <label for="notes">Notes</label>
  <textarea id="notes" name="notes" rows="3"></textarea>
  <button type="submit">Apply</button>
</form>

fieldset groups

legend names

label describes each choice

Complete the code

Complete the group label.

<fieldset>
  <>Contact preference</>
</fieldset>

Exercise

Create a select named level linked to a label, with two options.

HTML

Learn more from

Played 0 of 2 games