Skip to content

London | 26-ITP-Sep | Mars Adesina | Sprint 1 | Form Controls #1498

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
marscancode wants to merge 9 commits into
base: main
Choose a base branch
from
+60 −6
Open

London | 26-ITP-Sep | Mars Adesina | Sprint 1 | Form Controls #1498

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
269946f
Added comments covering form requirements
marscancode Sep 11, 2026
b2c7381
Added customer requirements comment
marscancode Sep 11, 2026
e289781
Added name validation to form
marscancode Sep 11, 2026
74a67c9
Added email validation to form
marscancode Sep 11, 2026
e25b334
Added colour selector validation to form
marscancode Sep 11, 2026
ec30f47
Added size selector valdation to form
marscancode Sep 11, 2026
8f87ed4
Finished t-shirt form validation
marscancode Sep 11, 2026
297191f
Refactored form using devtools and updated requirements
marscancode Sep 11, 2026
8497414
Updated form semantics
marscancode Sep 11, 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
66 changes: 60 additions & 6 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand All @@ -8,20 +8,74 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- <objectives>

@abdishakoor-dev abdishakoor-dev Sep 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The checklist comments here and on lines 20 and 37 were useful while you worked, but now everything is ticked they're the README pasted into the page. Comments in the code are for whoever reads the code later. A checklist like this belongs in the PR description, which you've already written well.

@marscancode marscancode Sep 14, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Thank you Abdi! I'll remove the checklist comments from my code and make sure not to do the same thing with the upcoming coursework.

-[x] Interpret requirements and check against a list of criteria
-[x] Write a valid form
-[x] Test with Devtools
-[x] Refactor using Devtools
-[x] Use version control by committing often and pushing regularly to GitHub
-[x] Develop the habit of writing clean, well-structured, and error-free code
{{<objectives>}}>-->

<!--
HTML
- [x] I have only used HTML and CSS.
- [x] I have not used any JavaScript.
- [x] My form is semantic HTML.
- [x] All inputs have associated labels.
- [x] My Lighthouse Accessibility score is 100.
- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/
- [x] My code is consistently formatted
- [x] My page content is free of typos and grammatical mistakes
- [x] I commit often and push regularly to GitHub
-->
<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-->
[x] Customers name = requires at least two non space characters.
[x] Customer email = requires a consistent pattern
[x] T-shirt color = required to choose from only 3 options!
[x] T-shirt size = required to choose from only 6 sizes! -->
<fieldset>
<legend>Customer Details</legend>

<label for="name">Full name: </label>
<input id="name" name="name" required pattern=".*\S.*\S.*" />

<label for="email">E-mail: </label>
<input id="email" name="email" type="email" required />
</fieldset>
<fieldset>
<legend>T-shirt Details</legend>

<label for="t-shirt-colour">Please select a t-shirt colour:</label>
<select id="t-shirt-colour" name="colour" required>
<option value="">Colour</option>
<option>Burgundy</option>
<option>Forest Green</option>
<option>Ochre Yellow</option>
</select>

<label for="t-shirt-size">Please select a size</label>
<select id="t-shirt-size" name="size" required>
<option value="">Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
</select>
</fieldset>

<button>Submit</button>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Mars Adesina</p>
</footer>
</body>
</html>
Loading