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>
-[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