Name: _________________________________________​​ ​ Student Activity Sheet (SAS)

Date: __________________________________________​ ​

Course Name: Information Management (Database Systems 1 and 2) Module Number: 04

Topic HTML forms and GET/POST methods (CLO 2)

Learning Create form interfaces to collect user input for the system.
Objectives

A.​ Start of the Lesson (10 minutes)

Answer in your module or notebook.​

Write short answers only.

1.​ What do we call systems that collect, store, and manage information for users?​

2.​ Which CRUD action changes existing data in a system?​

3.​ What is the purpose of a Primary Key in a table?​

4.​ What is the main purpose of creating an ERD before building a database?​

You may compare answers briefly with a partner after writing.

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
1
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

B.​ Main Task (70 Minutes)

Try It Out (15 minutes) – Forms Are Everywhere

Think about the last time you filled out an online form​
(e.g., login page, registration form, checkout page, survey).

Write short answers.

What type of form was it?

What information did you enter?

What happened after you clicked submit?

Did you notice whether the data appeared in the URL?

Optional Sharing:​
2–3 volunteers may briefly share their experience.

Let’s Learn (20 minutes)

In the previous activity, you realized that forms are part of almost every digital system.

Forms allow users to send data to a system. That data may be:

●​ Processed​

●​ Stored​

●​ Validated​

●​ Connected to a database​

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
2
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

HTML Forms

Definition:​
HTML forms collect user input and send it to a server.

Basic Structure:

<form action="target_url" method="GET or POST">

input elements

buttons

</form>

Important Attributes:

●​ action → where the data is sent​

●​ method → how the data is sent (GET or POST)​

Common Form Elements:

●​ <input type="text">​

●​ <input type="password">​

●​ <input type="email">​

●​ <input type="radio">​

●​ <input type="checkbox">​

●​ <select>​

●​ <textarea>​

●​ <button type="submit">​

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
3
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

Important Input Attributes:

●​ name​

●​ id​

●​ value​

●​ required​

●​ placeholder​

●​ pattern​

●​ maxlength​

Important Idea:​
A form is the bridge between the user and the system’s database.

Let’s Learn (15 minutes)

GET and POST Methods

When a form is submitted, data must be sent to a server.

GET

●​ Sends data through the URL.​

●​ Visible in the address bar.​

●​ Good for search or filtering.​

●​ Can be bookmarked.​

●​ Less secure.​

●​ Limited data length.​

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
4
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

POST

●​ Sends data inside the request body.​

●​ Not visible in the URL.​

●​ Used for login, registration, checkout.​

●​ More secure than GET.​

●​ Suitable for large or sensitive data.​

Important Rule:​
If the data is sensitive (password, payment, personal info) → use POST.

Let’s Practice (20 minutes) – Build a Simple Login Form

Create a simple login form using POST.

Requirements:

●​ Email field​

●​ Password field​

●​ Submit button​

●​ Use method="POST"​

●​ Add required attribute​

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
5
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

Example structure:

<form action="#" method="POST">

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

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

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

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

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

</form>

Save and open the file in your browser.

Answer briefly:

Why should login forms use POST instead of GET?

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
6
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

Session 2

Start of the Lesson (5 minutes)

Answer in your module or notebook.​

Write short answers only.

1.​ What is the purpose of the <form> tag in HTML?

2.​ Which method sends data through the URL?

3.​ Which method is more appropriate for passwords?

4.​ What does the required attribute do?​

You may compare answers briefly with a partner after writing.

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
7
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

Main Task (55 mins)

Let’s Practice (30 minutes) – Registration Form Challenge

In groups of 3–4:

Create a registration form with:

●​ Full Name (text)​

●​ Email (email type)​

●​ Gender (radio)​

●​ Password (password)​

●​ Interests (checkboxes – at least 3)​

●​ Short Bio (textarea)​

●​ Submit button

Requirements:

●​ Use <label> properly

●​ Use validation (required, type="email", maxlength)
●​ Choose GET or POST
●​ Be ready to justify your choice​

After coding, answer:

1.​ Which method did your group use? Why?

2.​ Which fields require stronger protection? Why?​

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
8
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

Let’s Learn (15 minutes) – Designing Better and Safer Forms

Now that you have built your form, let’s improve it.

Good Form Design Principles

●​ Use clear labels for accessibility.​

●​ Keep forms simple and organized.​

●​ Avoid unnecessary fields.​

●​ Use validation attributes:​

○​ required
○​ type="email"
○​ maxlength
○​ pattern​

●​ Protect sensitive information using POST.​

●​ Consider user experience (UX) and mobile layout.​

Important Idea:​
A working form is not always a good form.

Improve and Revise (15 minutes)

Return to your group form.

Review and improve your design using the checklist below:

☐ Are all fields clearly labeled?​

☐ Are unnecessary fields removed?​
☐ Is POST used for sensitive data?​
☐ Is validation applied properly?​
☐ Is the form simple and easy to understand?

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
9
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

Make at least two improvements to your form.

Be ready to explain:

What did you improve, and why?

References Student Feedback Form

Connolly, T., & Begg, C. (2015). Database Systems: A Practical Approach to

Design, Implementation, and Management (6th ed.). Pearson.

Elmasri, R., & Navathe, S. B. (2016). Fundamentals of Database Systems (7th

ed.). Pearson.

Coronel, C., & Morris, S. (2019). Database Systems: Design, Implementation, &
Management (13th ed.). Cengage Learning.

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
10
 Student Activity Sheet (SAS)
Information Management (Database Systems 1 and 2) - Module Number 04

Name: _________________________________________________
Section: ________________________________________________​ Date: ________________________

Think Back and Think About (10 minutes)

What important feature of HTML forms did you understand better today (for example: GET vs POST,
validation, labels, input types)? Explain how that feature helps create a better or safer system.
_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

Imagine a system that uses GET for login or payment forms and does not use validation. What problems
might happen? Give one specific example and explain the possible impact on users or the organization.

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

Wrap Up (10 minutes)

Please use the space below (or your notebook) to write your answers.
1.​

2.​

3.​

4.​

5.​

6.​

7.​

Learning Modules by PHINMA Education is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License.
11