Section 37: Project — Accessible Registration and Contact Forms

Project Goal

Build a registration form and contact form using semantic HTML, accessible labels, appropriate input types and built-in validation.

Skills You Will Practice

• Form structure and submission attributes.
• Labels, fieldsets, legends and buttons.
• Input types and validation constraints.
• Keyboard accessibility and semantic page structure.
• Accessible error and help messages.

Part 1: Registration Form

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Student Registration | Codementrix</title>
  <meta name="description" content="Register for a web development course.">
</head>
<body>
  <header>
    <h1>Student Registration</h1>
    <p>Create an account to start learning.</p>
  </header>

  <main>
    <form action="/register" method="post">
      <fieldset>
        <legend>Personal Details</legend>

        <p>
          <label for="full-name">Full Name</label>
          <input id="full-name" name="full_name"
            type="text" minlength="2" maxlength="80" required>
        </p>

        <p>
          <label for="email">Email Address</label>
          <input id="email" name="email"
            type="email" autocomplete="email" required>
        </p>

        <p>
          <label for="phone">Phone Number</label>
          <input id="phone" name="phone"
            type="tel" autocomplete="tel">
        </p>
      </fieldset>

      <fieldset>
        <legend>Course Selection</legend>

        <label for="course">Choose a Course</label>
        <select id="course" name="course" required>
          <option value="">Select a course</option>
          <option value="html">HTML Mastery</option>
          <option value="css">CSS Fundamentals</option>
          <option value="javascript">JavaScript Basics</option>
        </select>
      </fieldset>

      <p>
        <label>
          <input type="checkbox" name="terms"
            value="accepted" required>
          I agree to the terms and conditions.
        </label>
      </p>

      <button type="submit">Register</button>
      <button type="reset">Reset Form</button>
    </form>
  </main>

  <footer>
    <p>Contact support if you need help registering.</p>
  </footer>
</body>
</html>

Part 2: Contact Form

<section aria-labelledby="contact-heading">
  <h2 id="contact-heading">Contact Us</h2>

  <form action="/contact" method="post">
    <p>
      <label for="contact-name">Your Name</label>
      <input id="contact-name" name="name" type="text" required>
    </p>

    <p>
      <label for="contact-email">Your Email</label>
      <input id="contact-email" name="email" type="email" required>
    </p>

    <p>
      <label for="subject">Subject</label>
      <select id="subject" name="subject" required>
        <option value="">Choose a subject</option>
        <option value="support">Technical Support</option>
        <option value="course">Course Enquiry</option>
        <option value="other">Other</option>
      </select>
    </p>

    <p>
      <label for="message">Message</label>
      <textarea id="message" name="message"
        rows="6" maxlength="2000" required></textarea>
    </p>

    <button type="submit">Send Message</button>
  </form>
</section>

Important Production Notes

• The example action URLs require backend routes. HTML alone does not store registrations or send messages.
• Validate all submitted data on the server.
• Use HTTPS and appropriate CSRF protection for state-changing requests.
• Never trust a submitted course value or terms checkbox without server-side checks.
• A real registration system needs secure password handling and account protections.

Testing Checklist

• Every input has a meaningful label.
• Required fields are marked with required.
• The form works with keyboard navigation.
• Invalid email formats trigger browser validation.
• Reset restores controls to their initial values.
• The layout remains usable on mobile screens.
• The HTML passes a conformance check.

Practice Tasks

1. Add a date-of-birth field.
2. Add radio buttons for the preferred learning mode.
3. Add a multiple-selection list of technical skills.
4. Add a privacy notice with a meaningful link.
5. Design a clear error-message pattern for server-side validation failures.

Project Review Quiz

1. Why should every form control have a label?
2. What does the name attribute do?
3. Does required replace server-side validation?
4. What does a reset button do?
5. Why should a production registration form use HTTPS?

Answer Key

1. It communicates the control's purpose and supports accessibility.
2. It identifies the field in normal form submission.
3. No. Client-side validation can be bypassed.
4. It restores controls to their initial values.
5. HTTPS protects information in transit between the browser and server.