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.

HTML Buttons & Choices