Question

What is the functional difference between HTML checkboxes and radio buttons?

Answer 1

Functionally HTML checkboxes the UI input component which allows multiple selection at a time. It is used when we want the user to select multiple belonging to same component field and it is expected that their can be multiple values that user may want to select together.

Example :

Whiskey What types of whiskey do you prefer? Scotch Bourbon Irish V Tennessee Rye

Corresponding HTML code for first checkbox :

<input type="checkbox" name="scotch" value="Scotch" checked="checked">

Name of each checkbox must be unique, value shall also be different in order to be able to identify them separately.

Radiobuttons are whereas the UI input component where only one selection can be made at a time. When tried to select another value, it will automatically deselect the previous selection.

It is used in scenarios where the inout desired is just one choice entered by the user. options shall be mutually exclusive for convenience.

Whiskey What is your preferred whiskey? O Scotch Bourbon O Rye O Irish O Tennessee

Corresponding HTML code for first radiobutton :

<input type="radio" name="scotch" value="Scotch" checked="checked">

Name of each radiobutton in a radio group must be same, so that they can be identified as a group.