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.

--

--

--

think&code. Also an occasional G(Foodie)OAT: https://www.instagram.com/anaikoki/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Linux — Disk I/O Performance

Abstraction and Encapsulation in C#

AD623 Instrumentation Amplifier IC, Pinout, Datasheet, Circuit — The Engineering Knowledge

Po.et Developer Community Spotlight — May 2018

Building Bluetooth Services in Zephyr

HackUIowa 2018

A simple notes app with Firebase Firestore and Provider in Flutter 2.0

Scala Programming — A Skeptic’s Journey

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anna Ikoki

Anna Ikoki

think&code. Also an occasional G(Foodie)OAT: https://www.instagram.com/anaikoki/

More from Medium

My First Attempt At Building a Full Stack Application

Postinstall Script Demo

Uberspace — FTP Connection with VS Code

NOTHING HAPPENS UNTIL YOU GIVE IT A TRY