Topic 10: Registration Form

📖 13 min read · 🎯 beginner · 🧭 Prerequisites: using-other-open-source-material, javascript-map-object

Why this matters

Picture this: you want to let people sign up for something — an event, a newsletter, a course. Without a form, you have nothing. The registration form is one of the first real pieces of UI every web developer builds, and it shows up everywhere. In this lesson, we'll build a proper HTML registration form from scratch — structured fields, the right input types for the right data, and basic client-side validation so messy or missing information gets caught before it ever leaves the page. Once you understand this, you can wire up sign-ups for almost anything.

What You'll Learn

How to structure an HTML <form> with the correct action and method attributes
Which input types to use for text, email, telephone, and dropdown data
How the required attribute enforces mandatory fields at the browser level
How to layer JavaScript addEventListener on top for custom client-side validation before submission

The Analogy

Think of an HTML registration form like a paper intake form at a government office. Each labeled box on the paper corresponds to one field (<label> + <input>). The clerk's desk is the action URL — it's where the completed form gets delivered. The rule "you must fill in your name before we stamp this" is the required attribute. And the junior aide who checks your form one last time before you hand it to the clerk is your JavaScript validation function: a second pair of eyes that catches obvious mistakes before the form ever leaves your hands.

Chapter 1: Form Foundation — `<form>`, `action`, and `method`

Every HTML form begins with a <form> element. Two attributes define its behavior completely:

Attribute	Purpose	Example value
`action`	The URL that receives the submitted data	`/submit_registration`
`method`	The HTTP method used to send the data	`post`

Use method="post" for any form that mutates data or contains sensitive information (names, emails, contact numbers). post sends data in the request body rather than the URL, keeping it out of browser history and server logs.

<form action="/submit_registration" method="post">
  <!-- fields go here -->
</form>

Chapter 2: Building the Full Registration Form

Here is the complete HTML skeleton the class assembled for the Innovators' Summit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Innovators' Summit Registration</title>
</head>
<body>

  <h1>Innovators' Summit Registration Form</h1>

  <form action="/submit_registration" method="post">

    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" required>
    <br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>

    <label for="contact">Contact Number:</label>
    <input type="tel" id="contact" name="contact" required>
    <br>

    <label for="track">Preferred Track:</label>
    <select id="track" name="track" required>
      <option value="frontend">Frontend Development</option>
      <option value="backend">Backend Development</option>
      <option value="fullstack">Full Stack Development</option>
    </select>
    <br>

    <label for="diet">Dietary Preferences:</label>
    <input type="text" id="diet" name="diet">
    <br>

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

  </form>

</body>
</html>

Chapter 3: Anatomy of Each Form Element

Every line in that form is doing deliberate work. Let's walk through each piece:

`<label>` and `<input>` — the core pairing

<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

for="name" on the label links it to the input with id="name". Clicking the label focuses the input — essential for accessibility.
name="name" is the key that the server reads from the POST body. The value the user types becomes the value for that key.
required prevents form submission if the field is empty; the browser itself shows the validation error without any JavaScript.

`type="text"` — free-form text

Used for Full Name and Dietary Preferences. Accepts any characters. No format enforcement.

<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

`type="email"` — built-in format check

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

Browsers automatically validate that the value contains an @ symbol and a domain. Invalid emails trigger a native browser error before the form submits.

`type="tel"` — telephone number

<label for="contact">Contact Number:</label>
<input type="tel" id="contact" name="contact" required>

type="tel" triggers the numeric keypad on mobile devices. Unlike type="number", it allows +, -, spaces, and parentheses — formats that phone numbers actually use.

<label for="track">Preferred Track:</label>
<select id="track" name="track" required>
  <option value="frontend">Frontend Development</option>
  <option value="backend">Backend Development</option>
  <option value="fullstack">Full Stack Development</option>
</select>

Each <option> has a value (what gets sent to the server) and a display label (what the user sees). The three tracks available are:

frontend — Frontend Development
backend — Backend Development
fullstack — Full Stack Development

Dietary Preferences — optional field

