Project: Registration Form

Introduction

Registration forms combine many important HTML skills: labels, input types, validation, fieldsets, help text, error states, and secure submission habits. This project builds a realistic account creation form with accessible structure and browser validation.

Prerequisites

Project Goal

Build a registration form with:

  • text, email, password, radio, checkbox, and select controls
  • one fieldset group
  • labels for every control
  • built-in validation
  • help text with aria-describedby
  • clear required field communication
  • a secure submission reminder

Suggested file:

text
registration-form/
└── register.html

Basic Page Structure

The required-field note should appear before the form.

Form Shell

html
<form action="/register" method="post">
  <!-- controls go here -->
  <button type="submit">Create account</button>
</form>

Use post because registration changes server state and may include sensitive data.

Warning

HTTPS Required

A real registration form must submit over HTTPS. HTML cannot protect passwords over plain HTTP.

Name and Email Fields

Use autocomplete tokens so browsers and password managers can help users.

Password with Help Text

Do not create overly complex password patterns in HTML. Keep guidance readable and validate on the server.

Account Type with Radio Buttons

Radio options in one group share the same name.

Country Select

html
<p>
  <label for="country">Country or region</label>
  <select id="country" name="country" autocomplete="country-name">
    <option value="">Choose one</option>
    <option value="cn">China</option>
    <option value="us">United States</option>
    <option value="jp">Japan</option>
    <option value="de">Germany</option>
  </select>
</p>

Use an empty first option when no default should be assumed.

Terms Checkbox

html
<p>
  <label>
    <input type="checkbox" name="terms" value="accepted" required>
    I agree to the <a href="terms.html">terms of service</a>
    <span aria-hidden="true">*</span>
  </label>
</p>

A single required checkbox works well for terms acceptance.

Complete Form Example

Error Message Area (Concept)

HTML built-in validation shows browser messages. If your application later renders custom errors, connect them:

html
<p>
  <label for="email">Email</label>
  <input
    id="email"
    name="email"
    type="email"
    aria-invalid="true"
    aria-describedby="email-error"
  >
  <span id="email-error">Enter a valid email address.</span>
</p>

Only add aria-invalid="true" when the field is actually invalid.

Testing Checklist

  • Submit empty form: required fields should block submission
  • Type invalid email: browser should warn
  • Type short password: minlength should warn
  • Tab through the form: order should be logical
  • Click labels: controls should focus/toggle
  • Screen reader name sources: labels should be connected
  • Network panel: form submits to the expected action

Security Notes

HTML is only the frontend:

  • server must validate every value again
  • passwords require HTTPS
  • hidden fields are not secure
  • never trust client-side validation
  • file uploads require server-side file checks

FAQ

Should I use placeholder for field names?

No. Use visible <label> elements. Placeholder can provide examples, not names.

Should password rules use a complex pattern?

Avoid complex patterns in HTML. Use clear guidance and server-side validation.

Can a form submit without JavaScript?

Yes. Native form submission is built into HTML. JavaScript can enhance it later.

Do I need fieldset for radio buttons?

Yes, it is the best native way to give the whole group a label through <legend>.

What comes next?

Project: small static site — combine several pages, shared navigation, relative paths, and asset folders.