Radio Button and Checkbox Elements

⬅ Back

Making a choice is not always easy.

Sometimes the user must choose:

one option out of many
or several options at the same time

If there are many options, they may also need to be grouped into categories.

That is why forms use different interactive controls for different choice situations.

Two very important choice controls are:

radio buttons
checkboxes

1. Two different choice situations

There are two common cases:

Case 1:

Choose one option from many

Examples:

size
color
payment method

Best element:

radio buttons

Case 2:

Choose many options from many

Examples:

hobbies
interests
notification preferences

Best element:

checkboxes

Big comparison diagram:

Choice situation                  Best control
-------------------------------------------------------
One answer only                   radio buttons
Several answers allowed           checkboxes

Another diagram:

User choice
│
├── one from many   -> radio
└── many from many  -> checkbox

2. Radio buttons

If we add:

type="radio"

to an input, it becomes a radio button.

Radio buttons always work in groups.

They allow the user to choose one predefined value from several options.

Example:

<form>
  <p>Choose a color:</p>
  <label>
    <input type="radio" name="color" value="red" checked />
    Red
  </label>
  <label>
    <input type="radio" name="color" value="white" />
    White
  </label>
  <label>
    <input type="radio" name="color" value="green" />
    Green
  </label>
</form>

Practice examples: Example 1, Example 2

3. How radio buttons behave

Radio buttons mean:

only one option can be active at a time
selecting one option removes selection from the others in the same group

Diagram:

Choose a color:

(●) Red
( ) White
( ) Green

If the user clicks White:

Choose a color:

( ) Red
(●) White
( ) Green

If the user clicks Green:

Choose a color:

( ) Red
( ) White
(●) Green

Main rule:

In one radio group, only one option can be selected.

4. Why radio buttons must have the same `name`

All radio buttons in one group must have the same name.

Example:

<input type="radio" name="color" value="red" />
<input type="radio" name="color" value="white" />
<input type="radio" name="color" value="green" />

Why?

Because the browser uses name to understand:

“These radio buttons belong to one group.”

Diagram:

name="color"
   ├── Red
   ├── White
   └── Green

=> one radio group

If the names are different:

<input type="radio" name="color1" value="red" />
<input type="radio" name="color2" value="white" />
<input type="radio" name="color3" value="green" />

then the browser treats them as separate groups.

Bad result:

(●) Red
(●) White
(●) Green

That breaks the idea of one-choice-only.

So the rule is:

Same radio group -> same name

Practice example: Example 1

5. Why radio buttons need `value`

You cannot type into a radio button.

So each radio button must have a value.

Example:

<input type="radio" name="color" value="red" />

Meaning:

field group name = color
chosen value = red

If the user selects Red, the submitted data is conceptually:

color = red

Diagram:

User sees: Red
Browser sends: red

Another example:

Visible text     Submitted value
--------------------------------
Red              red
White            white
Green            green

6. The `checked` attribute in radio buttons

The checked attribute sets the default selected option.

Example:

<input type="radio" name="color" value="red" checked />

That means Red is selected initially.

Diagram:

Page opens:

(●) Red
( ) White
( ) Green

Important rule:

In one radio group, only one item can be checked.

So:

Radio group:
only one checked at a time

If nothing special is set, the first one is usually the first logical selected choice in how the group is presented, but in practice you should explicitly set checked when you want a default.

Practice example: Example 1

7. Checkboxes

Checkboxes are similar to radio buttons, but they allow many selections.

So they are used for:

many out of many

Example:

<form>
  <p>What are your hobbies?</p>
  <label>
    <input type="checkbox" name="hobby" value="music" checked />
    Music
  </label>
  <label>
    <input type="checkbox" name="hobby" value="sports" checked />
    Sports
  </label>
  <label>
    <input type="checkbox" name="hobby" value="reading" />
    Reading
  </label>
</form>

Practice examples: Example 3, Example 4

8. How checkboxes behave

Checkboxes allow the user to select:

none
one
several
all

Diagram:

What are your hobbies?

[x] Music
[x] Sports
[ ] Reading

If the user also checks Reading:

[x] Music
[x] Sports
[x] Reading

If the user unchecks Music:

[ ] Music
[x] Sports
[x] Reading

Main rule:

Checkboxes allow multiple selections.

9. Checkbox use cases

A checkbox can be used alone.

Example:

accept terms
agree to privacy policy
remember me

Diagram:

[ ] I agree to the terms

