IN-CLASS PRACTICAL 2A (Part 2) Duration: 30–45 Minutes Guided Workshop

Student Registration Form (HTML Forms)

A guided in-class activity to practise building a simple student registration form using basic HTML form elements (inputs, textarea, checkboxes, radio buttons, select menu, and file upload) with simple validation rules.

Back to Topic Start Practical

Class Flow

Follow the steps in order so everyone can keep up.
1) Setup 2) Build Form 3) Validate 4) Screenshot

Objective

Target
  • Create a simple student registration form
  • Use basic form elements correctly
  • Apply basic validation using required + pattern
  • Use a table layout to organise fields neatly

Setup

Tools
  • VS Code / Notepad++
  • Chrome (recommended)
  • No CSS required

Rule

HTML Only
  • Use table layout (as instructed)
  • Follow lecturer pacing
  • Stop at checkpoints

IN-CLASS PRACTICAL ACTIVITY

Tasks (Complete Step-by-Step)

Complete one task → save → refresh → verify output.
Pair / Small Group Allowed
Task 1 Setup

Create the HTML File

  1. Create a new file named: registration_form.html
  2. Save it in your practical folder
  3. Open it using Chrome
Suggested:
Keep file names simple (no spaces) to avoid path issues.
Task 2 Build Form

Add the Basic HTML Structure

Type the standard structure in registration_form.html.

registration_form.html 
<!DOCTYPE html>
<html>
<head>
  <title>Student Registration Form</title>
</head>
<body>

</body>
</html>
Suggested:
Save the file first, then open/refresh in Chrome.
Task 3 Setup

Add the Page Title

  1. Inside <body>, add a heading (<h1>):
  2. Student Registration Form
Suggested:
Headings are used to display titles and important text on a web page.
Task 4 Build Form

Create the Form Tag + Attributes

Below the heading, add:
  • <form action="process.php" method="post" enctype="multipart/form-data">
  • Then add the closing tag: </form>
Suggested:
  • action defines where the form data is sent.
  • method="post" sends data securely.
  • multipart/form-data is required for file upload.
Task 5 Build Form

Add Fieldset + Legend

Inside the form, add:
  • <fieldset>
  • <legend>Student Information</legend>
  • Close later with </fieldset>
Suggested:
<fieldset> groups related form elements; <legend> labels the group.
Task 6 Build Form

Create a Table Layout

Inside the fieldset, create a table:
  • <table border="0" cellpadding="8">
  • Add <tr> rows for each field
  • Close with </table> before closing the fieldset
Suggested:
Tables can organise form elements neatly in rows and columns.
Task 7 Build Form

Add “Full Name” (Text Input + Pattern)

Add a new table row with:
  • Label: Full Name
  • <input type="text" name="fullname" required pattern="[A-Za-z\s]+" placeholder="e.g., Nur Aina binti Ahmad">
Suggested:
The pattern [A-Za-z\s]+ allows letters and spaces only.
Task 8 Build Form

Add “Password” (Password Input)

  • Label: Password
  • <input type="password" name="password" required>
Suggested:
type="password" hides the characters entered by the user.
Task 9 Build Form

Add “Email” (Email Input)

  • Label: Email
  • <input type="email" name="email" required placeholder="e.g., student@email.com">
Suggested:
type="email" validates the input format as an email address.
Task 10 Build Form

Add “Age” (Number Input)

  • Label: Age
  • <input type="number" name="age" min="1" max="100" required>
Suggested:
Use min and max to restrict valid numeric range.
Task 11 Build Form

Add “Date of Birth” (Date Input)

  • Label: Date of Birth
  • <input type="date" name="dob" required>
Suggested:
type="date" allows the user to select a date from a calendar.
Task 12 Build Form

Add “Gender” (Radio Buttons)

Create two radio buttons (same name):
  • <input type="radio" name="gender" value="Male" required> Male
  • <input type="radio" name="gender" value="Female"> Female
Suggested:
Radio buttons allow only one selection. They must share the same name.
Task 13 Build Form

Add “Phone Number” (Text Input + Pattern)

  • Label: Phone Number
  • <input type="text" name="phone" required pattern="[0-9]{3}-[0-9]{7,8}" placeholder="017-3456789">
Suggested:
The pattern ensures the format looks like 017-3456789.
Task 14 Build Form

Add “Address” (Textarea)

  • Label: Address
  • <textarea name="address" rows="3" required></textarea>
Suggested:
<textarea> is used for multi-line text such as an address.
Task 15 Build Form

Add “Courses” (Checkboxes)

Create 3 checkboxes (same name):
  • <input type="checkbox" name="courses[]" value="DFK20013"> DFK20013
  • <input type="checkbox" name="courses[]" value="DFC20283"> DFC20283
  • <input type="checkbox" name="courses[]" value="DFC20125"> DFC20125
Suggested:
Checkboxes allow multiple selections. Using courses[] sends multiple values.
Task 16 Build Form

Add “Program” (Select Menu)

Create a dropdown:
  • <select name="program" required> ... </select>
  • Add 4 options (as provided)
Suggested options:
Diploma in Information Technology
Diploma in Business Study
Diploma in Electrical Engineering
Diploma in Graphic Design
Task 17 Build Form

Add “Upload Photo” (File Input)

  • Label: Upload Photo
  • <input type="file" name="photo">
Suggested:
This works only when the form uses enctype="multipart/form-data".
Task 18 Build Form

Add the Submit Button

Add the last table row:
<input type="submit" value="Submit">
Suggested:
The submit button sends the form data to the server.

Task 19: Save, Test, and Screenshot

Final validation check before submission evidence.
Checkpoint
Test the following:
  • Required fields trigger validation when empty
  • Full Name accepts letters and spaces only (pattern test)
  • Phone Number follows 017-3456789 format (pattern test)
  • Gender allows only one option (radio)
  • Courses allow multiple selection (checkbox)
Suggested screenshot:
Show the form and one validation message (e.g., required/pattern) clearly in the browser.

Move to Next Activity

This practical is complete. You should now understand how basic HTML form elements work together with simple validation rules.