Checkboxes and radios in Bootsrap - Mini Project: Build & Apply

Creating a Bootstrap Form with Checkboxes and Radios

📖 Scenario: You are building a simple survey form for a website using Bootstrap. The form will ask users to select their favorite fruits using checkboxes and choose their preferred contact method using radio buttons.

🎯 Goal: Create a Bootstrap form that includes a group of checkboxes for fruits and a group of radio buttons for contact methods. The form should be accessible and visually clear.

📋 What You'll Learn

Use Bootstrap 5 classes for styling checkboxes and radio buttons

Include at least three checkboxes with labels: 'Apple', 'Banana', 'Cherry'

Include at least two radio buttons with labels: 'Email', 'Phone'

Use proper for attributes in labels and matching id in inputs

Wrap the form controls in semantic HTML elements

Ensure the form is responsive and accessible

💡 Why This Matters

🌍 Real World

Forms with checkboxes and radio buttons are common in surveys, registrations, and preferences settings on websites.

💼 Career

Understanding how to build accessible, styled forms with Bootstrap is a key skill for front-end web developers and UI designers.

1

Create the basic HTML form structure

Create a <form> element with a class of p-3 inside a <main> element. Inside the form, add a <fieldset> with a <legend> that says Favorite Fruits.

Bootsrap

Hint

Use <form> with class p-3 for padding. Use <fieldset> and <legend> to group related inputs.

2

Add checkboxes for fruits

Inside the <fieldset>, add three Bootstrap styled checkboxes with labels: Apple, Banana, and Cherry. Use class="form-check" on a <div> wrapper for each checkbox. Each <input> should have type="checkbox", a unique id, and class="form-check-input". Each <label> should have class="form-check-label" and a for attribute matching the input's id.

Bootsrap

  
    
      Favorite Fruits
      
    
  

Hint

Wrap each checkbox input and label in a div with class form-check. Use matching id and for attributes for accessibility.

3

Add radio buttons for contact method

Below the <fieldset> for fruits, add another <fieldset> with a <legend> that says Preferred Contact Method. Inside it, add two Bootstrap styled radio buttons with labels: Email and Phone. Use class="form-check" on wrappers, type="radio" on inputs, class="form-check-input" on inputs, and class="form-check-label" on labels. Both radio inputs should share the same name="contactMethod" attribute. Use unique id values contactEmail and contactPhone.

Bootsrap

  
    
      Favorite Fruits
      
        
        Apple
      
      
        
        Banana
      
      
        
        Cherry
      
    
    
  

Hint

Use a new fieldset with a legend for the radio buttons. Make sure both radios share the same name attribute for grouping.

4

Add a submit button and finalize the form

Below the last <fieldset>, add a Bootstrap styled submit button with the text Submit. Use a <button> element with type="submit" and class="btn btn-primary mt-3".

Bootsrap

  
    
      Favorite Fruits
      
        
        Apple
      
      
        
        Banana
      
      
        
        Cherry
      
    
    
      Preferred Contact Method
      
        
        Email
      
      
        
        Phone
      
    
    
  

Hint

Add a <button> with type="submit" and Bootstrap classes btn btn-primary mt-3 for styling and spacing.

Practice

1. What is the main difference between checkboxes and radio buttons in Bootstrap forms?

easy

A. Radios can be unchecked by clicking again; checkboxes cannot.

B. Checkboxes allow multiple selections; radios allow only one selection.

C. Checkboxes are styled differently but behave the same as radios.

D. Checkboxes allow only one selection; radios allow multiple selections.

Solution

1. Step 1: Understand checkbox behavior

   Checkboxes let users pick more than one option at the same time.

2. Step 2: Understand radio button behavior

   Radio buttons let users pick only one option from a group.

3. Final Answer:

   Checkboxes allow multiple selections; radios allow only one selection. -> Option B

4. Quick Check:

   Checkboxes = multiple, Radios = single [OK]

Hint: Checkboxes = many choices, radios = one choice [OK]

Common Mistakes:

• Confusing which input allows multiple selections
• Thinking radios can be unchecked by clicking again
• Assuming checkboxes behave like radios

2. Which of the following is the correct Bootstrap structure for a single checkbox input with label?

