---
title: "HTML5 IOE examination registration form"
subject: "Web Technology"
chapter: 2
key: "semester_7/web_technology:html5-registration-form"
source: https://www.bctengineer.com/q/semester_7/web_technology/html5-registration-form
site: BCT Engineering
---

# HTML5 IOE examination registration form

Web Technology · Chapter 2: Web basics

- Asked in: 2076 Chaitra, 10 marks
- Video: [How to Create Registration Form in HTML in 5 min - Easy Step by Step (2021)](https://www.youtube.com/watch?v=h6ptldtgRas) — Web Tech Knowledge
- Answer checked by Claude Opus 5.5 (high effort) on 2026-10-14
- Page: https://www.bctengineer.com/q/semester_7/web_technology/html5-registration-form
- Whole chapter: https://www.bctengineer.com/md/semester_7/web_technology/chapter-2

## Question

Write the HTML5 code to accept input from a user for registering in IOE examination form. The required inputs should be FirstName, LastName, Email, CollegeName, Gender, ExamType (ie. Regular or Back).

## Short answer

Create a form with method post and action register.php. Use required text inputs for names, type email for email, a datalist for college, radio buttons for gender, and a select for Regular or Back, then submit.

## Answer

Assumptions: the form is processed by `register.php` using the POST method. HTML5 input types and the `required` attribute are used for validation.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IOE Examination Registration</title>
  <style>
    body { font-family: Arial, sans-serif; }
    form { width: 340px; margin: 20px auto; padding: 15px; border: 1px solid #888; }
    label { display: block; margin-top: 10px; font-weight: bold; }
    input[type=text], input[type=email], select { width: 100%; padding: 6px; }
    input[type=submit] { margin-top: 15px; padding: 6px 16px; }
  </style>
</head>
<body>
  <form action="register.php" method="post">
    <h2>IOE Examination Registration</h2>

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="FirstName" required pattern="[A-Za-z ]+"
           placeholder="First name">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="LastName" required pattern="[A-Za-z ]+"
           placeholder="Last name">

    <label for="email">Email</label>
    <input type="email" id="email" name="Email" required placeholder="you@example.com">

    <label for="college">College Name</label>
    <input type="text" id="college" name="CollegeName" list="colleges" required>
    <datalist id="colleges">
      <option value="Pulchowk Campus">
      <option value="Thapathali Campus">
      <option value="Kathmandu Engineering College">
    </datalist>

    <label>Gender</label>
    <input type="radio" id="m" name="Gender" value="Male" required>
    <label for="m" style="display:inline;font-weight:normal">Male</label>
    <input type="radio" id="f" name="Gender" value="Female">
    <label for="f" style="display:inline;font-weight:normal">Female</label>
    <input type="radio" id="o" name="Gender" value="Other">
    <label for="o" style="display:inline;font-weight:normal">Other</label>

    <label for="exam">Exam Type</label>
    <select id="exam" name="ExamType" required>
      <option value="">-- Select --</option>
      <option value="Regular">Regular</option>
      <option value="Back">Back</option>
    </select>

    <input type="submit" value="Register">
    <input type="reset" value="Clear">
  </form>
</body>
</html>
```

#### Explanation
- `type="email"` makes the browser check the email format; `required` stops submission of empty fields; `pattern` restricts names to letters.
- Radio buttons share the same `name` so only one gender can be chosen.
- `<select>` gives the Regular/Back choice; `<datalist>` suggests college names while still allowing typing.
- On submit, the browser sends the fields (`FirstName`, `LastName`, `Email`, `CollegeName`, `Gender`, `ExamType`) to `register.php`.

## Check yourself

The answer's key points as multiple-choice questions, with the correct option and why.

1. Which input type makes the browser check email format?
   A. type="text" pattern only
   B. type="mail"
   C. type="url"
   D. type="email"
   Answer: D. HTML5 type=email validates the format on submit. (Key point: Email validation)

2. How do you make radio buttons allow only one gender choice?
   A. Give them the same name attribute
   B. Give them different names
   C. Use type=checkbox
   D. Use the same id
   Answer: A. Radio buttons in a group share a name. (Key point: Radio buttons)

3. What does the required attribute do?
   A. Hides the field
   B. Prevents submission with the field empty
   C. Makes the field read-only
   D. Sets a default value
   Answer: B. The browser blocks submit if a required field is empty. (Key point: required)

4. Which element suits choosing Regular or Back?
   A. <textarea>
   B. <datalist> only
   C. <select> with <option> elements
   D. <input type="email">
   Answer: C. A select dropdown offers a fixed choice. (Key point: select for exam type)

## Related in Web Technology

- [HTML registration form with JS validation](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Aregistration-form-js-validation) — Web Technology, chapter 4

## Related in other subjects

- [BoQ for IOE ICT building six labs](https://www.bctengineer.com/question.md?key=semester_8%2Finternet_and_intranet%3Aboq-ioe-ict-six-labs) — Internet and Intranet, chapter 5
- [Redundant network for IOE Pulchowk campus](https://www.bctengineer.com/question.md?key=semester_8%2Finternet_and_intranet%3Aredundant-network-ioe-pulchowk) — Internet and Intranet, chapter 5
- [IOE entrance scores: estimator and consistency](https://www.bctengineer.com/question.md?key=semester_5%2Fprobability_and_statistics%3Aioe-entrance-sixty-estimator-consistency) — Probability and Statistics, chapter 6
- [Regular expression and FSA: at least three b's](https://www.bctengineer.com/question.md?key=semester_4%2Fdiscrete_structure%3Afsa-at-least-three-b) — Discrete Structure, chapter 2
