• in
InterCourses
CoursesBlogs
0
← Introduction to HTML
○What is HTML?○Elements, Tags, and Attributes○Your First Complete Page
○Headings and Comments○Paragraphs, Emphasis, and Line Breaks○HTML Lists
○Hyperlinks○Images○Applying Styles to HTML
○Div and Span○HTML Tables○Classes and IDs
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions
○The Head Element and Page Title○Meta Tags○HTML Entities
○HTML Forms○Input Types●Checkboxes and Radio Buttons○Textarea and Select
○Embedding Video○Embedding Audio○Iframes
○Semantic HTML Tags○Details, Figure, and Figcaption
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions

Checkboxes and Radio Buttons

Checkboxes and radio buttons let users make choices. The key difference:

TypeSelectionUse case
CheckboxAny number (zero to all)Preferences, agreements, multi-select
RadioExactly one from a groupChoose one from a list

Checkboxes

html
<p>What technologies do you use?</p>

<label>
    <input type="checkbox" name="tech" value="html" />
    HTML
</label>
<label>
    <input type="checkbox" name="tech" value="css" />
    CSS
</label>
<label>
    <input type="checkbox" name="tech" value="js" checked />
    JavaScript (pre-checked)
</label>
  • Each checkbox has the same name but different value.
  • The server receives all checked values.
  • checked attribute pre-selects a box.

Radio buttons

html
<p>What is your experience level?</p>

<label>
    <input type="radio" name="level" value="beginner" checked />
    Beginner
</label>
<label>
    <input type="radio" name="level" value="intermediate" />
    Intermediate
</label>
<label>
    <input type="radio" name="level" value="advanced" />
    Advanced
</label>
  • All radio buttons in a group share the same name.
  • Only one can be selected at a time.
  • value is what gets sent to the server when the form is submitted.

Accessibility tip

Wrap related inputs in a <fieldset> with a <legend> for screen readers:

html
<fieldset>
    <legend>Choose your role</legend>
    <label><input type="radio" name="role" value="student" /> Student</label>
    <label><input type="radio" name="role" value="teacher" /> Teacher</label>
</fieldset>

Your Task

  1. Add at least 3 checkboxes.
  2. Add at least 3 radio buttons.
  3. Ensure all radio buttons share the same name attribute.
  4. Pre-select one radio button using checked.
  5. Group controls with <fieldset> and <legend>.
Hint 1
1 / 4
HINT 1

Group radio buttons by giving them the same name attribute — only one in the group can be selected.

Loading editor…
READY
intercourses
html