HTML Tutorials

Checkboxes and radio buttons

If only a finite set of possible values is available to the user, you can give him a collection of options to choose from:

  • Check boxes: Choose more than one option.
  • Radio buttons: Choose only one option.

Radio buttons differ from check boxes in an important way: 

“Users can select a single radio button from a set of options but can select any number of check boxes (including none, one, or more than one).”

If many choices are available (more than half a dozen), use a drop-down list instead of radio buttons or check boxes. 

To create radio buttons and check boxes, take these steps:

  1. Use the <input> element with the type attribute set to radio or checkbox.
  2. Create each option with these attributes:
  • name: Give the option a name.
  • value: Specify what value is returned if the user selects the option.

You can also use the checked attribute (with a value of checked) to specify that an option should be already selected when the browser displays the form. This is a good way to specify a default selection. This markup shows how to format check box and radio button options:

<!DOCTYPE html>
<html lang="en">
  <head> </head>
    <form method="post">
      <p>Which courses do you want from Edupoly?</p>
          <input type="checkbox" name="course" value="HTML" checked="checked" />HTML
          <input type="checkbox" name="course" value="CSS" />CSS
          <input type="checkbox" name="food" value="JS" />JS
      <p>What is your gender?</p>
          <input type="radio" name="gender" value="male" />Male
          <input type="radio" name="gender" value="female" checked="checked" />Female

Which courses do you want from Edupoly?

  • HTML
  • CSS
  • JS

What is your gender?

  • Male
  • Female

In the preceding markup, each set of options uses the same name for each input control but gives a different value to each option. You give each item in a set of options the same name to let the browser know they’re part of a set. If you want to, you can select as many check boxes as you like by default in the page markup — simply include checked=”checked” in each <input> element you want selected in advance.