Lesson Outcomes

After completing this lesson, learners will be able to:

• Define HTML forms.
• Explain the purpose of forms in web development.
• Identify common form elements.
• Create basic HTML forms.
• Understand how forms collect user input.

Overview

HTML forms are used to collect user input on a webpage.

They are essential for interactive websites and are commonly used for:

• Login pages
• Registration forms
• Contact forms
• Surveys

Forms allow users to enter data, which can then be processed by a server.

1. What is an HTML Form?

An HTML form is a section of a webpage used to collect input from users.

It is created using the <form> tag.

Example:

<form>
  <!-- form elements go here -->
</form>

2. Purpose of HTML Forms

Forms are used to collect and send data.

Common Uses

• User registration
• Login authentication
• Contact submissions
• Feedback collection

3. Form Elements

Forms include different input elements.

3.1 Input Fields

The <input> tag is used to collect data.

Examples:

• Text input:

<input type="text">

• Password input:

<input type="password">

3.2 Labels

The <label> tag describes an input field.

Example:

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

3.3 Buttons

Used to submit or reset forms.

Example:

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

3.4 Textarea

Used for longer text input.

Example:

<textarea></textarea>

3.5 Radio Buttons

Used to select one option.

Example:

<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

3.6 Checkboxes

Used to select multiple options.

Example:

<input type="checkbox"> Option 1
<input type="checkbox"> Option 2

4. Form Attributes

Forms use attributes to define behaviour.

Common Attributes

• action → where the form data is sent
• method → how data is sent (GET or POST)

Example:

<form action="submit.php" method="post">

5. Example of a Simple Form

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

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

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

6. Importance of Forms

Forms are important because they:

• Enable user interaction
• Collect important data
• Support web applications
• Allow communication between users and systems

Key Notes

• HTML forms collect user input.
• The <form> tag defines a form.
• Input elements include text fields, passwords, radio buttons, and checkboxes.
• Labels describe input fields.
• Buttons are used to submit data.
• Attributes like action and method control form behaviour.
• Forms are essential for interactive websites.