Section 20: Radio Buttons, Checkboxes and Button Types

Learning Objectives

• Understand the difference between radio buttons and checkboxes.
• Group radio buttons correctly.
• Understand submit, reset and button types.
• Use buttons safely inside and outside forms.

1. Radio Buttons

Radio buttons are appropriate when users should choose one option from a group.

<fieldset>
  <legend>Choose a payment method</legend>

  <label>
    <input type="radio" name="payment" value="upi" required>
    UPI
  </label>

  <label>
    <input type="radio" name="payment" value="card">
    Credit or Debit Card
  </label>

  <label>
    <input type="radio" name="payment" value="cash">
    Cash
  </label>
</fieldset>

Radio buttons with the same name form a group. If the user selects one option, the other options in that group become unselected.

2. Checkboxes

Checkboxes are appropriate for independent choices, such as selecting multiple interests or accepting a required agreement.

<fieldset>
  <legend>Select your skills</legend>

  <label>
    <input type="checkbox" name="skills[]" value="html">
    HTML
  </label>

  <label>
    <input type="checkbox" name="skills[]" value="css">
    CSS
  </label>

  <label>
    <input type="checkbox" name="skills[]" value="php">
    PHP
  </label>
</fieldset>

Several checkboxes can be checked at once. Using skills[] is a common convention for submitting multiple values to server frameworks, but HTML itself does not require the brackets.

3. Required Agreement Checkbox

<label>
  <input type="checkbox" name="terms" value="accepted" required>
  I agree to the terms and conditions.
</label>

With required, the checkbox must be checked before normal browser form validation allows submission. The server must still verify the submitted agreement where necessary.

4. Three Main Button Types

• submit: submits the form.
• reset: restores controls to their initial values.
• button: has no default form-submission behavior.

<form action="/register" method="post">
  <label for="username">Username</label>
  <input id="username" name="username" required>

  <button type="submit">Register</button>
  <button type="reset">Clear Form</button>
  <button type="button">Check Availability</button>
</form>

A button with type="button" requires JavaScript or another application behavior to perform an action. A reset button does not necessarily clear every field to an empty value; it restores each control's initial state.

5. Why Explicit Button Types Matter

A button associated with a form can default to submit when its type is omitted. Always set the type explicitly to prevent accidental submissions.

<button type="button">Open Help</button>
<button type="submit">Save</button>

6. Buttons Outside Forms

<button type="button">Open Menu</button>

Outside a form, an explicit button type still communicates its intended behavior. Use JavaScript to make it open a menu, dialog or another interface feature.

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.