Project 2: Coding a Multi-Functional Registration Form
Forms are the backbone of user interactions on modern SaaS platforms. In this project, you will build a comprehensive Registration Form utilizing grouped containers (<fieldset>, <legend>), diverse input types, semantic label connections, and HTML5 native validation checkmarks.
1. Project Specifications
Your registration form must satisfy the following:
- Grouping Elements: Use
<fieldset>and<legend>to group account credentials and personal profiles separately. - Diverse Input Fields: Support email, password, username, date of birth, and terms-agreement checkbox.
- Accessibility: Make sure every input element is explicitly bound to a
<label>tag usingidandformatching. - Validation Rules: Require a username (min 5 chars), valid email, password (min 8 chars), and check the terms-agreement box before allowing submission.
2. Completed HTML Form Code
Create a new file register.html in your directory, insert the code below, and preview it in your browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Your Account - Signup Form</title>
</head>
<body>
<main>
<header>
<h1>Join Our Platform</h1>
<p>Fill out the form below to create your account.</p>
</header>
<!-- Form uses POST and submits back to register endpoint -->
<form action="/api/register" method="POST">
<!-- Group 1: Account Credentials -->
<fieldset>
<legend>Account Security</legend>
<p>
<label for="username">Choose Username:</label><br>
<input type="text" id="username" name="username" minlength="5" placeholder="e.g. coder101" required>
</p>
<p>
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" placeholder="you@domain.com" required>
</p>
<p>
<label for="password">Choose Password (min 8 characters):</label><br>
<input type="password" id="password" name="password" minlength="8" placeholder="••••••••" required>
</p>
</fieldset>
<br>
<!-- Group 2: Personal Profile Details -->
<fieldset>
<legend>Personal Information</legend>
<p>
<label for="birthday">Date of Birth:</label><br>
<input type="date" id="birthday" name="birth_date" required>
</p>
<p>
<label for="country">Country of Residence:</label><br>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="cn">China</option>
<option value="gb">United Kingdom</option>
</select>
</p>
</fieldset>
<br>
<!-- Group 3: Terms & Submission -->
<div>
<p>
<label>
<input type="checkbox" name="agree_terms" required>
I agree to the <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a>.
</label>
</p>
<button type="submit">Create Account</button>
<button type="reset">Reset Form</button>
</div>
</form>
</main>
</body>
</html>3. Challenge Exercises
- Try clicking the "Create Account" button while leaving all fields blank. Notice how the browser stops the submission and focuses on the username input box.
- Fill out the form, but enter an invalid email structure (e.g.
test@com). Click submit and observe the native warning popup. - Click "Reset Form". Do all inputs clear back to their default empty states?
Published on