A checkbox can also be used in a group.

Example:

hobbies
skills
interests

Diagram:

Choose your hobbies:

[x] Music
[ ] Sports
[x] Reading
[ ] Travel

10. Why grouped checkboxes often use the same `name`

When checkboxes belong to one logical group, they often use the same name.

Example:

<input type="checkbox" name="hobby" value="music" />
<input type="checkbox" name="hobby" value="sports" />
<input type="checkbox" name="hobby" value="reading" />

This tells the browser:

these belong to the same field category.

Diagram:

name="hobby"
   ├── music
   ├── sports
   └── reading

If the user chooses Music and Sports, the idea is:

hobby -> music
hobby -> sports

So grouped checkboxes represent multiple values under one logical field name.

11. Why checkboxes need `value`

Just like radio buttons, checkboxes do not accept typed text.

So each checkbox must have a value.

Example:

<input type="checkbox" name="hobby" value="music" />

Meaning:

visible label = Music
submitted value = music

Diagram:

What user sees:   Music
What form sends:  music

12. The `checked` attribute in checkboxes

The checked attribute sets default checked state.

Example:

<input type="checkbox" name="hobby" value="music" checked />

This means the checkbox starts selected.

Diagram:

Initial state:

[x] Music
[x] Sports
[ ] Reading

Important difference from radio buttons:

radio group -> only one checked
checkbox group -> any number can be checked

Comparison diagram:

Radio group:
(●) one only

Checkbox group:
[x] many allowed

13. Radio vs checkbox

Big comparison:

Radio buttons
- one choice only
- same name = one group
- one selected at a time

Checkboxes
- many choices allowed
- often same name in one group
- any number may be selected

Visual comparison:

Radio:
( ) Red
(●) White
( ) Green

Checkbox:
[x] Music
[ ] Sports
[x] Reading

Short memory line:

radio = one
checkbox = many

14. The `:checked` pseudo-class

The :checked pseudo-class applies to:

radio buttons
checkboxes
selected options in a drop-down menu

It lets us style only selected controls.

Example:

input:checked {
  box-shadow: 0 0 0 2px orangered;
}

Meaning:

any checked input gets an orange visual effect

Diagram:

Checked item:
[x] -> highlighted

Unchecked item:
[ ] -> no highlight

Practice examples: Example 5, Example 6

15. Why `input:checked` can be too broad

This selector:

input:checked

targets all checked inputs that match:

checked radio buttons
checked checkboxes

Sometimes that is fine.

But sometimes we want only checkboxes or only radios.

Then we use an attribute selector.

16. Attribute selector

An attribute selector targets elements by attribute name and value.

General structure:

selector[attribute_name="..."]

Example:

input[type="checkbox"] {
}

Meaning:

select only inputs whose type is checkbox

Diagram:

input[type="checkbox"]
   ↓
only checkbox inputs

Another example:

input[type="radio"] {
}

Meaning:

only radio inputs

Practice example: Example 7

17. Styling only checked checkboxes

To style only checked checkboxes:

input[type="checkbox"]:checked {
  box-shadow: 0 0 0 2px orangered;
}

Meaning:

input must be a checkbox
and it must be checked

Diagram:

Matches:
[x] checkbox

Does not match:
[ ] checkbox
(●) radio

18. The `X + Y` selector

The selector:

X + Y

means:

select Y only if it comes immediately after X.

Example:

ul + p {
  background-color: yellow;
}

Meaning:

select the paragraph that comes directly after a ul

Diagram:

<ul>...</ul>
<p>this paragraph is selected</p>

But:

<ul>...</ul>
<div></div>
<p>this paragraph is NOT selected by ul + p</p>

Because p is not immediately after ul.

19. Using `:checked` with `X + Y`

This is very useful for styling the label text when the checkbox or radio is selected.

For this to work:

input must come first
label must come immediately after it

HTML:

<input type="checkbox" name="hobby" value="music" id="music" />
<label for="music">Music</label>

CSS:

input[type="checkbox"]:checked + label {
  color: blue;
}

Meaning:

if the checkbox is checked
and the label is directly after it
make the label blue

Diagram before checking:

[ ] Music   -> label normal color

After checking:

[x] Music   -> label becomes blue

Practice examples: Example 8, Example 9

20. Why markup order matters

This works:

<input ... />
<label ...>Music</label>

Diagram:

input + label

This does not match the same selector:

<label ...>Music</label>
<input ... />

