HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB ///

HTML Checkbox & Radio

Capture user choices precisely. Learn the difference between multiple selection and exclusive options.

forms.html
1 / 15
12345
☑️

Tutor:Forms allow users to send data. Two common ways to make selections are Checkboxes and Radio buttons. Checkboxes are for multiple choices, while Radios are for single exclusive choices.


Skill Matrix

UNLOCK NODES BY MASTERING INPUTS.

Concept: Checkboxes

Use type="checkbox" for binary choices (on/off). Multiple checkboxes operate independently.

System Check

Which attribute is used to pre-select a checkbox?

Community Holo-Net

Best Form Practices

ACTIVE

Discussing accessibility patterns for custom radio buttons. Join the thread.

Support Us

HTML Forms: Inputs

Author

Pascual Vila

Frontend Instructor // Code Syllabus

Data collection is the heart of interactivity. Checkboxes and Radio Buttons are the primary tools for discrete user choices.

Checkboxes

Created with <input type="checkbox">. These operate independently. A user can select zero, one, or many checkboxes in a group.

Radio Buttons

Created with <input type="radio">. The key here is the name attribute. If multiple radios share the same name, they become a group where only one can be selected at a time.

Grouping Elements

To semantically group controls, wrap them in a <fieldset> and use a <legend> to define the group title. This is vital for screen readers.

View Full Transcript+

This section contains the full detailed transcript of the video lessons regarding form inputs, specifically the distinction between boolean selection (checkboxes) and exclusive selection (radios), and how to properly associate labels for accessibility.

Inputs Glossary

Checkbox

An input widget that allows the user to select multiple options from a set of choices.

snippet.html

Radio Button

An input widget that restricts the user to a single choice from a set of mutually exclusive options.

snippet.html

Name Attribute

Used to group radio buttons together. All radios with the same name belong to the same group.

snippet.html

Checked

A boolean attribute that pre-selects an input (checkbox or radio) when the page loads.

snippet.html

Fieldset

A container used to group related elements in a form, often used with a `<legend>`.

snippet.html

Label

A label for an <input> element. Clicking on the label toggles the control.

snippet.html