Radio Button Vs. Checkbox button

In this section we will learn the difference between the Radio button and the checkbox button in html.

Before knowing the Radio button and Checkbox differences, we should know about the Radio button and Checkbox button separately. After that, we will see the comparison table of the Radio button and checkbox button in html.

What do you mean by Radio Button?

A radio button is used to display small circular buttons that can be either selected or deselected. A black dot appears in the circle if the choices are selected; otherwise, the circle remains empty. Radio buttons are mutually exclusive, i.e., the visitor can choose only one of the several options. Thus it is used when a visitor is asked a question that can only correct answers from all the choices such as gender of a person, marital status, etc.

Syntax of Radio Button:

The various attributes that can be specified for a checkbox are:

Value: It is used to provide a value for each radio button.
Name: It is used to specify the name of the radio button. The collection of buttons have the same name. Thus selecting one will turn the other off.
Checked: It is used to specify the default selection.

Example of Radio Button:

<! Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
       HTML Radio Button Example
    <title>
</head>
  <style>
input[type=submit] {
  border: 3px solid;
  border-radius: 2px;
  color: ;
  display: block;
  font-size: 1em;
  font-weight: bold;
  margin: 1em auto;
  padding: 1em 4em;
  position: relative;
  text-transform: uppercase;
}
input[type=submit]::before
{
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]:hover {
  color: #1A33FF;
}
h2 {
 font-style: italic;
font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
font-size: 1.75em;
font-weight: bold;
  }
h1 {
 font-style: italic;
 font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
 font-size: 2.75em;
  font-weight: bold;
  }
  </style>
<body>
    <form>
               <h1> Example </h1>
                 <h2> HTML Radio Button Example </h2>
        Select the Gender <br>
        <input type="radio"
               name = "gender" 
               value  = "yes"> <label for = "gender"> Male
            </label> <br>
        <input type = "radio"
                name = "gender" 
               value = "no"> <label for = "gender">  Female
            </label> <br>
      <input type="radio"
               name = "gender" 
               value="no"> <label for = "gender"> Transgender  </label> <br>
        <input type = "submit" name = "submit" value = "Select Gender">
    </form>
</body>
 </html>

In the above Example, we have created a radio button in which users can select only one option from the list of options. In this, a user can select the gender according to their choice.

What do you mean by Checkbox?

The Checkbox is used to display small squares boxes that offer the user several choices that can be toggled "checked" and "unchecked". You can also set the default choice for the user by passing the attribute "checked". A tiny tick is displayed if the choice is selected. There can be several checkboxes in a form, and each works independently from other options. It is used when a user is asked a question that can have more than one correct answer, such as hobbies, >reading preferences, etc.

Syntax of Checkbox Button:

The various attributes that can be specified for a checkbox are:

Value: It is used to provide a value for each Checkbox.
Checked: It is used to specify the default selection in the list.
Name: It is used to specify the name for the Checkbox.

Example of Checkbox Button:

<! Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
        HTML Checkbox Example
    <title>
</head>
  <style>
input[type=submit] {
  border: 3px solid;
  border-radius: 2px;
  color: ;
  display: block;
  font-size: 1em;
  font-weight: bold;
  margin: 1em auto;
  padding: 1em 4em;
  position: relative;
  text-transform: uppercase;
}
h2 {
 font-style: italic;
font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
font-size: 1.75em;
font-weight: bold;
  }
h1 {
 font-style: italic;
 font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
 font-size: 2.75em;
  font-weight: bold;
  }
input[type=submit]::before
{
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]:hover {
  color: #1A33FF;
}
  </style>
<body>
    <form>
                   <h1> Example </h1>
                  <h2> HTML Checkbox Button Example </h2>
        Select the hobbies you have:
        <br>
        <input type="checkbox" 
               name="reading" 
      value="yes"> <label for = "Reading"> Reading 
            </label> <br>
        <input type="checkbox" 
               name="dancing" 
               value="yes"> <label for = "Dancing"> Dancing 
            </label> <br>
        <input type="checkbox" 
               name = "singing" 
               value ="yes"> <label for = "Singing"> Singing 
            </label> <br>
     <input type="checkbox" 
            name = "collecting" 
               value = "yes"> <label for = "collecting"> Coin Collecting
                 </label>
      <br>
<input type="checkbox" 
            name= "listening " 
               value =  "yes"> <label for = "collecting"> Listening songs
                 </label>
      <br>
             <input type = "submit" name = "submit" value = "Select Subjects">
 </form>
</body>
</html>

In the above Example, we have created a checkbox button in which users can select one or more options from the list of checkboxes. In this, users can select as many hobbies according to their choice.

Difference between a radio button and checkbox button

Sr.No	Radio button	Checkbox Button
1	It is used only when we have one option to be selected from several available options, for Example, gender, etc.	It is used only when we have one or many options to be selected, for Example, Hobby.
2	It is created using an HTML tag named <input>, and the type attribute is set to the radio. Syntax: <input type = "radio" name = "radio_name" value = "choice_id">	It is also created using an HTML tag named <input>, and the type attribute is set to Checkbox. Syntax: <input type = "checkbox" name = "checkbox_name" value = "choice_id" checked>
3	It is represented as small circle buttons on the screen.	It is represented as a small square box on the screen.
4	There are two states in the Radio button. It can be either true or false.	There are three states in the Checkbox. These areas are Checked, unchecked & indeterminate.
5	It is used to limit the user's choice to select only one option from the list of the options provided in the radio box.	It is used when you want to allow the user to select more than one option or none of the options from the list of choices in the Checkbox.