Skip to content

Manchester | 26-ITP-Sep | khalid bih | Sprint 2 | Form controls #1028

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
khalidbih wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Manchester | 26-ITP-Sep | khalid bih | Sprint 2 | Form controls #1028

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
20491ca
Initial form structure for T-shirt project
khalidbih Sep 19, 2025
59072e5
Fix accessibility issues and improve form structure
khalidbih Sep 19, 2025
236dd8c
I Added style to my inputs giving them a size
khalidbih Sep 20, 2025
1f9f56e
Merge main into form-controls and update element
khalidbih Sep 20, 2025
458eaca
Restore index.html from main to exclude changes
khalidbih Sep 20, 2025
52d6356
I made changes for input; styles also more human-readable placeholder
khalidbih Sep 29, 2025
e4d5e24
Improve form accessibility
khalidbih Jan 23, 2026
b9ebefd
Improve form accessibility
khalidbih Jan 23, 2026
586569e
Complete form-controls with validation and accessibility fixes
khalidbih Jan 30, 2026
13b66d0
Update form-controls with main landmark and pattern validation
khalidbih Jan 30, 2026
95201c9
Remove Wireframe folder from PR branch
khalidbih Jan 30, 2026
f56f689
Clean PR: keep only Form-Controls files
khalidbih Jan 30, 2026
23d09cf
Revert "Clean PR: keep only Form-Controls files"
khalidbih Jan 31, 2026
b104ef4
Revert "Revert "Clean PR: keep only Form-Controls files""
khalidbih Jan 31, 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
52 changes: 52 additions & 0 deletions Form-Controls/form-controls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-shirt order</title>
</head>
<body>

<main>
<h1>T-shirt Order</h1>

<form>
<fieldset>
<legend>Customer Details</legend>

<label for="customerName">Name</label>
<input type="text" id="customerName" name="name" minlength="2" required>
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently a user can enter a name consisting of only space characters (e.g., " "). Can you enforce a stricter validation rule using the pattern attribute to disallow any name that contains only space characters?

Copy link
Copy Markdown
Author

@khalidbih khalidbih Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, I’ve added a pattern to the Name input to disallow names that contain only spaces.


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

<fieldset>
<legend>T-shirt Options</legend>

<label for="tshirtColour">Choose a Colour</label>
<select id="tshirtColour" name="colour" required>
<option value="">--Select--</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

<label for="tshirtSize">Choose a Size</label>
<select id="tshirtSize" name="size" required>
<option value="">--Select--</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>
</fieldset>

<button type="submit">Order</button>
</form>
</main>

</body>
</html>
67 changes: 43 additions & 24 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-shirt order</title>
</head>
<body>
<form>
<fieldset>
<legend>Customer Details</legend>

<label for="customerName">Name</label>
<input type="text" name="name" id="customerName" placeholder="Enter your full name" required style="min-width:35px; min-height:35px;">

<label for="customerEmail">Email</label>
<input type="email" name="email" id="customerEmail" placeholder="Enter your email" required style="min-width:35px;; min-height:35px;">

</fieldset>
<fieldset>
<legend>T-shirt Options</legend>

<label for="tshirtColour">Choose a Colour</label>
<select name="colour" id="tshirtColour" required>
<option value="">--Select--</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

<label for="tshirtSize">Choose a Size</label>
<select name="size" id="tshirtSize" required>
<option value="">--Select--</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>
</fieldset>

<button type="submit">Order</button>
</form>
</body>
</html>