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 Forms

HTML forms are used to collect information from users such as names, email addresses, passwords, selections, messages, and other input data.

1. What is an HTML Form?

An HTML form is a section of a webpage that contains controls through which users can enter or select information.

Forms are commonly used for:

User registration
Login pages
Contact forms
Search forms
Feedback forms
Online applications
Checkout forms

2. Basic Form Syntax

A form is created using the <form> element.

<form>

    <label>Name:</label>
    <input type="text">

    <br><br>

    <label>Email:</label>
    <input type="email">

</form>

Example:

Name: Email:

3. The form Element

The <form> element acts as the container for form controls.

<form>

    <!-- Form controls -->

</form>

The form can contain text fields, passwords, radio buttons, checkboxes, dropdowns, buttons, and more.

4. Text Input

A text input allows the user to enter a single line of text.

<input type="text">

Example

<label>Full Name:</label>

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

5. Email Input

The email input is intended for email addresses.

<label>Email:</label>

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

6. Password Input

The password input hides the characters entered by the user.

<label>Password:</label>

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

7. Label Element

The <label> element provides a descriptive label for a form control.

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

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

The for value of the label should match the id of the related input.

8. Submit Button

A submit button allows the user to submit the form.

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

9. Complete Basic 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>

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

</form>

10. Form Inputs

HTML provides many different input types for collecting different kinds of information.

Input Type	Purpose
`text`	Single-line text.
`email`	Email address.
`password`	Password input.
`number`	Numeric input.
`date`	Date selection.
`radio`	Select one option from a group.
`checkbox`	Select one or more options.
`file`	Select a file.
`color`	Select a color.
`submit`	Submit the form.

11. Form Attributes

The <form> element supports attributes that control where and how submitted data is handled.

Attribute	Purpose
`action`	Specifies where the form data is submitted.
`method`	Specifies the HTTP method used for submission.
`target`	Specifies where the response is displayed.
`autocomplete`	Controls browser autocomplete behavior.
`novalidate`	Disables built-in browser validation for submission.
`enctype`	Specifies how submitted form data is encoded.

12. action Attribute

The action attribute specifies the URL where the form data should be submitted.

<form action="/register">

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

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

</form>

13. method Attribute

The method attribute specifies how the form data is submitted.

Common methods are get and post.

<form action="/search"
      method="get">

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

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

</form>

14. GET Method

With the GET method, form data is generally included in the URL as query parameters.

<form action="/search"
      method="get">

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

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

</form>

Common Use: GET is commonly used for requests such as searches and other operations where query parameters are appropriate.

15. POST Method

The POST method sends form data in the request body.

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

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

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

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

</form>

16. name Attribute

The name attribute identifies form controls when their values are submitted.

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

Important: A form control generally needs a meaningful name when its value needs to be included in submitted form data.

17. value Attribute

The value attribute specifies the current or initial value of a form control.

<input type="text"
       name="city"
       value="Pune">

18. placeholder Attribute

The placeholder attribute displays a hint inside an empty form control.

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

19. required Attribute

The required attribute indicates that a value must be provided before the form can be submitted.

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

20. readonly Attribute

The readonly attribute prevents the user from editing the value while keeping the control available for normal form interaction.

<input type="text"
       value="Student ID: 101"
       readonly>

21. disabled Attribute

The disabled attribute prevents the user from interacting with the control.

<input type="text"
       value="Not Available"
       disabled>

Difference: A readonly control remains part of the form interaction, while a disabled control is inactive and its value is not submitted as a successful form control.

22. Textarea

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

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

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

23. Select and Option

A dropdown list can be created using <select> and <option>.

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

24. Radio Buttons

Radio buttons allow the user to select one option from a group.

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

<label>Male</label>

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

<label>Female</label>

25. Checkboxes

Checkboxes allow users to select one or more options.

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

<label>HTML</label>

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

<label>CSS</label>

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

<label>JavaScript</label>

26. Number Input

The number input is used for numeric values.

<label>Age:</label>

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

27. Date Input

The date input provides a date selection control in supporting browsers.

<label>Date of Birth:</label>

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

28. File Input

The file input allows the user to select a file from their device.

