Web Development Zero to Advanced — Class 17 of 120

HTML Select, Radio, Checkbox & Textarea

In the previous class, you learned about common HTML input types such as text, email, password, number, date, file, checkbox, and radio.

In this class, you will focus on four important form controls used in real websites:

• Select dropdowns
• Radio buttons
• Checkboxes
• Textareas

These controls are widely used in:

• Registration forms
• Checkout forms
• Contact forms
• Surveys
• Product filters
• Job applications
• Booking forms
• Admin dashboards
• Settings pages

By the end of this lesson, you will understand when and how to use each control correctly.

What Is a Select Dropdown?

A select dropdown allows the user to choose an option from a predefined list.

HTML uses:

<select>

and:

<option>

Basic example:

<label for="country">
    Country:
</label>

<select id="country" name="country">

    <option value="bangladesh">
        Bangladesh
    </option>

    <option value="india">
        India
    </option>

    <option value="usa">
        United States
    </option>

</select>

The `<select>` Element

The <select> element creates the dropdown control.

Example:

<select name="country">
    ...
</select>

The options are placed inside it.

The `<option>` Element

Each <option> represents one available choice.

Example:

<option value="bangladesh">
    Bangladesh
</option>

Here:

Bangladesh = Text shown to the user

bangladesh = Value submitted with the form

Why Is the `value` Important?

Consider:

<option value="bd">
    Bangladesh
</option>

If the user selects Bangladesh, the submitted value can be:

country=bd

The visible label and submitted value do not have to be identical.

Default Selected Option

Use:

selected

Example:

<select name="country">

    <option value="bangladesh" selected>
        Bangladesh
    </option>

    <option value="india">
        India
    </option>

</select>

Bangladesh is selected initially.

Placeholder-Like Option

A common pattern is:

<select
    id="country"
    name="country"
    required
>

    <option value="" selected disabled>
        Select a country
    </option>

    <option value="bangladesh">
        Bangladesh
    </option>

    <option value="india">
        India
    </option>

</select>

This prompts the user to make a choice.

Multiple Selection

A <select> can allow multiple choices using:

multiple

Example:

<label for="skills">
    Select Skills:
</label>

<select
    id="skills"
    name="skills"
    multiple
>

    <option value="html">
        HTML
    </option>

    <option value="css">
        CSS
    </option>

    <option value="javascript">
        JavaScript
    </option>

</select>

The browser’s interaction for multiple selection may vary by operating system and device.

The `size` Attribute

The size attribute controls how many options are visibly displayed.

Example:

<select
    name="skills"
    size="4"
>

    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
    <option>React</option>

</select>

Grouping Options with `<optgroup>`

You can group related options using:

<optgroup>

Example:

<select name="technology">

    <optgroup label="Frontend">

        <option value="html">
            HTML
        </option>

        <option value="css">
            CSS
        </option>

        <option value="javascript">
            JavaScript
        </option>

    </optgroup>

    <optgroup label="Backend">

        <option value="node">
            Node.js
        </option>

        <option value="php">
            PHP
        </option>

        <option value="python">
            Python
        </option>

    </optgroup>

</select>

This makes long dropdowns easier to understand.

What Is a Radio Button?

Radio buttons are used when the user should select one option from a group.

Example:

<input
    type="radio"
    id="basic"
    name="plan"
    value="basic"
>

<label for="basic">
    Basic
</label>

Multiple radio buttons belong to the same group when they share the same name.

Radio Button Group

Example:

<input
    type="radio"
    id="basic"
    name="plan"
    value="basic"
>

<label for="basic">
    Basic
</label>

<input
    type="radio"
    id="premium"
    name="plan"
    value="premium"
>

<label for="premium">
    Premium
</label>

Because both use:

name="plan"

the user can select only one of them.

Why Same `name` Matters

Wrong:

<input
    type="radio"
    name="basic"
    value="basic"
>

<input
    type="radio"
    name="premium"
    value="premium"
>

These are treated as separate groups.

Correct:

<input
    type="radio"
    name="plan"
    value="basic"
>

<input
    type="radio"
    name="plan"
    value="premium"
>

Default Radio Selection

