Complete Web Designing Course for Beginners

📘 MODULE 2 – Forms & User Input

🔘 Lesson 2.3 – Radio Buttons & Checkboxes

📝 Allowing Users to Select One or Multiple Options in Forms

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Radio Buttons

✅ Understand Checkboxes

✅ Know the difference between Radio Buttons and Checkboxes

✅ Create Single Choice Questions

✅ Create Multiple Choice Questions

✅ Build Professional Forms

✅ Create Admission and Registration Forms

📖 Introduction

Imagine a college admission form.

Question:

Gender

Male
Female
Other

Student can select:

✅ Only One Option

Another question:

Skills

HTML
CSS
JavaScript
Python

Student can select:

✅ One Skill

✅ Two Skills

✅ Three Skills

✅ All Skills

To solve these situations HTML provides:

🔘 Radio Buttons

and

☑️ Checkboxes

🤔 What is a Radio Button?

Radio Buttons allow users to select:

Only One Option

from multiple choices.

Real Life Examples

Gender Selection

( ) Male

( ) Female

( ) Other

Only one can be selected.

Payment Method

( ) Cash

( ) UPI

( ) Debit Card

Only one option.

🌟 Creating Radio Buttons

Syntax:

<input type="radio">

Example

<label>Male</label>

<input type="radio">

Output

○ Male

Multiple Radio Buttons

<input type="radio"> Male

<br>

<input type="radio"> Female

<br>

<input type="radio"> Other

Problem

All buttons work independently.

Multiple selections become possible.

❌ Wrong

🎯 Name Attribute

Radio buttons must share the same name.

Example:

<input type="radio" name="gender">

Correct Example

<input type="radio" name="gender">

Male

<br>

<input type="radio" name="gender">

Female

<br>

<input type="radio" name="gender">
Other

Output

○ Male

○ Female

○ Other

Now only one option can be selected.

✅ Correct

🌟 Value Attribute

Stores selected data.

Example:

<input
type="radio"
name="gender"
value="Male">

Example

<input
type="radio"
name="gender"
value="Male">

Male

Why Value is Important?

When the form is submitted:

Male

is stored.

🎯 Checked Attribute

Used to select a default option.

Example:

<input
type="radio"
name="gender"
checked>

Result

Option selected automatically.

Example

<input
type="radio"
name="gender"
checked>

Male

<br>

<input
type="radio"
name="gender">

Female

Output

Male selected by default.

☑️ What is a Checkbox?

Checkboxes allow users to select:

Multiple Options

Real Life Example

Skills

☐ HTML

☐ CSS

☐ JavaScript

☐ Python

Students can select:

✔ HTML

✔ CSS

✔ JavaScript

All together.

Creating Checkboxes

Syntax:

<input type="checkbox">

Example

<input type="checkbox">

HTML

Output

☐ HTML

Multiple Checkboxes

<input type="checkbox">

HTML

<br>

<input type="checkbox">

CSS

<br>

<input type="checkbox">

JavaScript

Output

☐ HTML

☐ CSS

☐ JavaScript

🌟 Value Attribute in Checkboxes

Example:

<input
type="checkbox"
value="HTML">

Example

<input
type="checkbox"
value="HTML">

HTML

Result

When selected:

HTML

is stored.

🎯 Checked Checkbox

Default selected checkbox.

Example:

<input
type="checkbox"
checked>

Output

☑ HTML

Already selected.

🌟 Radio vs Checkbox

Radio Button	Checkbox
Single Choice	Multiple Choices
One Option	Many Options
Circular Shape	Square Shape
Gender Selection	Skills Selection
Payment Method	Hobbies

Example – Gender Selection

<h3>Gender</h3>

<input
type="radio"
name="gender">

Male

<br>

<input
type="radio"
name="gender">

Female

<br>

<input
type="radio"
name="gender">

Other

Output

○ Male

○ Female

○ Other

Only one option.

Example – Skills Selection

<h3>Skills</h3>

<input
type="checkbox">

HTML

<br>

<input
type="checkbox">

