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:
<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 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. |
Please Login to comment...