Use:

checked

Example:

<input
    type="radio"
    id="basic"
    name="plan"
    value="basic"
    checked
>

This option is selected initially.

Radio Buttons with Fieldset

For accessibility and clear grouping, use:

<fieldset>

and:

<legend>

Example:

<fieldset>

    <legend>
        Select a Plan
    </legend>

    <input
        type="radio"
        id="basic"
        name="plan"
        value="basic"
    >

    <label for="basic">
        Basic
    </label>

    <input
        type="radio"
        id="premium"
        name="plan"
        value="premium"
    >

    <label for="premium">
        Premium
    </label>

</fieldset>

What Is a Checkbox?

Checkboxes are used when users can make independent selections.

Example:

<input
    type="checkbox"
    id="html"
    name="skills"
    value="html"
>

<label for="html">
    HTML
</label>

Multiple Checkboxes

Example:

<input
    type="checkbox"
    id="html"
    name="skills"
    value="html"
>

<label for="html">
    HTML
</label>

<input
    type="checkbox"
    id="css"
    name="skills"
    value="css"
>

<label for="css">
    CSS
</label>

<input
    type="checkbox"
    id="javascript"
    name="skills"
    value="javascript"
>

<label for="javascript">
    JavaScript
</label>

The user can select:

HTML

CSS

JavaScript

or any combination of them.

Checkbox vs Radio

Checkbox:

• Independent choices
• Multiple options can be selected
• Useful for preferences and feature selection

Radio:

• One choice from a group
• Same name groups the controls
• Useful for mutually exclusive options

Simple rule:

Checkbox → Zero or more choices

Radio → One choice from a group

Checkbox for Terms and Conditions

Example:

<input
    type="checkbox"
    id="terms"
    name="terms"
    required
>

<label for="terms">
    I agree to the terms and conditions.
</label>

The required attribute means the checkbox must be selected before normal browser form submission.

Default Checked Checkbox

Example:

<input
    type="checkbox"
    id="newsletter"
    name="newsletter"
    checked
>

<label for="newsletter">
    Subscribe to newsletter
</label>

This checkbox is initially checked.

What Is a Textarea?

A <textarea> is used for multi-line text input.

Example:

<label for="message">
    Message:
</label>

<textarea
    id="message"
    name="message"
></textarea>

This is useful for:

• Contact messages
• Reviews
• Feedback
• Project requirements
• Product descriptions
• Comments
• Support tickets

Textarea Rows and Columns

Example:

<textarea
    id="message"
    name="message"
    rows="6"
    cols="40"
></textarea>

rows controls the approximate visible height.

cols controls the approximate visible width.

CSS is usually used for final styling.

Textarea Default Text

Unlike <input>, a textarea’s initial text is placed between the opening and closing tags.

Example:

<textarea name="message">
Default message
</textarea>

Avoid using:

<textarea value="Default message"></textarea>

because textarea content is not defined using the value attribute in the same way as an input.

Placeholder in Textarea

Example:

<textarea
    id="message"
    name="message"
    placeholder="Write your message here"
></textarea>

Remember:

Placeholder is a hint.

It is not a replacement for a proper label.

Required Textarea

Example:

<textarea
    id="message"
    name="message"
    required
></textarea>

The browser requires content before ordinary submission.

Textarea Length Limits

You can use:

minlength

and:

maxlength

Example:

<textarea
    id="feedback"
    name="feedback"
    minlength="10"
    maxlength="500"
></textarea>

Complete Example — Client Project Form

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Project Request Form</title>

</head>