<label>Upload Resume:</label>

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

29. Form with Fieldset and Legend

The <fieldset> element groups related controls, while <legend> provides a caption.

<fieldset>

    <legend>
        Personal Information
    </legend>

    <label>Name:</label>

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

</fieldset>

30. Complete Registration Form

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

    <fieldset>

        <legend>
            Registration Form
        </legend>

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

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

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

    </fieldset>

</form>

31. Form Validation

HTML provides several built-in validation features.

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

The browser can check whether the field is required and whether the entered value matches the expected email format.

32. minlength and maxlength

These attributes control the minimum and maximum length of text input.

<input type="text"
       name="username"
       minlength="5"
       maxlength="20">

33. min and max

The min and max attributes can be used with numeric and other supported input types.

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

34. pattern Attribute

The pattern attribute allows a regular expression pattern to define an expected text format.

<input type="text"
       name="code"
       pattern="[A-Z]{3}[0-9]{3}"
       required>

Example Format: The pattern above expects three uppercase letters followed by three digits.

35. autocomplete Attribute

The autocomplete attribute provides a hint about whether the browser should offer previously entered values.

<form autocomplete="on">

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

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

</form>

36. enctype Attribute

When a form uploads files, the multipart/form-data encoding is commonly used.

<form action="/upload"
      method="post"
      enctype="multipart/form-data">

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

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

</form>

37. Form Buttons

HTML provides different button types for form interaction.

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

<button type="reset">
    Reset
</button>

<button type="button">
    Normal Button
</button>

38. Form Accessibility

Forms should be structured so that users can understand each control and its purpose.

Use meaningful labels.
Associate labels with controls using for and id.
Group related controls with <fieldset>.
Use <legend> for grouped controls.
Provide clear instructions and validation messages.
Do not rely only on placeholder text as the label.

39. Common Form Elements

Element	Purpose
`<form>`	Container for form controls.
`<label>`	Describes a form control.
`<input>`	Collects many types of user input.
`<textarea>`	Multi-line text input.
`<select>`	Dropdown selection.
`<option>`	Individual dropdown option.
`<button>`	Action button.
`<fieldset>`	Groups related controls.
`<legend>`	Describes a fieldset.

40. Common Mistakes

Forgetting labels for form controls.
Using the same name for unrelated controls.
Forgetting the name attribute on controls that need to submit values.
Using placeholders instead of proper labels.
Using the wrong input type.
Forgetting required for mandatory fields.
Using incorrect validation rules.
Forgetting the correct enctype when uploading files.

41. Best Practices

Use semantic form elements.
Give every important control a clear label.
Use suitable input types.
Use built-in HTML validation where appropriate.
Group related controls logically.
Keep forms simple and easy to understand.
Design forms so they work well on different screen sizes.

42. Practice Task

Create a complete student registration form containing:

Full Name text input.
Email input.
Password input.
Phone number input.
Date of Birth input.
Gender radio buttons.
Course dropdown.
Skills checkboxes.
Address textarea.
Resume file input.
Required validation.
Submit and Reset buttons.

43. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>Student Registration</title>

</head>

<body>

    <h1>Student Registration Form</h1>

    <form action="/register"
          method="post"
          enctype="multipart/form-data">

        <fieldset>

            <legend>
                Personal Information
            </legend>

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

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

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

        </fieldset>

        <br>

        <fieldset>

            <legend>
                Course Information
            </legend>

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

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

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

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

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

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

            </select>

            <br><br>

            <label>
                Skills:
            </label>

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

            <label>HTML</label>

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

            <label>CSS</label>

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

            <label>JavaScript</label>

        </fieldset>

        <br>

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

        <br>

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

        <br><br>

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

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

        <br><br>

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

        <button type="reset">
            Reset
        </button>

    </form>

</body>

</html>

Summary

HTML forms collect user information through controls such as text inputs, email fields, passwords, radio buttons, checkboxes, dropdowns, textareas, file inputs, and buttons. The <form> element supports attributes such as action, method, and enctype. Proper labels, validation, grouping, and suitable input types help create clear and accessible forms.

← Previous: Colspan and Rowspan Next: Form Basics →