SyntaxStudy
Sign Up
HTML Checkboxes & Radio Buttons
HTML Beginner 1 min read

Checkboxes & Radio Buttons

Checkboxes & Radio Buttons

Checkboxes

Allow users to select multiple options. Each checkbox is independent. Add the checked attribute to pre-select one.

Radio Buttons

Allow users to select exactly one option from a group. All radios in the same group must share the same name.

The value Attribute

The value attribute is what gets sent to the server when the form is submitted — not the label text.

Example
<!-- Checkboxes (multiple allowed) -->
<p>Select skills:</p>
<input type="checkbox" id="html" name="skills" value="html" checked>
<label for="html">HTML</label>
<input type="checkbox" id="css" name="skills" value="css">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="skills" value="js">
<label for="js">JavaScript</label>

<!-- Radio buttons (only one allowed) -->
<p>Experience level:</p>
<input type="radio" id="beginner" name="level" value="beginner" checked>
<label for="beginner">Beginner</label>
<input type="radio" id="advanced" name="level" value="advanced">
<label for="advanced">Advanced</label>