COURSE SYLLABUS

1. Introduction to HTML

Introduction to HTML HTML Document Structure How HTML Works HTML vs CSS vs JavaScript

2. Basic HTML

Basic HTML HTML Elements HTML Attributes Headings Paragraphs Comments Line Breaks Horizontal Rules

3. HTML Tags

4. Text Formatting

Text Formatting Text Formatting Elements Bold & Strong Italic & Emphasis Underline & Highlight Subscript & Superscript Quotations Abbreviations Special Characters

5. Links & Media

Links & Media Hyperlinks Link Attributes Images Image Attributes Audio Video Iframes

6. Lists & Tables

Lists & Tables Unordered Lists Ordered Lists Description Lists Nested Lists Tables Table Headers Colspan & Rowspan

7. HTML Forms

Forms Form Basics Form Attributes Input Types Labels Text Area Select & Option Radio Buttons Check Boxes Buttons Form Validation

8. Semantic HTML

Semantic HTML Semantic Elements Header Nav Main Section Article Aside Footer HTML Page Layout

9. HTML5 Features

HTML5 Features HTML5 Introduction New Input Types Audio & Video Canvas SVG Progress & Meter Details & Summary Data Attributes

10. Advanced HTML

Advanced HTML Global Attributes Meta Tags Viewport HTML Accessibility ARIA Basics HTML Best Practices SEO-Friendly HTML

HTML Select and Option

The HTML <select> element creates a dropdown control, while the <option> element defines the available choices inside that dropdown.

1. What is a Select Element?

The <select> element creates a dropdown list from which users can choose an option.

<select>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</select>

Example:

2. The select Element

The <select> element acts as the container for the dropdown choices.

<select name="course">

    <!-- Options go here -->

</select>

3. The option Element

Each choice in a dropdown is created using the <option> element.

<option>
    HTML
</option>

4. Basic Select Example

<label for="course">
    Select Course:
</label>

<select id="course"
        name="course">

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

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

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

</select>

Result:

Select Course:

5. name Attribute

The name attribute identifies the select control when its value is submitted with a form.

<select name="course">

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

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

</select>

6. value Attribute of option

The value attribute specifies the value that is submitted when the option is selected.

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

The visible text and submitted value can be different.

<option value="dotnet">
    .NET Full Stack Development
</option>

7. Visible Text vs Value

<select name="course">

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

    <option value="dotnet">
        .NET Full Stack Development
    </option>

</select>

Important: The user sees the option text, while the submitted form data uses the option's value.

8. selected Attribute

The selected attribute makes an option selected by default.

<select name="course">

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

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

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

</select>

Example:

9. Disabled Option

The disabled attribute prevents an option from being selected.

<option value=""
        disabled>
    Select Course
</option>

10. Placeholder-Style Select

A disabled option can be used as an initial prompt.

<select name="course"
        required>

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

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

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

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

</select>

Example:

11. required Attribute

The required attribute indicates that the user must select a valid option before submission.

<select name="course"
        required>

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

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

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

</select>

12. Multiple Attribute

The multiple attribute allows users to select more than one option.

<select name="skills"
        multiple>

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

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

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

</select>

Example:

Select Skills:

13. size Attribute

The size attribute can control how many options are visible at once.

<select name="course"
        size="3">

    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
    <option>C#</option>

</select>

14. Select with Many Options

<select name="country">

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

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

    <option value="uk">
        United Kingdom
    </option>

    <option value="canada">
        Canada
    </option>

    <option value="australia">
        Australia
    </option>

</select>

15. optgroup Element

The <optgroup> element groups related options inside a dropdown.

<select name="course">

    <optgroup label="Frontend">

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

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

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

    </optgroup>

    <optgroup label="Backend">

        <option value="csharp">
            C#
        </option>

        <option value="dotnet">
            .NET
        </option>

    </optgroup>

</select>

Example:

Select Course:

16. Disabled optgroup

An entire option group can be disabled.

<optgroup label="Advanced Courses"
          disabled>

    <option value="aspnet">
        ASP.NET Core
    </option>

    <option value="azure">
        Azure
    </option>

</optgroup>

17. Select with Label

A select control should have a clear label.

<label for="city">
    Select City:
</label>

<select id="city"
        name="city">

    <option value="pune">
        Pune
    </option>

    <option value="mumbai">
        Mumbai
    </option>

</select>

18. Select with Form Submission

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

    <label for="course">
        Course:
    </label>

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

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

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

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

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

    </select>

    <button type="submit">
        Register
    </button>

</form>

19. Multiple Select with Form Submission

When using multiple, multiple selected values can be submitted using an appropriate control name and server handling.

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

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

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

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

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

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

        <option value="csharp">
            C#
        </option>

    </select>

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