<body>

    <h1>Website Project Request</h1>

    <form
        action="/project-request"
        method="post"
    >

        <p>

            <label for="name">
                Full Name:
            </label>

            <input
                type="text"
                id="name"
                name="name"
                required
            >

        </p>

        <p>

            <label for="project-type">
                Project Type:
            </label>

            <select
                id="project-type"
                name="project_type"
                required
            >

                <option value="" selected disabled>
                    Select Project Type
                </option>

                <option value="business">
                    Business Website
                </option>

                <option value="ecommerce">
                    E-commerce Website
                </option>

                <option value="portfolio">
                    Portfolio Website
                </option>

            </select>

        </p>

        <fieldset>

            <legend>
                Preferred Budget
            </legend>

            <input
                type="radio"
                id="budget-small"
                name="budget"
                value="small"
                required
            >

            <label for="budget-small">
                Under $500
            </label>

            <input
                type="radio"
                id="budget-medium"
                name="budget"
                value="medium"
            >

            <label for="budget-medium">
                $500 - $1000
            </label>

            <input
                type="radio"
                id="budget-large"
                name="budget"
                value="large"
            >

            <label for="budget-large">
                Above $1000
            </label>

        </fieldset>

        <fieldset>

            <legend>
                Required Services
            </legend>

            <input
                type="checkbox"
                id="web-design"
                name="services"
                value="web-design"
            >

            <label for="web-design">
                Web Design
            </label>

            <input
                type="checkbox"
                id="seo"
                name="services"
                value="seo"
            >

            <label for="seo">
                SEO
            </label>

            <input
                type="checkbox"
                id="maintenance"
                name="services"
                value="maintenance"
            >

            <label for="maintenance">
                Maintenance
            </label>

        </fieldset>

        <p>

            <label for="details">
                Project Details:
            </label>

        </p>

        <p>

            <textarea
                id="details"
                name="details"
                rows="8"
                cols="50"
                minlength="20"
                maxlength="1000"
                required
            ></textarea>

        </p>

        <button type="submit">
            Send Request
        </button>

    </form>

</body>

</html>

Expected Output

The form will display:

Full Name

Project Type Dropdown

Preferred Budget Radio Buttons

Required Services Checkboxes

Project Details Textarea

Send Request Button

The user can:

• Choose one project type
• Choose one budget option
• Select multiple services
• Write a detailed message

Practical Example — Computer Shop Order Form

<form
    action="/order"
    method="post"
>

    <h2>Computer Order Form</h2>

    <p>

        <label for="product">
            Product:
        </label>

        <select
            id="product"
            name="product"
            required
        >

            <option value="" selected disabled>
                Select Product
            </option>

            <option value="laptop">
                Laptop
            </option>

            <option value="desktop">
                Desktop PC
            </option>

            <option value="monitor">
                Monitor
            </option>

        </select>

    </p>

    <fieldset>

        <legend>
            Payment Method
        </legend>

        <input
            type="radio"
            id="cash"
            name="payment"
            value="cash"
            required
        >

        <label for="cash">
            Cash
        </label>

        <input
            type="radio"
            id="card"
            name="payment"
            value="card"
        >

        <label for="card">
            Card
        </label>

    </fieldset>

    <fieldset>

        <legend>
            Optional Services
        </legend>

        <input
            type="checkbox"
            id="delivery"
            name="services"
            value="delivery"
        >

        <label for="delivery">
            Home Delivery
        </label>

        <input
            type="checkbox"
            id="setup"
            name="services"
            value="setup"
        >

        <label for="setup">
            PC Setup
        </label>

    </fieldset>

    <p>

        <label for="notes">
            Additional Notes:
        </label>

    </p>

    <textarea
        id="notes"
        name="notes"
        rows="5"
        cols="40"
    ></textarea>

    <p>

        <button type="submit">
            Place Order
        </button>

    </p>

</form>

Practical Example — Survey Form

<form
    action="/survey"
    method="post"
>

    <h2>Course Survey</h2>

    <p>

        <label for="experience">
            Your Experience Level:
        </label>

        <select
            id="experience"
            name="experience"
        >

            <option value="beginner">
                Beginner
            </option>

            <option value="intermediate">
                Intermediate
            </option>

            <option value="advanced">
                Advanced
            </option>

        </select>

    </p>

    <fieldset>

        <legend>
            How useful was this class?
        </legend>

        <input
            type="radio"
            id="excellent"
            name="rating"
            value="excellent"
        >

        <label for="excellent">
            Excellent
        </label>

        <input
            type="radio"
            id="good"
            name="rating"
            value="good"
        >

        <label for="good">
            Good
        </label>

        <input
            type="radio"
            id="average"
            name="rating"
            value="average"
        >

        <label for="average">
            Average
        </label>

    </fieldset>

    <fieldset>

        <legend>
            Topics You Want Next
        </legend>

        <input
            type="checkbox"
            id="css"
            name="topics"
            value="css"
        >

        <label for="css">
            CSS
        </label>

        <input
            type="checkbox"
            id="javascript"
            name="topics"
            value="javascript"
        >

        <label for="javascript">
            JavaScript
        </label>

        <input
            type="checkbox"
            id="wordpress"
            name="topics"
            value="wordpress"
        >

        <label for="wordpress">
            WordPress
        </label>

    </fieldset>

    <p>

        <label for="feedback">
            Feedback:
        </label>

    </p>

    <textarea
        id="feedback"
        name="feedback"
        rows="6"
        cols="50"
    ></textarea>

    <p>

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

    </p>