Diagram:

label + input

Because the selector is:

input:checked + label

So the label must come after the input.

Rule:

For input:checked + label,
label must be immediately after input.

21. Example with incorrect CSS selector

HTML fragment:

<form>
  <p>I find the HTML/CSS course:</p>
  <input type="checkbox" class="form-input" name="emotions" value="fantastic" id="fantastic">
  <label class="form-label" for="fantastic">Absolutely fantastic</label>

  <input type="checkbox" class="form-input" name="ratio" value="useful" id="useful">
  <label class="form-label" for="useful">Really useful</label>

  <input type="checkbox" class="form-input" name="difficulties" value="challenging" id="challenging">
  <label class="form-label" for="challenging">Quite challenging</label>

  <button type="submit">Submit</button>
</form>

CSS:

input[type="radio"]:checked + label {
  color: blue;
}

Problem:

the HTML uses checkboxes
but the CSS targets radios

So the selector does not match.

Correct CSS would be:

input[type="checkbox"]:checked + label {
  color: blue;
}

Diagram:

HTML -> checkbox
CSS  -> radio

Mismatch -> no effect

22. Required fields

The boolean required attribute marks a field as required.

Example:

<input type="email" name="email" required />

Meaning:

the field cannot be left empty when submitting the form

Diagram:

Email
[__________________]   required

Try to submit empty
        ↓
browser shows warning

Important:

The browser’s warning appearance depends on the browser and cannot be fully customized with CSS.

Practice examples: Example 10, Example 11

23. Required radio/checkbox groups

To make a group required, the lesson says to add required to each element in the group.

Example:

<input type="checkbox" name="hobby" value="sports" required />
<input type="checkbox" name="hobby" value="music" required />
<input type="checkbox" name="hobby" value="books" required />

Diagram:

[ ] Sports
[ ] Music
[ ] Books

Submit with nothing selected
        ↓
browser blocks submission

Main idea:

The group cannot be ignored.

24. The `disabled` attribute

The disabled attribute makes an interactive element inactive.

Example:

<button type="button">Active button</button>
<button type="button" disabled>Disabled button</button>

What happens:

disabled element cannot receive focus
it ignores mouse clicks
user cannot interact with it normally

Diagram:

[ Active button ]    -> clickable
[ Disabled button ]  -> inactive

Another visual:

Enabled  -> works
Disabled -> blocked

Practice examples: Example 12, Example 13

25. Boolean attribute idea

disabled is a boolean attribute.

That means:

if it is present -> on
if it is absent -> off

Diagram:

disabled present    -> disabled = ON
disabled missing    -> disabled = OFF

Same idea as a switch:

Switch ON  -> attribute exists
Switch OFF -> attribute absent

26. Styling disabled elements

To style disabled elements, use :disabled.

Example:

button:disabled {
  background-color: lightgray;
  cursor: not-allowed;
}

Meaning:

disabled button becomes light gray
cursor shows “not allowed”

Diagram:

Enabled button:
[ Submit ]   cursor: pointer

Disabled button:
[ Submit ]   cursor: not-allowed

This is useful when a form should not be submitted yet.

27. Grouping fields with `fieldset` and `legend`

If a form is large, related controls should be grouped.

This helps users:

understand the form faster
focus on smaller sections
avoid confusion

Grouping is done with:

fieldset
legend

fieldset

container for a related group of form elements

legend

title of that group

Example:

<form>
  <fieldset>
    <legend>Group title</legend>
    <!-- Group of interactive elements -->
  </fieldset>

  <fieldset>
    <legend>Group title</legend>
    <!-- Group of interactive elements -->
  </fieldset>

  <button type="submit">Submit</button>
</form>

Practice example: Example 14

28. How `fieldset` and `legend` look conceptually

Diagram:

+----------------------------------+
| Group title                      |
|  ( ) Option 1                    |
|  ( ) Option 2                    |
|  ( ) Option 3                    |
+----------------------------------+

Another example:

+----------------------------------+
| Choose a color                   |
|  (●) Red                         |
|  ( ) White                       |
|  ( ) Green                       |
+----------------------------------+

+----------------------------------+
| What are your hobbies?           |
|  [x] Music                       |
|  [ ] Sports                      |
|  [x] Reading                     |
+----------------------------------+

This makes the structure clearer both visually and logically.

29. Why radio buttons and checkboxes should be grouped

Related radio buttons and checkboxes should always be grouped.

Why?

