Skip to content

Sheffield | 26-ITP-Jan | Richard Frimpong | Sprint 2 | Form Controls #1034

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Richiealx wants to merge 2 commits into
base: main
Choose a base branch
from
+141 −8
Open

Sheffield | 26-ITP-Jan | Richard Frimpong | Sprint 2 | Form Controls #1034

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d9db38
Create accessible t-shirt order form with HTML validation
Richiealx Jan 24, 2026
9ff77c3
Add pattern validation to reject whitespace-only names
Richiealx Jan 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 141 additions & 8 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--
Document metadata
- charset + viewport are essential for correct rendering and responsive behaviour.
- No CSS/JS included (CYF requirement).
-->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Title shown in the browser tab -->
<title>Product Pick | T-shirt Order Form</title>

<!-- Optional: short page description -->
<meta
name="description"
content="T-shirt order form using semantic HTML and built-in validation (no CSS or JavaScript)." />
</head>

<body>
<!--
Page header (semantic landmark)
Helps screen reader users quickly understand the page topic.
-->
<header>
<h1>Product Pick</h1>
</header>

<!-- Main content (semantic landmark) -->
<main>
<!--
CYF Form Controls requirements checklist:
1) HTML only (no CSS, no JavaScript)
2) No form action attribute
3) All fields required
4) Name: minimum 2 characters AND must not be whitespace-only
5) Email: valid email format (type="email")
6) Colour: choose exactly 1 option from 3 predefined options
7) Size: choose exactly 1 option from 6 predefined options (XS, S, M, L, XL, XXL)
8) Every input has an associated label
9) Semantic structure + Lighthouse Accessibility = 100
-->

<!--
No action attribute: this form is for structure + validation only (CYF requirement).
The browser will handle validation via required/minlength/pattern/type attributes.
-->
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<!-- Clear instruction for users -->
<p>Please complete all required fields.</p>

<!-- Customer details (grouped for structure and navigation) -->
<section aria-labelledby="customer-details">
<h2 id="customer-details">Customer details</h2>

<!--
Name validation:
- required: must be filled
- minlength=2: at least 2 characters
- pattern rejects whitespace-only AND avoids leading/trailing whitespace:
^\S(.*\S)?$ => starts with non-space and ends with non-space (allows single-word or multi-word names)
-->
<p>
<label for="customer-name">Name</label><br />
<input
id="customer-name"
name="customerName"
type="text"
required
minlength="2"
pattern="^\S(.*\S)?$"
title="Name must be at least 2 characters and cannot be only spaces."
autocomplete="name" />
</p>

<!--
Email validation:
- type="email" enables browser email format checks
- required ensures it cannot be left blank
-->
<p>
<label for="customer-email">Email</label><br />
<input
id="customer-email"
name="customerEmail"
type="email"
required
autocomplete="email" />
</p>
</section>

<!-- T-shirt options (grouped for structure and navigation) -->
<section aria-labelledby="tshirt-options">
<h2 id="tshirt-options">T-shirt options</h2>

<!--
Colour selection:
- fieldset + legend provides an accessible group label for radio inputs
- same name="colour" enforces selecting only one option
- required on one radio ensures the group is required
-->
<fieldset>
<legend>Colour</legend>

<p>
<input
id="colour-black"
name="colour"
type="radio"
value="black"
required />
<label for="colour-black">Black</label>
</p>

<p>
<input id="colour-white" name="colour" type="radio" value="white" />
<label for="colour-white">White</label>
</p>

<p>
<input id="colour-blue" name="colour" type="radio" value="blue" />
<label for="colour-blue">Blue</label>
</p>
</fieldset>

<!--
Size selection:
- select is required
- disabled placeholder prevents accidental submission with a default size
- exactly 6 size options as required by the task
-->
<p>
<label for="size">Size</label><br />
<select id="size" name="size" required>
<option value="" selected disabled>Choose a size</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</p>
</section>

<!-- Submit button triggers built-in HTML validation -->
<p>
<button type="submit">Submit</button>
</p>
</form>
</main>

<!-- Footer (semantic landmark) -->
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<p>By Richard Frimpong</p>
</footer>
</body>
</html>