</form>

Select vs Radio Buttons

Both can be used for choosing one option, but they are useful in different situations.

Select:

• Compact
• Good when there are many options
• Takes less screen space

Radio:

• Shows all available choices immediately
• Good when there are only a few options
• Makes comparison easier

Example with many countries:

Use <select>.

Example with three pricing plans:

Radio buttons may be easier to understand.

Radio vs Checkbox

Use radio when:

Only one option should be selected.

Example:

Payment Method

Cash

Card

Bank Transfer

Use checkbox when:

Multiple options can be selected independently.

Example:

Services Required

Web Design

SEO

Maintenance

Content Writing

Select vs Checkbox

A multi-select dropdown can allow multiple options, but checkboxes are often easier when the number of options is small and users need to see all choices.

Choose the control that provides the clearest user experience.

Form Submission Behavior

When a select option is chosen:

<select name="country">

    <option value="bd">
        Bangladesh
    </option>

</select>

the submitted data may contain:

country=bd

For a selected radio button:

<input
    type="radio"
    name="plan"
    value="premium"
    checked
>

the submitted data may contain:

plan=premium

For a checked checkbox:

<input
    type="checkbox"
    name="newsletter"
    value="yes"
    checked
>

the submitted data can contain:

newsletter=yes

An unchecked checkbox normally does not contribute that control’s name/value pair during standard form submission.

Why Checkbox Submission Can Be Confusing

Suppose:

<input
    type="checkbox"
    name="newsletter"
    value="yes"
>

If it is checked:

newsletter=yes

may be submitted.

If it is not checked, the field may be absent from the submission.

Your backend should handle this correctly.

Use Meaningful Values

Avoid:

<option value="1">
    Business Website
</option>

unless 1 has a clearly defined meaning in your application.

Clear values can make code easier to understand:

<option value="business">
    Business Website
</option>

Labels Are Still Important

Each radio and checkbox should have a useful label.

Good:

<input
    type="checkbox"
    id="seo"
    name="services"
    value="seo"
>

<label for="seo">
    SEO Service
</label>

The user can click the label text to toggle the checkbox.

Group Related Controls

Use:

<fieldset>

and:

<legend>

for related groups when appropriate.

Example:

<fieldset>

    <legend>
        Select Contact Method
    </legend>

    <input
        type="radio"
        id="email-contact"
        name="contact_method"
        value="email"
    >

    <label for="email-contact">
        Email
    </label>

    <input
        type="radio"
        id="phone-contact"
        name="contact_method"
        value="phone"
    >

    <label for="phone-contact">
        Phone
    </label>

</fieldset>

This improves structure and accessibility.

Common Beginner Mistakes

1. Forgetting `value` in Options

Avoid:

<option>
    Bangladesh
</option>

Although text may sometimes be used as the submitted value, explicitly providing a meaningful value is often clearer:

<option value="bangladesh">
    Bangladesh
</option>

2. Radio Buttons Have Different Names

Wrong:

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

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

Correct:

<input
    type="radio"
    name="payment"
    value="cash"
>

<input
    type="radio"
    name="payment"
    value="card"
>

3. Using Radio When Multiple Choices Are Needed

If the user needs to choose:

HTML

CSS

JavaScript

at the same time, use checkboxes, not radio buttons.

4. Using Checkbox When Only One Choice Is Allowed