CSS

<br>

<input
type="checkbox">

JavaScript

<br>

<input
type="checkbox">

Python

Output

☐ HTML

☐ CSS

☐ JavaScript

☐ Python

Multiple selections allowed.

🎯 Complete Example Program

<!DOCTYPE html>

<html>

<head>

<title>Radio and Checkbox Example</title>

</head>

<body>

<h1>Student Registration Form</h1>

<form>

<h3>Gender</h3>

<input
type="radio"
name="gender">

Male

<br>

<input
type="radio"
name="gender">

Female

<br>

<input
type="radio"
name="gender">

Other

<br><br>

<h3>Skills</h3>

<input
type="checkbox">

HTML

<br>

<input
type="checkbox">

CSS

<br>

<input
type="checkbox">

JavaScript

<br>

<input
type="checkbox">

Python

</form>

</body>

</html>

🎯 Expected Output

Student Registration Form

Gender

○ Male

○ Female

○ Other

Skills

☐ HTML

☐ CSS

☐ JavaScript

☐ Python

🏫 Real World Example – College Admission Form

<h3>Gender</h3>

<input
type="radio"
name="gender">

Male

<br>

<input
type="radio"
name="gender">

Female

<br>

<input
type="radio"
name="gender">

Other

<br><br>

<h3>Interests</h3>

<input
type="checkbox">

Sports

<br>

<input
type="checkbox">

Music

<br>

<input
type="checkbox">

Programming

🌟 Using Labels with Radio Buttons

Professional method:

<label>

<input
type="radio"
name="gender">

Male

</label>

Advantage

Clicking on text also selects the option.

⚠️ Common Beginner Mistakes

Mistake 1

Different Names for Radio Buttons

Wrong:

<input type="radio" name="a">

<input type="radio" name="b">

Both can be selected.

❌ Wrong

Correct:

<input type="radio" name="gender">

<input type="radio" name="gender">

Mistake 2

Using Radio Instead of Checkbox

Wrong:

Skills:

<input type="radio">

Only one skill can be selected.

Correct:

<input type="checkbox">

Mistake 3

Forgetting Value Attribute

Wrong:

<input type="radio">

Better:

<input
type="radio"
value="Male">

🌟 Best Practices

✅ Use Radio Buttons for single choice.

✅ Use Checkboxes for multiple choices.

✅ Always use labels.

✅ Use value attributes.

✅ Use meaningful names.

🏆 Mini Project – Student Interest Form

Create:

Gender

○ Male

○ Female

○ Other

Skills

☐ HTML

☐ CSS

☐ JavaScript

☐ Python

Hobbies

☐ Reading

☐ Gaming

☐ Music

☐ Sports

📝 Practical Activity

Create a form containing:

Gender

Radio Buttons

Branch

Radio Buttons

Skills

Checkboxes

Hobbies

Checkboxes

Run it in Chrome Browser.

📋 Assignment

Assignment 2.3

What is a Radio Button?
What is a Checkbox?
What is the difference between them?
Why is the name attribute important?
What is the purpose of the value attribute?
Create a gender selection form.
Create a skills selection form.

🧠 Quiz

Q1. Which input type creates radio buttons?

A. check

B. select

C. radio

D. option

✅ Answer: C

Q2. Radio buttons are used for?

A. Multiple choices

B. Single choice

C. Images

D. Tables

✅ Answer: B

Q3. Which input type creates checkboxes?

A. radio

B. select

C. checkbox

D. option

✅ Answer: C

Q4. Checkboxes allow?

A. One selection

B. Multiple selections

C. No selection

D. Images

✅ Answer: B

Q5. Which attribute groups radio buttons together?

A. value

B. id

C. name

D. checked

✅ Answer: C

📌 Lesson Summary

✅ Radio Buttons allow one option to be selected.

✅ Checkboxes allow multiple options to be selected.

✅ Radio buttons use the same name attribute.

✅ The value attribute stores data.

✅ The checked attribute selects options by default.

✅ Radio buttons and checkboxes are widely used in registration and admission forms.