UNIT: INTRODUCTION TO HTML FORMS

1. Introduction
HTML Forms are used to collect data from users through a web page and send that
data to a server for processing.
In modern websites, forms are essential because they allow interaction between the
user and the system. Without forms, a website would only display information but
would not be able to receive any input from users.
Forms are used in many real-world situations such as:
• Creating accounts (registration forms)
• Logging into systems
• Sending messages (contact forms)
• Filling surveys
• Making online purchases
A form acts as a bridge between the user interface (frontend) and the server
(backend). When a user fills in a form and submits it, the browser sends that
information to a server-side program, which processes the data and returns a
response.

2. Structure of an HTML Form

An HTML form is created using the <form> tag, which acts as a container for all
input elements.

1 | Page
Basic Syntax
<form action="[Link]" method="post">
<!-- form elements go here -->
</form>
Explanation of Attributes
action
This attribute specifies the destination where the form data will be sent after
submission. It usually points to a server-side file such as a PHP script.
Example:
<form action="[Link]">
This means that once the user submits the form, the data will be sent to [Link]
for processing.

method
This attribute defines how the data will be transmitted to the server. The two most
common methods are GET and POST.
GET Method
• Data is appended to the URL
• Data is visible in the browser address bar
• Limited amount of data can be sent
• Not secure for sensitive information
Example:
[Link]?name=John
POST Method
• Data is sent in the background
• Not visible in the URL

2 | Page
 • More secure than GET
• Can handle large amounts of data
POST is commonly used for login systems, registration forms, and any form that
handles sensitive information.

3. Form Elements and Their Functions

HTML forms use different input elements to collect different types of data.

3.1 Text Input

<input type="text" name="name">
This input field allows users to enter short text such as names or usernames. The
name attribute is important because it identifies the data when it is sent to the
server.

3.2 Email Input

<input type="email" name="email">
This field is used to collect email addresses. The browser automatically checks
whether the entered value follows a valid email format before allowing submission.

3.3 Password Input

<input type="password" name="password">
This field hides the characters typed by the user. It is used for entering confidential
information such as passwords. Although the text is hidden on the screen, it is still
sent to the server.

3 | Page
3.4 Radio Buttons
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Radio buttons allow the user to select only one option from a group. All radio
buttons in the same group must share the same name attribute. This ensures that
selecting one option automatically deselects the others.

3.5 Checkboxes
<input type="checkbox" name="skills" value="html"> HTML
<input type="checkbox" name="skills" value="css"> CSS
Checkboxes allow users to select multiple options. Each checkbox represents a
separate choice, and more than one can be selected at the same time.

3.6 Dropdown List

<select name="country">
<option>Zambia</option>
<option>Malawi</option>
<option>Tanzania</option>
</select>
A dropdown list provides a set of predefined options from which the user can
choose one. It is useful when there are many options and space needs to be saved
on the page.

4 | Page
3.7 Textarea
<textarea name="message"></textarea>
This element is used for entering longer text such as comments, feedback, or
descriptions. It provides a larger input area compared to a standard text field.

3.8 Submit Button

<input type="submit" value="Submit">
The submit button is used to send all the form data to the server. When clicked, it
triggers the form submission process.

3.9 Reset Button

<input type="reset" value="Clear">
The reset button clears all the data entered in the form fields. It restores the form to
its original state.

4. Complete Example of an HTML Form

<form action="[Link]" method="post">

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

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

<label>Password:</label>
<input type="password" name="password">

5 | Page
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<label>Country:</label>
<select name="country">
<option>Zambia</option>
<option>Malawi</option>
</select>

<label>Message:</label>
<textarea name="message"></textarea>

<input type="submit" value="Register">

</form>
How This Form Works
When the user fills in the fields and clicks the submit button, the browser collects
all the entered data and sends it to the file specified in the action attribute. The
server then processes the data and returns a response such as a success message.

5. How HTML Forms Work (Process Flow)

1. The user enters information into the form fields.
2. The user clicks the submit button.
3. The browser gathers all input values.

6 | Page
 4. The data is sent to the server using the specified method (GET or POST).
5. The server processes the data using a backend language.
6. The server sends back a response page to the user.

6. Common Mistakes and Issues

If the name attribute is missing, the data will not be sent to the server. The server
relies on the name to identify each input value.
Using the GET method for sensitive data such as passwords exposes the data in the
URL, which can be seen by others.
If radio buttons do not share the same name, they will behave like checkboxes,
allowing multiple selections instead of one.
Poor form design, such as unclear labels or lack of validation, can confuse users
and lead to incorrect data submission.

7. Real-World Understanding
HTML forms function similarly to physical forms. A user fills in the required
information and submits it to an organization for processing. In web applications,
this process is handled digitally through browsers and servers.

PRACTICAL QUESTIONS

A. Basic Understanding
1. What does the action attribute do?
2. In HTML forms, what does the action attribute do?
3. In HTML forms, what is the difference between the GET and POST
methods?

7 | Page
 4. In HTML forms, what is the difference between radio buttons and
checkboxes?
5. In HTML forms, what is a dropdown list and how is it created?
6. In HTML forms, what is the purpose of a <label> tag?
7. What happens when a user clicks the submit button in an HTML form?
8. What is an HTML form in web development?
9. What is the purpose of the <form> tag in HTML forms?
[Link] HTML forms, what does the method attribute specify?
[Link] HTML forms, why is the name attribute important in input elements?

B. Simple Practical Questions

5. Write HTML code for a text input field to collect a user's name.
6. Create a form with:
• A text input for username
• A submit button
7. Create a form with:
• An email input
• A password input

C. Intermediate Practical Questions

8. Create a login form that includes:
• Username
• Password
• Submit button
9. Create a form that includes:
• Radio buttons for gender
8 | Page
 • Checkboxes for skills
[Link] a form with:
• A dropdown list for country
• A textarea for message

D. Advanced Practical Questions

[Link] a student registration form that includes:
• Name
• Email
• Password
• Gender
• Country
• Message
[Link] CSS to your form to:
• Center it on the page
• Add background color
• Style the submit button

E. Conceptual Questions
[Link] is the POST method preferred for login forms?
[Link] happens if the name attribute is not included in an input field?
[Link] must radio buttons share the same name attribute?

9 | Page