Compare/Difference between radio button and checkbox controls of HTML 5 with Examples.
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.
<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>
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.
<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>
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. |