Because they represent one logical question.

Diagram without grouping:

Choose a color:
( ) Red
( ) White

What are your hobbies?
[x] Music
[ ] Sports

This works, but may feel visually weak.

With grouping:

+---------------------------+
| Choose a color            |
| ( ) Red                   |
| ( ) White                 |
+---------------------------+

+---------------------------+
| What are your hobbies?    |
| [x] Music                 |
| [ ] Sports                |
+---------------------------+

Now the user clearly sees separate sections.

30. Resetting fieldset default styles

By default, fieldset has:

margin
padding
border

Sometimes that is useful.

Sometimes we want to remove those defaults.

Example:

fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

Diagram:

Default fieldset:
+----------------------+
| legend               |
| content              |
+----------------------+

Reset fieldset:
legend
content

So resetting gives you full control over design.

31. Big comparison diagram

Form choice controls
│
├── radio
│     ├── one choice only
│     ├── same name in group
│     ├── value required
│     └── one checked at a time
│
├── checkbox
│     ├── many choices allowed
│     ├── value required
│     ├── can be single or grouped
│     └── many checked allowed
│
├── :checked
│     └── styles selected controls
│
├── [type="..."]
│     └── attribute selector
│
├── X + Y
│     └── selects next sibling only
│
├── required
│     └── field must be filled / chosen
│
├── disabled
│     └── control is inactive
│
└── fieldset + legend
      └── group related controls

32. Mini cheat sheet

type="radio"      -> choose one option
type="checkbox"   -> choose many options
name              -> groups related controls
value             -> submitted value
checked           -> default selected state
:checked          -> styles selected control
[type="checkbox"] -> attribute selector
X + Y             -> next sibling selector
required          -> field is mandatory
disabled          -> field is inactive
fieldset          -> group of related controls
legend            -> group title

33. Common mistakes

Mistake 1:

Different name values in one radio group.

Problem:

the browser does not treat them as one group.

Bad result:

(●) Red
(●) White

Mistake 2:

Using radio buttons when multiple answers should be possible.

Problem:

user can choose only one.

Mistake 3:

Using checkboxes when only one answer should be allowed.

Problem:

user may select too many options.

Mistake 4:

Forgetting value.

Problem:

the selected option has no useful submitted value.

Mistake 5:

Writing CSS for radios when the HTML uses checkboxes.

Problem:

styles do not apply.

Diagram:

HTML = checkbox
CSS  = radio

=> no match

Mistake 6:

Trying to style label with input:checked + label, but placing label before input.

Problem:

selector does not match.

34. Final summary

Radio buttons and checkboxes are choice controls used in forms.

Use:

radio buttons when the user must choose one option
checkboxes when the user may choose several options

Important things to remember:

radio buttons in one group must share the same name
radio buttons allow only one checked option in a group
checkboxes allow any number of checked options
both radio buttons and checkboxes need value
checked sets the default selected state
:checked styles selected controls
attribute selectors help target only the inputs you want
X + Y is useful for styling labels after checked controls
required makes a field mandatory
disabled makes a control inactive
fieldset and legend help group related controls clearly

Super short memory line:

radio = one choice
checkbox = many choices
checked = selected
required = must fill
disabled = inactive
fieldset = group
legend = title

35. Examples for practising

Each example below highlights the main idea it demonstrates, just like in the input lesson.

Conclusion: These examples start with basic radio and checkbox behavior, then move into styling, validation, and grouping. Together they connect the theory to practical form-building, so each rule can be seen in a real example.

Example 1

<div>
  <div>
    <!-- coding -->
    <form class="ex1-radio-form">
      <p>Choose a color:</p>

      <label class="ex1-radio-label">
        <input type="radio" name="color" value="red" />
        Red
      </label>

      <label class="ex1-radio-label">
        <input type="radio" name="color" value="white" checked />
        White
      </label>

      <label class="ex1-radio-label">
        <input type="radio" name="color" value="green" />
        Green
      </label>

      <p>Select size:</p>

      <label class="ex1-radio-label">
        <input type="radio" name="size" value="sm" />
        Small
      </label>

      <label class="ex1-radio-label">
        <input type="radio" name="size" value="md" />
        Medium
      </label>

      <label class="ex1-radio-label">
        <input type="radio" name="size" value="lg" checked />
        Large
      </label>
    </form>

    <style>
      .ex1-radio-form {
        font-family: sans-serif;
        line-height: 1.5;
        color: #f1f1f1;
      }
    </style>
  </div>