<label for="diet">Dietary Preferences:</label>
<input type="text" id="diet" name="diet">

No required attribute. This field is optional — a participant who has no dietary restrictions can leave it blank and still submit.

`<button type="submit">` — the trigger

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

A <button> inside a <form> defaults to type="submit", but being explicit makes intent clear. Clicking this runs any submit event listeners, then sends the form data to the action URL.

Chapter 4: Ensuring Data Integrity with `required`

The required attribute is the browser's built-in enforcement layer. Fields marked required block form submission and display a native tooltip if left empty. The class applied required to:

name — you must know who is registering
email — needed for confirmation messages
contact — needed for logistics
track — the organizers need to set up room capacity per track

diet deliberately has no required because it is optional information.

<!-- required fields -->
<input type="text"  id="name"    name="name"    required>
<input type="email" id="email"   name="email"   required>
<input type="tel"   id="contact" name="contact" required>
<select             id="track"   name="track"   required>

Chapter 5: JavaScript Client-Side Validation

Browser-native validation handles the basics, but JavaScript lets you write richer logic: cross-field checks, custom error messages, or pre-processing before submission. The class wired up a submit event listener as a second line of defense:

<script>
  document.querySelector("form").addEventListener("submit", function(event) {
    var name    = document.getElementById("name").value;
    var email   = document.getElementById("email").value;
    var contact = document.getElementById("contact").value;

    if (name === "" || email === "" || contact === "") {
      alert("Please fill in all required fields.");
      event.preventDefault();
    }
  });
</script>

How this works step by step

document.querySelector("form") — selects the first <form> on the page.
.addEventListener("submit", function(event) { ... }) — fires the callback whenever the form is submitted (button click or Enter key).
document.getElementById("name").value — reads the current value from each field.
The if block checks all three required fields. If any is empty, alert() shows a message and event.preventDefault() cancels the submission — the form data never leaves the browser.

flowchart TD
    A[User clicks Register] --> B{JS validation passes?}
    B -- No --> C[event.preventDefault\nalert shown\nform stays open]
    B -- Yes --> D{Browser required\nattributes pass?}
    D -- No --> E[Native browser\ntooltip shown]
    D -- Yes --> F[POST to /submit_registration]
    F --> G[Server processes data]

Why both `required` AND JavaScript validation?

Layer	Catches	Can be bypassed?
HTML `required`	Empty mandatory fields	Yes — disabled JS or direct HTTP request
JavaScript `addEventListener`	Custom logic, cross-field rules	Yes — disabled JS
Server-side validation	Everything	No

Client-side validation is for user experience (instant feedback). Server-side validation is for security. Always validate on the server too — never trust the client alone.

Chapter 6: Putting It All Together — The Complete Form with Validation

Here is the final version with both the HTML structure and the JavaScript validation combined:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Innovators' Summit Registration</title>
</head>
<body>

  <h1>Innovators' Summit Registration Form</h1>

  <form action="/submit_registration" method="post">

    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" required>
    <br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>

    <label for="contact">Contact Number:</label>
    <input type="tel" id="contact" name="contact" required>
    <br>

    <label for="track">Preferred Track:</label>
    <select id="track" name="track" required>
      <option value="frontend">Frontend Development</option>
      <option value="backend">Backend Development</option>
      <option value="fullstack">Full Stack Development</option>
    </select>
    <br>

    <label for="diet">Dietary Preferences:</label>
    <input type="text" id="diet" name="diet">
    <br>

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

  </form>

  <script>
    document.querySelector("form").addEventListener("submit", function(event) {
      var name    = document.getElementById("name").value;
      var email   = document.getElementById("email").value;
      var contact = document.getElementById("contact").value;

      if (name === "" || email === "" || contact === "") {
        alert("Please fill in all required fields.");
        event.preventDefault();
      }
    });
  </script>

</body>
</html>

🧪 Try It Yourself

Task: Build and test the Innovators' Summit registration form locally, then extend it with a password field and a confirmation check.

