HTML Buttons & Choices

Common Mistakes

• Giving related radio buttons different names.
• Using radio buttons when multiple selections are needed.
• Using checkboxes when only one option should be selectable.
• Forgetting type="button" for a button that should not submit a form.
• Assuming that client-side required validation replaces server-side validation.

Practice Exercises

1. Create radio buttons for selecting a gender-neutral title such as Mr, Ms or Mx.
2. Create checkboxes for selecting multiple programming skills.
3. Create a required terms-and-conditions checkbox.
4. Create submit, reset and ordinary buttons in one form.
5. Explain why related radio buttons must share the same name.

Revision Quiz

1. Which control is used to choose one option from a group?
2. Which control supports several independent selections?
3. Which attribute groups radio buttons together?
4. Which button type submits a form?
5. Which button type has no default form-submission behavior?
6. What does a reset button do?

Answer Key and Explanations

1. Radio button — It is used for a single choice within a group.
2. Checkbox — Multiple independent checkboxes can be checked.
3. name — Matching names create a radio group.
4. submit — It initiates form submission.
5. button — It requires application behavior for an action.
6. Restores initial values — It does not necessarily empty every field.