Usage of radio vs checkbox button elements in HTML

I just encountered an ahtml code which used radio as checkbox, and decided to run the different scenarios when we interchange radio/checkbox usage.

First we define and meaningify* the attributes radio and checkbox for form tag in html.

Radio and checkbox are input elements used in html form tag.

Radio is used when you want to exclusively have no option or ONE option and NOT other(s), eg operating system you wish to download? android or iOS.

Checkbox is when you can choose no option, one option or MORE than one option. eg phone that you ever used : Samsung or/and iPhone

The value for the name attribute must be IDENTICAL for all radio buttons

The type attribute must be radio for radio use, and checkbox for checkbox use.

It doesn’t serve anything to allow the form to be submitted without any of the radio/checkbox buttons selected, so it is usually wise to have one default to the checked state.

However, with checkboxes, the selected option can be switched on and off, but can’t do so for radio. In radio, once an option is selected, can only be dis-selected by choosing another, but can’t be turned off. This makes it a sensible option for a checkbox to have no checked state, and important to have the checked state for the radio.

Radio and Checkboxes can be interchanged, but not without a cost nor without changing their meaning entirely.

Possible code:

I. Radio as Checkbox.

type=radio, name=different value for the names

• User can choose 0, 1 or many options. This type radio similar to using a checkbox.
• Name values and choices will match in the backend data.
• Correct use as checkbox. But the different values in the names makes this NOT a radio, even though its type indicates that it’s a radio.

<input type=”radio” id=”huis” name=”huis” checked>huis
<input type=”radio” id=”kantoor” name=”kantoor”>kantoor
<input type=”radio” id=”overige” name=”overige”>overige

II. Checkbox as Checkbox.

type=checkbox, name=different value for the names

• User can choose 0, 1 or many options.
• Name values and choices will match in the backend data.
• Correct use

<input type=”checkbox” id=”huis” name=”huis” checked>huis
<input type=”checkbox” id=”kantoor” name=”kantoor”>kantoor
<input type=”checkbox” id=”overige” name=”overige”>overige

III. Checkbox as Radio.

type=checkbox, name=identical value for the names

• User can choose 0, 1 or many options.
• You will get only one option, for any value chosen.
• Name value and choices will match in the backend data.
• Correct use as checkbox. But the same values in the names makes this NOT a checkbox, even though its type indicates that it’s a checkbox.

<input type=”checkbox” id=”huis” name=”gebouw” checked>huis
<input type=”checkbox” id=”kantoor” name=”gebouw”>kantoor
<input type=”checkbox” id=”overige” name=”gebouw”>overige

IV. Radio as Radio.

type=radio, name=identical value for the names

• Can only make ONE option.
• The data will only have one value corresponding to the data field.
• Correct use

<input type=”radio” id=”huis” name=”gebouw” checked>huis
<input type=”radio” id=”kantoor” name=”gebouw”>kantoor
<input type=”radio” id=”overige” name=”gebouw”>overige

As a conclusion, use radios as radios and checkboxes as checkboxes.

Interchanging the usage makes no difference to the user, only in syntax, and might make a difference in the database, value-name relationships.

Note: *meaningify word used above is not an English word.

If you feel like writing a TL;DR of this, please add in comment box below.