For mutually exclusive choices such as:

Basic

Standard

Premium

radio buttons are usually more appropriate.

5. Missing Labels

Avoid:

<input
    type="checkbox"
    name="terms"
>

Prefer:

<input
    type="checkbox"
    id="terms"
    name="terms"
>

<label for="terms">
    I agree to the terms.
</label>

6. Wrong Textarea Syntax

Avoid:

<textarea value="Hello"></textarea>

Use:

<textarea>Hello</textarea>

7. Using Placeholder Instead of Label

Avoid:

<textarea
    placeholder="Message"
></textarea>

without a useful label.

Prefer:

<label for="message">
    Message:
</label>

<textarea
    id="message"
    name="message"
    placeholder="Write your message"
></textarea>

8. Forgetting `name`

If form controls need to submit values, they generally need meaningful name attributes.

9. Duplicate IDs

Every ID should be unique on the page.

10. Preselecting Sensitive Choices Without Thought

Do not automatically preselect options such as marketing consent or other legally meaningful choices unless your requirements clearly permit it.

New & Difficult Words

Select = Dropdown form control

Option = Individual choice inside a select

Optgroup = Group of related options

Selected = Attribute that marks an option as initially selected

Multiple = Attribute allowing multiple select choices

Size = Number of visible options in a select

Radio Button = Control for one choice from a group

Checkbox = Control for independent on/off choices

Checked = Attribute indicating an initially selected radio or checkbox

Textarea = Multi-line text input

Fieldset = Element grouping related form controls

Legend = Caption describing a fieldset

Value = Submitted value associated with a selected control

Mutually Exclusive = Choices where selecting one excludes the others

Placeholder = Temporary hint displayed inside a control

Required = Value or selection required before normal browser submission

Form Submission = Sending form data to a destination for processing

Important Notes

Select:

<select name="country">

    <option value="bangladesh">
        Bangladesh
    </option>

</select>

Radio:

<input
    type="radio"
    name="plan"
    value="basic"
>

Checkbox:

<input
    type="checkbox"
    name="services"
    value="seo"
>

Textarea:

<textarea
    name="message"
></textarea>

Remember:

Dropdown → <select>

Option → <option>

One choice → Radio

Multiple independent choices → Checkbox

Long text → <textarea>

Related controls → <fieldset> + <legend>

Practice Questions

What does <select> do?
What does <option> do?
What does the value attribute do on an option?
What does selected do?
What does multiple do?
What is <optgroup> used for?
What is a radio button?
Why should radio buttons in one group share the same name?
What does checked do?
What is the difference between radio and checkbox?
What is <textarea> used for?
How do you set default text in a textarea?
What does rows do?
What does cols do?
What do minlength and maxlength do?
What is <fieldset>?
What is <legend>?
What happens to an unchecked checkbox during normal form submission?
When should you use select instead of radio?
Why are labels important?

Assignment

Create a folder named:

class-17

Inside it create:

index.html

Build a complete Web Development Service Order Form.

The form must contain:

Project Type Dropdown

Options:

• Business Website
• E-commerce Website
• Portfolio Website
• Blog Website
• Web Application

Preferred Technology Dropdown

Group the options using <optgroup>.

Frontend:

• HTML/CSS/JavaScript
• React
• Next.js

Backend:

• Node.js
• PHP
• Python

Budget Radio Group

• Under $500
• $500–$1000
• Above $1000

Required Services Checkboxes

• UI Design
• Web Development
• SEO
• E-commerce
• Maintenance
• Content Upload

Project Details Textarea

Use:

rows

maxlength

required

Terms Checkbox

Required.

Submit Button

Use:

<select>

<option>

<optgroup>

<input type="radio">

<input type="checkbox">

<textarea>

<fieldset>

<legend>

value

name

id

required

selected

Test the form in your browser and verify:

• Only one budget can be selected
• Multiple services can be selected
• Dropdowns work correctly
• Textarea accepts multi-line text
• Required controls prevent incomplete normal submission

Quiz

Which element creates a dropdown?

Answer: <select>.

Which element creates an option inside a dropdown?

Answer: <option>.

Which attribute selects an option initially?

