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 Labels

The HTML <label> element provides a descriptive name for a form control and helps users understand what information should be entered or selected.

1. What is a Label?

A label identifies the purpose of a form control such as an input, checkbox, radio button, or other supported form element.

<label>
    Full Name:
</label>

A label becomes especially useful when it is explicitly connected to a form control.

2. Basic Label Syntax

<label for="username">
    Username:
</label>

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

Example:

Username:

3. The for Attribute

The for attribute identifies the form control that the label belongs to.

<label for="email">
    Email Address:
</label>

The value of the for attribute should match the id of the related control.

4. Matching for and id

A correct label-control relationship looks like this:

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

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

Important: The label's for value must match the form control's id value exactly.

5. Label with Text Input

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

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

6. Label with Email Input

<label for="email">
    Email:
</label>

<input type="email"
       id="email"
       name="email">

7. Label with Password Input

<label for="password">
    Password:
</label>

<input type="password"
       id="password"
       name="password">

8. Label with Number Input

<label for="age">
    Age:
</label>

<input type="number"
       id="age"
       name="age"
       min="18"
       max="60">

9. Label with Date Input

<label for="dob">
    Date of Birth:
</label>

<input type="date"
       id="dob"
       name="dob">

10. Label with File Input

<label for="resume">
    Upload Resume:
</label>

<input type="file"
       id="resume"
       name="resume">

11. Label with Textarea

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

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

Example:

Message:

12. Label with Select

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

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

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

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

</select>

13. Label with Checkbox

A checkbox can be directly associated with a label.

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

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

Example:

HTML

14. Label with Radio Button

Radio buttons can also be associated with labels.

<input type="radio"
       id="online"
       name="mode"
       value="online">

<label for="online">
    Online
</label>

15. Multiple Radio Buttons with Labels

<input type="radio"
       id="online"
       name="mode"
       value="online">

<label for="online">
    Online
</label>

<input type="radio"
       id="offline"
       name="mode"
       value="offline">

<label for="offline">
    Offline
</label>

Example:

Online

Offline

16. Explicit Label Association

The most common explicit association uses for on the label and id on the control.

<label for="phone">
    Phone Number:
</label>

<input type="tel"
       id="phone"
       name="phone">

17. Implicit Label Association

A form control can also be placed directly inside its <label> element.

<label>

    Full Name:

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

</label>

Note: Explicit association using for and id is often easier to read and maintain, especially in larger forms.

18. Label with Nested Input

<label>

    Email:

    <input type="email"
           name="email">

</label>

19. Label and Placeholder

Labels and placeholders serve different purposes.

<label for="username">
    Username:
</label>

<input type="text"
       id="username"
       name="username"
       placeholder="Enter your username">

Remember: The label identifies the control, while the placeholder provides a temporary hint about expected input.

20. Label with Required Input

<label for="email">
    Email:
</label>

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

21. Labels in a Registration Form

<form>

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

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

    <br><br>

    <label for="email">
        Email:
    </label>

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

    <br><br>

    <label for="password">
        Password:
    </label>

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

    <br><br>

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

</form>

22. Labels in a Contact Form

<form>

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

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

    <br><br>

    <label for="email">
        Email:
    </label>

    <input type="email"
           id="email"
           name="email">

    <br><br>

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

    <br>

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

</form>

23. Labels for Checkbox Groups

Each checkbox should have a clear label describing its option.

<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>

24. Labels for Radio Groups

Each radio button should have its own label.

<input type="radio"
       id="beginner"
       name="level"
       value="beginner">

<label for="beginner">
    Beginner
</label>

<input type="radio"
       id="advanced"
       name="level"
       value="advanced">

<label for="advanced">
    Advanced
</label>

25. Label Click Behavior

An explicitly associated label can be activated to interact with its related control.

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

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

Practical Benefit: Clicking the text of the label can activate the associated checkbox or other supported control.

26. Label Styling with CSS

CSS can be used to control the appearance of labels.

<style>

    .form-label {
        display: block;
        font-weight: bold;
        margin-bottom: 6px;
    }

</style>

<label class="form-label"
       for="name">
    Full Name:
</label>

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

27. Label with Block Layout

<style>

    label {
        display: block;
        margin-bottom: 5px;
    }

</style>

Setting labels to display: block is a common approach for stacked form layouts.

28. Label and Input Layout

<div>

    <label for="firstName">
        First Name
    </label>

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

</div>

<div>

    <label for="lastName">
        Last Name
    </label>

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

</div>

29. Labels with Fieldset

Labels can be used inside a <fieldset> to group related form controls.

<fieldset>

    <legend>
        Personal Information
    </legend>

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

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

    <br><br>

    <label for="email">
        Email:
    </label>

    <input type="email"
           id="email"
           name="email">

</fieldset>

30. Labels and Accessibility

Proper labels improve form accessibility because users can understand what each control represents.

Use a meaningful label for each important control.
Associate labels explicitly when possible.
Keep label text clear and concise.
Do not use placeholder text as the only label.
Ensure every label points to the correct control.

31. Common Label Mistakes

Using a for value that does not match the input id.
Forgetting labels for form controls.
Using duplicate id values.
Using vague label text.
Using placeholders instead of labels.
Applying the label to the wrong control.

32. Correct vs Incorrect Association

Correct

<label for="email">
    Email:
</label>

<input type="email"
       id="email"
       name="email">

Incorrect

<label for="emailAddress">
    Email:
</label>

<input type="email"
       id="email"
       name="email">

In the incorrect example, the label's for value does not match the input's id.

33. Complete Form with Proper Labels

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

    <fieldset>

        <legend>
            Student Registration
        </legend>

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

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

        <br><br>

        <label for="email">
            Email:
        </label>

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

        <br><br>

        <label for="phone">
            Phone:
        </label>

        <input type="tel"
               id="phone"
               name="phone">

        <br><br>

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

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

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

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

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

        </select>

        <br><br>

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

        <br>

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

        <br><br>

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

    </fieldset>

</form>

34. Best Practices

Use labels for meaningful form controls.
Match for and id correctly.
Use unique id values.
Keep labels descriptive.
Use fieldsets for related groups when appropriate.
Do not depend only on placeholder text.
Keep form labels consistent across the application.

35. Practice Task

Create a form with properly associated labels for:

Full Name
Email
Password
Phone Number
Date of Birth
Course dropdown
Gender radio buttons
Skills checkboxes
Address textarea
Resume file input

36. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>HTML Labels Example</title>

    <style>

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 6px;
        }

    </style>

</head>

<body>

    <h1>Student Registration</h1>

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

        <div class="form-group">

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

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

        </div>

        <div class="form-group">

            <label for="email">
                Email:
            </label>

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

        </div>

        <div class="form-group">

            <label for="phone">
                Phone:
            </label>

            <input type="tel"
                   id="phone"
                   name="phone">

        </div>

        <div class="form-group">

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

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

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

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

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

            </select>

        </div>

        <div class="form-group">

            <label for="address">
                Address:
            </label>

            <textarea
                id="address"
                name="address"
                rows="5">
            </textarea>

        </div>

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

    </form>

</body>

</html>

Summary

The HTML <label> element identifies form controls and improves usability and accessibility. The most common approach is to connect a label's for attribute with the control's id. Labels can be associated with text inputs, email fields, passwords, textareas, dropdowns, radio buttons, checkboxes, dates, files, and other form controls. Proper label associations make forms clearer and easier to use.

← Previous: Input Types Next: TextArea →