</div>

Conclusion: This example shows how radio buttons work in groups. Because the inputs share the same name, only one option can be selected in each group. It also shows how checked sets the default selected radio button.

Theory links: Radio buttons, same name, checked in radio buttons

Example 2

<div>
  <div>
    <!-- coding -->
    <form class="ex2-quiz-form">
      <p class="ex2-quiz-question">What color is the grass?</p>

      <div class="ex2-quiz-options">
        <label class="ex2-quiz-label">
          Red
          <input class="ex2-quiz-input" type="radio" name="answer" value="red" />
        </label>

        <label class="ex2-quiz-label">
          Green
          <input class="ex2-quiz-input" type="radio" name="answer" value="green" />
        </label>

        <label class="ex2-quiz-label">
          Blue
          <input class="ex2-quiz-input" type="radio" name="answer" value="blue" />
        </label>
      </div>

      <button class="ex2-quiz-button" type="submit">Next question</button>
    </form>

    <style>
      .ex2-quiz-form {
        max-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        font-family: sans-serif;
        line-height: 1.5;
        color: #f1f1f1;
      }

      .ex2-quiz-question {
        margin: 0;
      }
    </style>
  </div>
</div>

Conclusion: This example uses radio buttons in a quiz-style form. It shows a practical case where the user must choose only one answer from several possible options.

Theory link: Radio buttons

Example 3

<div>
  <div>
    <!-- coding -->
    <form class="ex3-hobby-form">
      <p>What are your hobbies?</p>

      <label class="ex3-hobby-label">
        <input type="checkbox" name="hobby" value="music" checked />
        Music
      </label>

      <label class="ex3-hobby-label">
        <input type="checkbox" name="hobby" value="sports" checked />
        Sports
      </label>

      <label class="ex3-hobby-label">
        <input type="checkbox" name="hobby" value="reading" />
        Reading
      </label>
    </form>

    <style>
      .ex3-hobby-form {
        font-family: sans-serif;
        line-height: 1.5;
        color: #f1f1f1;
      }
    </style>
  </div>
</div>

Conclusion: This example introduces checkboxes. Unlike radio buttons, checkboxes allow the user to select more than one option at the same time. It also shows that multiple checkboxes can be preselected with checked.

Theory link: Checkboxes

Example 4

<div>
  <div>
    <!-- coding -->
    <form class="ex4-quiz-form">
      <p class="ex4-quiz-question">Select the planets of the solar system</p>

      <div class="ex4-quiz-options">
        <label class="ex4-quiz-label">
          <input type="checkbox" name="answer" value="earth" />
          Earth
        </label>

        <label class="ex4-quiz-label">
          <input type="checkbox" name="answer" value="mercury" />
          Mercury
        </label>

        <label class="ex4-quiz-label">
          <input type="checkbox" name="answer" value="corvus" />
          Corvus
        </label>

        <label class="ex4-quiz-label">
          <input type="checkbox" name="answer" value="isirah" />
          Isirah
        </label>
      </div>

      <button class="ex4-quiz-button" type="submit">Next question</button>
    </form>

    <style>
      .ex4-quiz-form {
        max-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        font-family: sans-serif;
        line-height: 1.5;
        color: #f1f1f1;
      }

      .ex4-quiz-question {
        margin: 0;
      }
    </style>
  </div>
</div>

Conclusion: This example shows a checkbox-based quiz question. It demonstrates when checkboxes are useful: the user may need to select several correct answers instead of only one.

Theory link: Checkboxes

Example 5

<div>
  <div>
    <!-- coding -->
    <form class="ex5-form">
      <p class="ex5-form-caption">What are your hobbies?</p>

      <label class="ex5-form-label">
        <input type="checkbox" class="ex5-form-input" name="hobby" value="sports" />
        Sports
      </label>

      <label class="ex5-form-label">
        <input type="checkbox" class="ex5-form-input" name="hobby" value="music" />
        Music
      </label>

      <label class="ex5-form-label">
        <input type="checkbox" class="ex5-form-input" name="hobby" value="books" />
        Books
      </label>

      <button class="ex5-form-button" type="submit">Submit</button>
    </form>

    <style>
      .ex5-form {
        max-width: 300px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        font-family: sans-serif;
        line-height: 1.5;
        color: #f1f1f1;
      }

      .ex5-form-caption {
        margin: 0;
        font-weight: 700;
      }

      .ex5-form-label {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
      }

      .ex5-form-input:checked {
        outline: 2px solid #2196f3;
        outline-offset: 2px;
      }
    </style>
  </div>