Save the complete form above as register.html and open it in a browser.
Try submitting with empty fields — confirm the browser blocks it.
Add a password field and a confirm-password field:

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>

<label for="confirm">Confirm Password:</label>
<input type="password" id="confirm" name="confirm" required>
<br>

Update the JavaScript validation to check that both passwords match before allowing submission:

<script>
  document.querySelector("form").addEventListener("submit", function(event) {
    var name     = document.getElementById("name").value;
    var email    = document.getElementById("email").value;
    var contact  = document.getElementById("contact").value;
    var password = document.getElementById("password").value;
    var confirm  = document.getElementById("confirm").value;

    if (name === "" || email === "" || contact === "") {
      alert("Please fill in all required fields.");
      event.preventDefault();
    } else if (password !== confirm) {
      alert("Passwords do not match.");
      event.preventDefault();
    }
  });
</script>

Success criterion: Submitting with mismatched passwords should show the "Passwords do not match" alert and leave the form open. Matching passwords with all required fields filled should allow the form to proceed (it will 404 since /submit_registration is not a real endpoint — that's expected).

🔍 Checkpoint Quiz

Q1. What is the difference between method="get" and method="post" on a <form> element, and why should a registration form use post?

Q2. Given this snippet, what happens when a user submits the form with the email field left blank?

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

A) The form submits normally and the server receives an empty string for email B) The browser blocks submission and shows a native validation tooltip C) A JavaScript error is thrown in the console D) The required attribute is ignored if JavaScript is disabled

Q3. What does event.preventDefault() do inside a submit event listener?

A) Removes all event listeners from the form B) Resets all form fields to their default values C) Stops the form from being sent to the server D) Prevents the browser from rendering validation tooltips

Q4. The class wants to add a field that lets participants choose multiple dietary tags (e.g., "vegan", "gluten-free", "nut allergy") from a fixed list. Which HTML element and attribute would you use?

A1. get appends form data to the URL as query parameters (?name=Alice&email=...), making it visible in browser history and server logs. post sends data in the HTTP request body, keeping it out of the URL. Registration forms collect personal information (name, email, phone), so post is the correct choice to avoid exposing that data in URLs.

A2. B — The browser intercepts the submission, displays a native tooltip on the email field saying something like "Please fill in this field", and prevents the form from being sent. required enforces this without any JavaScript.

A3. C — event.preventDefault() cancels the default behavior of the submit event, which is to send the form data to the action URL. The form stays on screen and no network request is made, giving the user a chance to fix their input.

A4. Use a <select> element with the multiple attribute, or a group of <input type="checkbox"> elements sharing the same name. Checkboxes are generally more accessible and easier for users to scan at a glance:

<fieldset>
  <legend>Dietary Tags:</legend>
  <input type="checkbox" id="vegan" name="diet[]" value="vegan">
  <label for="vegan">Vegan</label>
  <input type="checkbox" id="gluten" name="diet[]" value="gluten-free">
  <label for="gluten">Gluten-Free</label>
  <input type="checkbox" id="nuts" name="diet[]" value="nut-allergy">
  <label for="nuts">Nut Allergy</label>
</fieldset>

🪞 Recap

An HTML <form> requires an action (destination URL) and a method (post for sensitive or mutating data).
Use semantic input types — type="email" for emails, type="tel" for phone numbers — so browsers provide built-in format validation and mobile-appropriate keyboards.
The required attribute enforces mandatory fields at the browser level with zero JavaScript.
<label for="id"> linked to an <input id="id"> is essential for accessibility — clicking the label focuses the field.
JavaScript's addEventListener("submit", ...) combined with event.preventDefault() gives you a custom validation layer on top of native browser checks; always back it up with server-side validation.

📚 Further Reading

MDN: HTML Forms Guide — comprehensive end-to-end guide to building and styling web forms
MDN: <input> element reference — full list of type values and their behavior
MDN: Client-side form validation — native constraint validation API vs. custom JavaScript approaches
HTML Living Standard: Forms — the authoritative spec for every form element and attribute
⬅️ Previous: JavaScript Map Object
➡️ Next: JavaScript Misc