easy

A. Option 1

B. Option 1

C. Option 1

D. Option 1

Solution

1. Step 1: Check input and label classes

   Bootstrap requires form-check-input on the input and form-check-label on the label.

2. Step 2: Verify input type and id-label connection

   The input must be type checkbox and the label's for attribute must match input's id.

3. Final Answer:

   Option A has correct classes, input type, and label connection. -> Option A

4. Quick Check:

   Correct classes and matching id-for =
   Option 1 [OK]

Hint: Input uses form-check-input; label uses form-check-label [OK]

Common Mistakes:

• Swapping classes between input and label
• Using wrong input type for checkbox
• Not matching label's for attribute with input id

3. What will be the visual result of this Bootstrap code snippet?

<div class='form-check'>
  <input class='form-check-input' type='radio' name='color' id='red' checked>
  <label class='form-check-label' for='red'>Red</label>
</div>
<div class='form-check'>
  <input class='form-check-input' type='radio' name='color' id='blue'>
  <label class='form-check-label' for='blue'>Blue</label>
</div>

medium

A. Two checkboxes labeled Red and Blue; Blue is selected by default.

B. Two radio buttons labeled Red and Blue; none selected by default.

C. Two radio buttons labeled Red and Blue; Red is selected by default.

D. Two checkboxes labeled Red and Blue; Red is selected by default.

Solution

1. Step 1: Identify input types and attributes

   Both inputs are radio buttons with the same name 'color', so only one can be selected.

2. Step 2: Check which radio is checked by default

   The input with id 'red' has the checked attribute, so it is selected initially.

3. Final Answer:

   Two radio buttons labeled Red and Blue; Red is selected by default. -> Option C

4. Quick Check:

   Radio with checked attribute = selected [OK]

Hint: Look for checked attribute on radio inputs [OK]

Common Mistakes:

• Confusing radio buttons with checkboxes
• Ignoring the checked attribute
• Assuming multiple radios can be selected

4. Identify the error in this Bootstrap checkbox code:

<div class='form-check'>
  <input class='form-check-input' type='checkbox' id='agree'>
  <label class='form-check-label' id='agree'>I agree</label>
</div>

medium

A. The input type should be radio, not checkbox.

B. The input is missing the class form-check-label.

C. The div should have class form-check-input instead of form-check.

D. The label uses id instead of for attribute to link to input.

Solution

1. Step 1: Check label linkage to input

   Labels must use the for attribute matching the input's id for accessibility and clicking.

2. Step 2: Identify incorrect attribute usage

   The label incorrectly uses id='agree' instead of for='agree'.

3. Final Answer:

   The label uses id instead of for attribute to link to input. -> Option D

4. Quick Check:

   Label uses for, not id, to link input [OK]

Hint: Label must use for attribute matching input id [OK]

Common Mistakes:

• Using id on label instead of for
• Missing form-check-input class on input
• Confusing input types checkbox vs radio

5. You want to create a group of checkboxes in Bootstrap where users can select multiple fruits. Which code snippet correctly implements this with accessible labels and Bootstrap styling?

hard

A. \n \n Apple\n\n\n \n Banana\n

B. \n \n Apple\n\n\n \n Banana\n

C. \n \n Apple\n\n\n \n Banana\n

D. \n \n Apple\n\n\n \n Banana\n

Solution

1. Step 1: Confirm input types for multiple selection

   Checkboxes allow multiple selections, so input type must be checkbox.

2. Step 2: Check label and input classes and attributes

   Inputs must have class form-check-input, labels must have form-check-label, and labels must use for matching input id.

3. Step 3: Verify unique ids and consistent names

   Each checkbox has a unique id and the same name attribute to group them logically.

4. Final Answer:

   Option A correctly uses checkboxes with proper classes, unique ids, and accessible labels. -> Option A

5. Quick Check:

   Checkboxes + form-check-input + matching for/id =
   \n \n Apple\n\n

   \n \n Banana\n

   [OK]

Hint: Use checkbox type and matching for/id for labels [OK]

Common Mistakes:

• Using radio buttons instead of checkboxes for multiple choices
• Repeating ids for different inputs
• Swapping input and label classes