</div>

Conclusion: This example builds on the checkbox form and adds a visual style for selected inputs. It demonstrates how the :checked pseudo-class can be used to highlight chosen checkboxes.

Theory link: :checked pseudo-class

Example 6

<div>
  <div>
    <!-- coding -->
    <form class="ex6-quiz-form">
      <p class="ex6-quiz-question">Select the planets of the solar system</p>

      <div>
        <label>
          <input type="checkbox" name="answer" value="earth" />
          Earth
        </label>
        <label>
          <input type="checkbox" name="answer" value="mercury" />
          Mercury
        </label>
        <label>
          <input type="checkbox" name="answer" value="corvus" />
          Corvus
        </label>
        <label>
          <input type="checkbox" name="answer" value="isirah" />
          Isirah
        </label>
      </div>

      <button type="submit">Next question</button>
    </form>

    <style>
      .ex6-quiz-form {
        max-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        font-family: sans-serif;
        line-height: 1.5;
        color: #f1f1f1;
      }

      .ex6-quiz-question {
        margin: 0;
      }

      .ex6-quiz-form input {
        font-family: inherit;
        line-height: inherit;
      }

      .ex6-quiz-form input:checked {
        box-shadow: 0 0 0 2px orange;
      }
    </style>
  </div>
</div>

Conclusion: This example shows another way to style selected checkboxes. It uses input:checked and applies a visual effect directly to the checked input elements.

Theory link: :checked pseudo-class

Example 7

<div>
  <div>
    <!-- coding -->
    <form class="ex7-quiz-form">
      <p class="ex7-quiz-question">Select the planets of the solar system</p>

      <div>
        <label>
          <input type="checkbox" name="answer" value="earth" />
          Earth
        </label>
        <label>
          <input type="checkbox" name="answer" value="mercury" />
          Mercury
        </label>
        <label>
          <input type="checkbox" name="answer" value="corvus" />
          Corvus
        </label>
        <label>
          <input type="checkbox" name="answer" value="isirah" />
          Isirah
        </label>
      </div>

      <button type="submit">Next question</button>
    </form>

    <style>
      .ex7-quiz-form {
        max-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        font-family: sans-serif;
        line-height: 1.5;
        color: #f1f1f1;
      }

      .ex7-quiz-form p {
        margin: 0;
      }

      .ex7-quiz-form input {
        font-family: inherit;
        line-height: inherit;
      }

      .ex7-quiz-form input[type="checkbox"]:checked {
        box-shadow: 0 0 0 2px orange;
      }
    </style>
  </div>
</div>

Conclusion: This example is similar to the previous one, but it targets checked checkboxes more precisely with input[type="checkbox"]:checked. It demonstrates a more specific CSS selector.

Theory link: Attribute selector

Example 8