</form>

20. Selected Option with value

<select name="course">

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

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

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

</select>

21. option Value Can Differ from Text

<option value="frontend-html">
    HTML Fundamentals
</option>

<option value="frontend-css">
    CSS Fundamentals
</option>

The user sees the descriptive text, while the application receives the specified value.

22. Grouping Courses

<select name="course">

    <optgroup label="Web Development">

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

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

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

    </optgroup>

    <optgroup label="Programming">

        <option value="csharp">
            C#
        </option>

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

        <option value="java">
            Java
        </option>

    </optgroup>

</select>

23. Select Styling with CSS

<style>

    .course-select {
        width: 100%;
        max-width: 400px;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 6px;
    }

</style>

<select
    class="course-select"
    name="course">

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

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

</select>

24. Disabled Select

The disabled attribute disables the entire select control.

<select name="course"
        disabled>

    <option>
        Course unavailable
    </option>

</select>

25. Readonly Alternative

A standard HTML select does not provide a simple readonly attribute equivalent like text inputs do. When a selection should not change, application logic or a disabled/select-display pattern can be used according to the use case.

26. Select with Required Validation

<form>

    <label for="level">
        Select Level:
    </label>

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

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

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

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

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

    </select>

    <button type="submit">
        Continue
    </button>

</form>

27. Select with Multiple Attributes

<select
    id="skills"
    name="skills"
    multiple
    size="5"
    required>

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

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

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

    <option value="csharp">
        C#
    </option>

    <option value="sql">
        SQL
    </option>

</select>

28. Select for Country

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

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

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

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

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

    <option value="uk">
        United Kingdom
    </option>

    <option value="canada">
        Canada
    </option>

</select>

29. Select for Department

<label for="department">
    Department:
</label>

<select id="department"
        name="department">

    <option value="development">
        Development
    </option>

    <option value="testing">
        Testing
    </option>

    <option value="hr">
        Human Resources
    </option>

    <option value="sales">
        Sales
    </option>

</select>

30. Select for Course Category

<select name="course">

    <optgroup label="Frontend">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
    </optgroup>

    <optgroup label="Backend">
        <option value="csharp">C#</option>
        <option value="dotnet">.NET</option>
        <option value="java">Java</option>
    </optgroup>

</select>

31. Accessibility Considerations

Select controls should have clear labels and logically grouped options.

Use a meaningful label.
Associate the label using for and id.
Use clear option text.
Group related options with <optgroup> when useful.
Do not rely on a disabled placeholder alone to explain the field.
Use meaningful values for submitted data.

32. Common Mistakes

Forgetting the name attribute.
Using unclear option labels.
Forgetting to associate the label correctly.
Using duplicate values unnecessarily.
Using multiple when only one option should be selected.
Forgetting a useful default or prompt option.
Not validating submitted values on the server.

33. Best Practices

Use <select> for a predefined list of choices.
Use clear and concise option text.
Use meaningful value attributes.
Use optgroup for logical categories.
Use required when a selection is mandatory.
Use multiple only when multi-selection is actually needed.
Validate selected values on the server.

34. Complete Course Selection Form

<!DOCTYPE html>
<html>

<head>

    <title>Course Selection</title>

</head>

<body>

    <h1>Course Registration</h1>

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

        <label for="course">
            Select Course:
        </label>

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

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

            <optgroup label="Frontend">

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

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

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

            </optgroup>

            <optgroup label="Backend">

                <option value="csharp">
                    C#
                </option>

                <option value="dotnet">
                    .NET
                </option>

            </optgroup>

        </select>

        <br><br>

        <button type="submit">
            Register
        </button>

    </form>

</body>

</html>

35. Complete Multiple Selection Example

<!DOCTYPE html>
<html>

<head>

    <title>Skills Selection</title>

</head>

<body>

    <h1>Select Skills</h1>

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

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

        <br>

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

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

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

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

            <option value="csharp">
                C#
            </option>

            <option value="dotnet">
                .NET
            </option>

            <option value="sql">
                SQL
            </option>

        </select>

        <br><br>

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

    </form>

</body>

</html>

36. Practice Task

Create forms using select and option:

A course dropdown.
A country dropdown.
A city dropdown.
A department dropdown.
A required course dropdown with a placeholder option.
A multiple-selection skills list.
A grouped course dropdown using <optgroup>.
A select with one option disabled.
A select with one option selected by default.

Summary

The <select> element creates a dropdown, while <option> defines each choice. The value attribute controls the submitted value, while selected, disabled, required, multiple, and size provide additional control. The <optgroup> element can organize related options into categories.

← Previous: TextArea Next: Radio Buttons →