Answer: selected.

Which attribute allows multiple selection in a <select>?

Answer: multiple.

Which control should be used for one choice from a group?

Answer: Radio buttons.

What should radio buttons in the same group share?

Answer: The same name.

Which control allows multiple independent selections?

Answer: Checkboxes.

Which element collects multi-line text?

Answer: <textarea>.

Which element groups related form controls?

Answer: <fieldset>.

Which element provides a caption for a fieldset?

Answer: <legend>.

What does checked do?

Answer: It makes a checkbox or radio button initially selected.

Does an unchecked checkbox normally submit its name/value pair?

Answer: No.

Interview Questions

Q: What is the purpose of the <select> element?

Answer: The <select> element creates a form control that allows users to choose one or more options from a predefined list.

Q: What is the purpose of the <option> element?

Answer: The <option> element represents an individual choice inside a <select> element.

Q: What is the difference between radio buttons and checkboxes?

Answer: Radio buttons are generally used when one option must be selected from a group, while checkboxes allow independent selections and can support multiple choices.

Q: Why must radio buttons in the same group have the same name?

Answer: Sharing the same name tells the browser that the radio buttons belong to one mutually exclusive group.

Q: What is <textarea> used for?

Answer: <textarea> is used for multi-line text input such as messages, comments, feedback, and project descriptions.

Q: What is the purpose of <fieldset> and <legend>?

Answer: <fieldset> groups related form controls, while <legend> provides a caption that describes the group.

Q: What happens to an unchecked checkbox when a form is normally submitted?

Answer: An unchecked checkbox usually does not contribute its name/value pair to the submitted form data.

Class Summary

In Class 17, you learned four important HTML form controls:

<select> → Dropdown

<option> → Dropdown Option

Radio → One Choice from a Group

Checkbox → Multiple Independent Choices

<textarea> → Multi-Line Text

You also learned:

<optgroup>

selected

multiple

size

checked

value

<fieldset>

<legend>

rows

cols

minlength

maxlength

Remember:

Many options in compact space → Select

One choice from a few options → Radio

Multiple independent choices → Checkbox

Long written input → Textarea

These controls are essential for building registration forms, checkout forms, surveys, project inquiry forms, booking systems, filters, and other interactive web interfaces.

Next Class:

Class 18 — HTML Audio, Video & Iframe

HTML Select, Radio, Checkbox & Textarea

What Is a Select Dropdown?

The <select> Element

The <option> Element

Why Is the value Important?

Default Selected Option

Placeholder-Like Option

Multiple Selection

The size Attribute

Grouping Options with <optgroup>

What Is a Radio Button?

Radio Button Group

Why Same name Matters

Default Radio Selection

Radio Buttons with Fieldset

What Is a Checkbox?

Multiple Checkboxes

Checkbox vs Radio

Checkbox for Terms and Conditions

Default Checked Checkbox

What Is a Textarea?

Textarea Rows and Columns

Textarea Default Text

Placeholder in Textarea

Required Textarea

Textarea Length Limits

Complete Example — Client Project Form

Expected Output

Practical Example — Computer Shop Order Form

Practical Example — Survey Form

Select vs Radio Buttons

Radio vs Checkbox

Select vs Checkbox

Form Submission Behavior

Why Checkbox Submission Can Be Confusing

Use Meaningful Values

Labels Are Still Important

Group Related Controls

Common Beginner Mistakes

1. Forgetting value in Options

2. Radio Buttons Have Different Names

3. Using Radio When Multiple Choices Are Needed

4. Using Checkbox When Only One Choice Is Allowed

5. Missing Labels

6. Wrong Textarea Syntax

7. Using Placeholder Instead of Label

8. Forgetting name

9. Duplicate IDs

10. Preselecting Sensitive Choices Without Thought

New & Difficult Words

Important Notes

Practice Questions

Assignment

Quiz

Interview Questions

Class Summary

Leave a Reply Cancel reply

The `<select>` Element

The `<option>` Element

Why Is the `value` Important?

The `size` Attribute

Grouping Options with `<optgroup>`

Why Same `name` Matters

1. Forgetting `value` in Options

8. Forgetting `name`