<div>
  <div>
    <!-- coding -->
    <form class="ex8-form">
      <p class="ex8-form-caption">What are your hobbies?</p>

      <div class="ex8-form-field">
        <input type="checkbox" class="ex8-form-input" name="hobby" value="sports" id="sports" />
        <label class="ex8-form-label" for="sports">Sports</label>
      </div>

      <div class="ex8-form-field">
        <input type="checkbox" class="ex8-form-input" name="hobby" value="music" id="music" />
        <label class="ex8-form-label" for="music">Music</label>
      </div>

      <div class="ex8-form-field">
        <input type="checkbox" class="ex8-form-input" name="hobby" value="books" id="books" />
        <label class="ex8-form-label" for="books">Books</label>
      </div>

      <button type="submit">Submit</button>
    </form>

    <style>
      .ex8-form {
        max-width: 300px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        font-family: sans-serif;
        line-height: 1.5;
        color: #f1f1f1;
      }

      .ex8-form-caption {
        margin: 0;
        font-weight: 700;
      }

      .ex8-form-field {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .ex8-form-label {
        cursor: pointer;
      }

      .ex8-form-input:checked {
        outline: 2px solid #2196f3;
        outline-offset: 2px;
      }

      .ex8-form-input:checked + .ex8-form-label {
        color: #2196f3;
      }
    </style>
  </div>
</div>

Conclusion: This example shows how to connect an input and a label using id and for. It also demonstrates how the adjacent sibling selector can style the label when the checkbox is checked.

Theory link: :checked with X + Y

Example 9

<div>
  <div>
    <!-- coding -->
    <form class="ex9-quiz-form">
      <p class="ex9-form-title">Select the planets of the solar system</p>

      <div>
        <div class="ex9-form-field">
          <input type="checkbox" name="answer" value="earth" id="ex9-earth" />
          <label for="ex9-earth">Earth</label>
        </div>

        <div class="ex9-form-field">
          <input type="checkbox" name="answer" value="mercury" id="ex9-mercury" />
          <label for="ex9-mercury">Mercury</label>
        </div>

        <div class="ex9-form-field">
          <input type="checkbox" name="answer" value="corvus" id="ex9-corvus" />
          <label for="ex9-corvus">Corvus</label>
        </div>

        <div class="ex9-form-field">
          <input type="checkbox" name="answer" value="isirah" id="ex9-isirah" />
          <label for="ex9-isirah">Isirah</label>
        </div>
      </div>

      <button type="submit">Next question</button>
    </form>

    <style>
      .ex9-quiz-form {
        max-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        font-family: sans-serif;
        line-height: 1.5;
        color: #f1f1f1;
      }

      .ex9-form-title {
        margin: 0;
      }

      .ex9-form-field {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .ex9-quiz-form label {
        cursor: pointer;
      }

      .ex9-quiz-form input[type="checkbox"] {
        font-family: inherit;
        line-height: inherit;
      }

      .ex9-quiz-form input[type="checkbox"]:checked {
        box-shadow: 0 0 0 2px orange;
      }

      .ex9-quiz-form input[type="checkbox"]:checked + label {
        color: darkorange;
      }
    </style>
  </div>
</div>

Conclusion: This example combines several useful ideas: separate checkbox fields, connected labels, and styling for both the checked input and the label next to it. It is a more polished checkbox quiz example.

Theory link: :checked with X + Y

Example 10

<div>
  <div>
    <!-- coding -->
    <form class="ex10-login-form">
      <label class="ex10-login-label">
        Email
        <input class="ex10-login-input" type="email" name="email" required />
      </label>

      <label class="ex10-login-label">
        Password
        <input class="ex10-login-input" type="password" name="password" required />
      </label>

      <button class="ex10-login-button" type="submit">Submit</button>
    </form>

    <style>
      .ex10-login-form {
        max-width: 300px;
      }

      .ex10-login-label {
        display: flex;
        flex-direction: column;
        margin-bottom: 8px;
        color: #f1f1f1;
      }

      .ex10-login-input {
        padding: 8px;
        font-family: inherit;
      }
    </style>
  </div>
</div>

Conclusion: This example focuses on the required attribute. It shows how form validation can force the user to fill in important fields before the form is submitted.

Theory link: required fields

Example 11

<div>
  <div>
    <!-- coding -->
    <form class="ex11-order-form">
      <label class="ex11-order-label">
        Name
        <input class="ex11-order-input" type="text" name="username" required />
      </label>

      <label class="ex11-order-label">
        Phone number
        <input class="ex11-order-input" type="tel" name="contact_tel" required />
      </label>

      <label class="ex11-order-label">
        Email
        <input class="ex11-order-input" type="email" name="email" />
      </label>

      <button class="ex11-order-button" type="submit">Place order</button>
    </form>

    <style>
      .ex11-order-form {
        max-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }

      .ex11-order-label {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

      .ex11-order-input {
        padding: 4px;
      }
    </style>
  </div>
</div>

Conclusion: This example applies required in a more realistic order form. It shows that some fields can be mandatory, while others, such as email in this form, can remain optional.

Theory link: required fields

Example 12

<div>
  <div>
    <!-- coding -->
    <button class="ex12-btn">Active button</button>
    <button class="ex12-btn" disabled>Disabled button</button>

    <style>
      .ex12-btn {
        display: inline-flex;
        padding: 12px 24px;
        border: 1px solid black;
        border-radius: 4px;
        font-family: inherit;
        font-size: 16px;
        background-color: cyan;
        color: black;
        cursor: pointer;
      }

      .ex12-btn:hover,
      .ex12-btn:focus {
        background-color: orange;
      }

      .ex12-btn:disabled {
        background-color: lightgray;
        cursor: not-allowed;
      }
    </style>
  </div>
</div>

Conclusion: This example demonstrates the disabled attribute and the :disabled pseudo-class. It shows the visual and functional difference between an active button and a disabled one.

Theory link: disabled attribute

Example 13

<div>
  <div>
    <!-- coding -->
    <form class="ex13-order-form">
      <label class="ex13-order-label">
        Name
        <input class="ex13-order-input" type="text" name="username" required />
      </label>

      <label class="ex13-order-label">
        Phone number
        <input class="ex13-order-input" type="tel" name="contact_tel" required />
      </label>

      <label class="ex13-order-label">
        Email
        <input class="ex13-order-input" type="email" name="email" />
      </label>

      <button type="submit" class="ex13-submit-btn" disabled>Place order</button>
    </form>

    <style>
      .ex13-order-form {
        max-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }

      .ex13-order-label {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

      .ex13-order-input {
        padding: 4px;
      }

      .ex13-submit-btn {
        display: inline-flex;
        padding: 8px 12px;
        font-size: 14px;
        border: none;
        border-radius: 4px;
        background-color: #009688;
        color: #fff;
        cursor: pointer;
        box-shadow: 2px 2px 2px 0 rgba(33, 33, 33, 0.3);
      }

      .ex13-submit-btn:hover,
      .ex13-submit-btn:focus {
        background-color: #00796b;
      }

      .ex13-submit-btn:disabled {
        background-color: #9e9e9e;
        cursor: not-allowed;
        box-shadow: none;
      }
    </style>
  </div>
</div>

Conclusion: This example combines a form with a disabled submit button. It is useful for showing how a submit button can look inactive until all necessary conditions are met.

Theory link: disabled attribute

Example 14

Enter your contact details Name Email

Your favourite programming language

Python

JavaScript

Ruby

I want to receive

The weekly newsletter

Offers from the company

Offers from associated companies

<div>
  <div>
    <!-- coding -->
    <form class="ex14-form">
      <fieldset class="ex14-form-group">
        <legend class="ex14-group-title">Enter your contact details</legend>

        <label class="ex14-form-label">
          Name
          <input class="ex14-text-input" type="text" name="username" />
        </label>

        <label class="ex14-form-label">
          Email
          <input class="ex14-text-input" type="email" name="email" />
        </label>
      </fieldset>

      <fieldset class="ex14-form-group">
        <legend class="ex14-group-title">Your favourite programming language</legend>

        <div class="ex14-form-field">
          <input type="checkbox" name="language" value="python" id="ex14-python" />
          <label class="ex14-check-label" for="ex14-python">Python</label>
        </div>

        <div class="ex14-form-field">
          <input type="checkbox" name="language" value="js" id="ex14-js" />
          <label class="ex14-check-label" for="ex14-js">JavaScript</label>
        </div>

        <div class="ex14-form-field">
          <input type="checkbox" name="language" value="ruby" id="ex14-ruby" />
          <label class="ex14-check-label" for="ex14-ruby">Ruby</label>
        </div>
      </fieldset>

      <fieldset class="ex14-form-group">
        <legend class="ex14-group-title">I want to receive</legend>

        <div class="ex14-form-field">
          <input type="checkbox" name="newsletter" value="weekly" id="ex14-weekly" />
          <label class="ex14-check-label" for="ex14-weekly">The weekly newsletter</label>
        </div>

        <div class="ex14-form-field">
          <input type="checkbox" name="newsletter" value="offers" id="ex14-offers" />
          <label class="ex14-check-label" for="ex14-offers">Offers from the company</label>
        </div>

        <div class="ex14-form-field">
          <input type="checkbox" name="newsletter" value="associated_offers" id="ex14-associated-offers" />
          <label class="ex14-check-label" for="ex14-associated-offers">Offers from associated companies</label>
        </div>
      </fieldset>

      <button type="submit">Subscribe</button>
    </form>

    <style>
      .ex14-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 300px;
      }

      .ex14-form-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0;
        margin: 0;
        border: none;
      }

      .ex14-group-title {
        width: 100%;
        font-weight: 700;
        color: #f1f1f1;
      }

      .ex14-form-label {
        display: flex;
        flex-direction: column;
        color: #f1f1f1;
      }

      .ex14-text-input {
        padding: 4px;
      }

      .ex14-form-field {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .ex14-check-label {
        cursor: pointer;
        color: #f1f1f1;
      }
    </style>
  </div>
</div>

Conclusion: This example introduces fieldset and legend. It shows how a larger form can be split into meaningful sections, which makes the structure clearer and more accessible.

Theory link: fieldset and legend

⬅ Back