How to use Fieldsets with Radios and Checkbox in HTML Form with Video Examples

Hello friend! Today we learn together how to use <fieldset>, <legend>, Radio buttons, and Checkboxes in HTML form with code examples and follow along with video tutorial in Khmer!

Watch Video Tutorial (Khmer)

Watch video first to learn step-by-step how to group form inputs with fieldset in HTML:

1. What is <fieldset> and <legend>?

• <fieldset> : Creates a border box container to group related input elements together in a form. Read the official MDN Fieldset Element Documentation.
• <legend> : Sets the caption title text on top border of <fieldset> box.

For choosing from a drop-down menu instead of radio buttons, see Everything about Dropdown List in HTML!

2. Using Fieldsets with Radio Buttons (Single Choice)

Radio buttons allow user to select ONLY 1 choice from list (for example: pick shirt size or gender).

Important: All radio inputs in same group MUST have same name="..." attribute!

Code Example: Radio Buttons

<form>
  <fieldset>
    <legend>Choose your shirt size:</legend>

    <input type="radio" id="small" name="size" value="small" />
    <label for="small">Small</label>

    <input type="radio" id="medium" name="size" value="medium" checked />
    <label for="medium">Medium (Default)</label>

    <input type="radio" id="large" name="size" value="large" />
    <label for="large">Large</label>
  </fieldset>
</form>

Rendered Output Preview:

3. Using Fieldsets with Checkboxes (Multiple Choices)

Checkboxes allow user to select MANY choices at same time (for example: pick favorite fruits or hobbies).

Code Example: Checkboxes

<form>
  <fieldset>
    <legend>Choose your favorite fruits:</legend>

    <input type="checkbox" id="apple" name="fruits" value="apple" />
    <label for="apple">Apple</label>

    <input type="checkbox" id="banana" name="fruits" value="banana" checked />
    <label for="banana">Banana (Checked)</label>

    <input type="checkbox" id="orange" name="fruits" value="orange" />
    <label for="orange">Orange</label>
  </fieldset>
</form>

Rendered Output Preview:

Bonus Tips for HTML Fieldset & Form Inputs

Here are 3 secret bonus tips for make form more user-friendly:

Tip 1: Lock Whole Form Section with disabled Attribute

If you put disabled attribute on <fieldset>, ALL inputs inside fieldset box become locked automatically! Very useful for multi-step forms:

<fieldset disabled>
  <legend>Locked Section:</legend>
  <input type="text" placeholder="Cannot type here" />
  <button type="submit">Disabled</button>
</fieldset>

Rendered Output Preview:

Tip 2: Link <label for="ID"> with id="ID"

Always use for attribute on <label> matching id on <input>. Then user can click label text to check radio or checkbox dot easily without clicking tiny circle!

Tip 3: Pre-select Default Item with checked Attribute

Add checked attribute to any <input type="radio"> or <input type="checkbox"> if you want it selected by default when web page opens.

💡 Next Lesson: Create interactive form calculations with How to Create Simple Calculator in HTML Without JavaScript!

Happy coding! Practice writing fieldsets in your VS Code editor!