Skip to content
Related Articles

Related Articles

Improve Article

Radio Button Vs Checkbox in HTML

  • Last Updated : 27 Mar, 2020

Radio button: It is generally used in HTML forms. HTML forms are required when you need to collect some data from the site visitors. A radio button is used when you want to select only one option out of several available options.

Example:




<html>
  
<head>
    <title>
        Radio Button
    <title>
</head>
  
<body>
    <form>
        Do you agree this statement?
        <br>
        <input type="radio"
               name="agree" 
               value="yes">Yes
        <br>
        <input type="radio"
               name="agree" 
               value="no">No
        <br>
        <input type="Submit">
    </form>
</body>
  
</html>

Output:

Checkbox: Checkboxes are also mostly used in HTML forms. A checkbox allows you to choose one or many options to be selected from a list of options.

Example:






<html>
  
<head>
    <title>
        HTML Checkbox
    <title>
</head>
  
<body>
    <form>
        Choose languages you know:
        <br>
        <input type="checkbox" 
               name="C" 
               value="yes">C
        <br>
        <input type="checkbox" 
               name="C++" 
               value="yes">C++
        <br>
        <input type="checkbox" 
               name="Java" 
               value="yes">Java
        <br>
        <input type="checkbox" 
               name="Python" 
               value="yes">Python
        <br>
        <input type="Submit">
    </form>
</body>
  
</html>

Output:

Difference between radio button and checkbox

Radio buttonCheckbox
It is used when only one option to be selected out of several available options.Checkbox allows one or many options to be selected.
It is created by using HTML <input> tag but type attribute is set to radio.It is also created using HTML <input> tag but type attribute is set to checkbox.
It is a single control unit.It is a multiple control unit.
Radio button is presented as a small circle on the screen.Checkbox is presented as a small square box on the screen.
Radio button have only 2 states namely- True & False.Checkbox have 3 states namely- Checked, unchecked & indeterminate.
It is used when you want to limit the users choice to just one option from the range provided.It is used when you want to allow user to select multiple choices.

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :