Radio Button Vs Checkbox in HTML

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

Difference between radio button and checkbox

Radio button Checkbox
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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.