HTML forms provide a structured way to collect information from users. This lesson covers the basic form structure, controls, labels, names, values, and buttons.

1. What is an HTML Form?

The <form> element is used to create a section of a webpage that collects user input.

<form>

    <!-- Form controls go here -->

</form>

A form can contain text boxes, email fields, passwords, radio buttons, checkboxes, dropdowns, textareas, file inputs, and buttons.

2. Basic Form Example

<form>

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

    <br><br>

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

</form>

Example:

Name:

3. Form Controls

Form controls are the individual elements through which users provide or select information.

Control	Purpose
Text Input	Collects single-line text.
Email Input	Collects an email address.
Password Input	Collects a password.
Radio Button	Selects one option from a group.
Checkbox	Selects one or more options.
Dropdown	Selects an option from a list.
Textarea	Collects multi-line text.
Button	Performs an action such as submitting the form.

4. The input Element

The <input> element is one of the most commonly used form elements.

<input type="text">

The type attribute determines the kind of input control.

5. Text Input

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

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

Example:

6. Email Input

An email input is designed for email addresses.

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

Example:

7. Password Input

The password input hides the characters typed by the user.

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

Example:

8. Name Attribute

The name attribute identifies the form control when the form data is submitted.

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

Important: Give controls meaningful name values when their data needs to be submitted.

9. id Attribute

The id attribute uniquely identifies an element. It is commonly used to connect a form control with a label.

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

10. Label Element

The <label> element describes a form control.

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

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

Example:

Full Name:

11. for and id Relationship

The value of the label's for attribute should match the input element's id.

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

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

This association helps users understand which label belongs to which control.

12. placeholder Attribute

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

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

Example:

Note: Placeholder text is a hint, not a replacement for a proper label.

13. value Attribute

The value attribute specifies an initial or current value for a form control.

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

Example:

14. required Attribute

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

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

15. readonly Attribute

The readonly attribute prevents the user from editing the current value.

<input type="text"
       name="studentId"
       value="STU101"
       readonly>

Example:

Student ID:

16. disabled Attribute

The disabled attribute disables a form control. The user cannot interact with it.

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

Example:

17. Textarea

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

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

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

Example:

Message:

18. Select Element

The <select> element creates a dropdown list.

<select name="course">

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

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

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

</select>

19. Option Element

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

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

20. Radio Buttons

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

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

<label for="male">
    Male
</label>

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

<label for="female">
    Female
</label>

Important: Radio buttons belong to the same group when they use the same name value.

21. Checkboxes

Checkboxes allow the user to select one or more options.

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

22. Submit Button

A button with type="submit" submits the form.

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

23. Reset Button

A button with type="reset" resets the form controls to their initial values.

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

24. Normal Button

A button with type="button" does not submit or reset the form automatically.

<button type="button">
    Click Me
</button>

25. Complete Basic Form

<form>

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

    <input type="text"
           id="name"
           name="name"
           placeholder="Enter full name"
           required>

    <br><br>

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

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

    <br><br>

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

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

    <br><br>

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

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

</form>

26. Form with Multiple Controls

<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="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">
        Submit
    </button>

</form>

27. Form with fieldset

The <fieldset> element groups related controls.

<form>

    <fieldset>

        <legend>
            Personal Information
        </legend>

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

    </fieldset>

</form>

28. legend Element

The <legend> element provides a caption for a <fieldset>.

<fieldset>

    <legend>
        Account Information
    </legend>

    <!-- Form controls -->

</fieldset>

29. Form Submission Structure

A common form structure includes an action URL, a method, form controls, and submit buttons.

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

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

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

    <br><br>

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

</form>

30. Form Accessibility Basics

A good form should clearly communicate the purpose of every control.

Use a label for each important control.
Match for and id correctly.
Use meaningful names.
Group related controls when appropriate.
Use clear instructions.
Use suitable input types.

31. Common Mistakes

Forgetting the <form> container.
Using inputs without meaningful labels.
Using incorrect for and id values.
Forgetting the name attribute.
Using the wrong input type.
Using placeholder text as the only label.
Forgetting submit and reset buttons.
Using unrelated controls in the same group.

32. Best Practices

Use semantic form elements.
Use meaningful labels and names.
Use appropriate input types.
Keep related controls grouped together.
Use HTML validation attributes where appropriate.
Keep the form structure simple and clear.
Design forms for different screen sizes.

33. Practice Task

Create a basic student form containing:

Full Name text input.
Email input.
Password input.
Course dropdown.
Gender radio buttons.
Skills checkboxes.
Address textarea.
Submit button.
Reset button.
Required fields.

34. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>Student Form</title>

</head>

<body>

    <h1>Student Registration Form</h1>

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

        <fieldset>

            <legend>
                Student Information
            </legend>

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

            <input type="text"
                   id="name"
                   name="name"
                   placeholder="Enter full name"
                   required>

            <br><br>

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

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

            <br><br>

            <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 for="address">
                Address:
            </label>

            <br>

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

            <br><br>

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

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

        </fieldset>

    </form>

</body>

</html>

Summary

HTML form basics start with the <form> element and controls such as <input>, <textarea>, <select>, <option>, and <button>. Labels should be associated with controls using matching for and id values. Attributes such as name, value, placeholder, required, readonly, and disabled provide additional control over form behavior.

← Previous: HTML Forms Next: Form Attributes →