Skip to content

London | 26-ITP-Jan | Alex Okorefe | Sprint 2 |Feature/form control #1121

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
Alex-Os-Dev-Lab wants to merge 5 commits into
base: main
Choose a base branch
from
+92 −6
Open

London | 26-ITP-Jan | Alex Okorefe | Sprint 2 |Feature/form control #1121

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fcc7fdf
added customer name and validation to index.html
Alex-Os-Dev-Lab Jan 31, 2026
66337da
Email validation and notes added to index.html
Alex-Os-Dev-Lab Jan 31, 2026
570f4da
Included t-shirt selection options to form
Alex-Os-Dev-Lab Jan 31, 2026
6b52590
Updated customer instructions for required fields
Alex-Os-Dev-Lab Feb 2, 2026
6866b17
Improved spacing between customer name and email inputs to improve li…
Alex-Os-Dev-Lab Feb 2, 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
98 changes: 92 additions & 6 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,113 @@
<!DOCTYPE html>
<!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" />

<!-- Requirements:
  - Collect a valid customer name (min 2 characters)
  - Collect a valid customer email (must be a valid email address)
  - Collect a t-shirt colour (must be 1 of 3 colours)
  - Collect a t-shirt size (must be one of: XS, S, M, L, XL, XXL)
  - All fields are required
  - HTML only (no CSS / JavaScript)
  - Do not write a form action for this project. -->
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<section>
<h2>Customer Information:</h2>
<p>Please fill in your details below: <br>
* indicates required fields</p>


<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<!--
          Customer name collection:
          - min 2 characters for validation
          - field is required
          - placeholder text example provided
          -->
<div>
<label for="CustomerFullName">*Customer's Full Name:</label>
<input type="text" id="CustomerFullName" name="CustomerFullName" placeholder="e.g. John Smith" required minlength="2"/>
</div>
<br>

<!-- Customer email collection:
- type = "email" for validation
- field is required
- placeholder text example provided
-->

<div>
<label for="CustomerEmail">*Customer's Email:</label>
<input type="email" id="CustomerEmail" name="CustomerEmail" placeholder="e.g. john@example.com" required>
</div>
<br>

</section>

<section>

<h2> T-Shirt Selection:</h2>

<p>Select your preferred T-shirt colour and size: </p>

<!-- T-Shirt Colour Selection:
- type = "radio" for selection mandatory one choice
- field is required  
-->

<div>

<fieldset>
<legend>*T-Shirt Colour:</legend>
<label for="ColourRed">Red</label>
<input type="radio" id="ColourRed" name="T-ShirtColourSelection" value="Red" required>
<label for="ColourBlue">Blue</label>
<input type="radio" id="ColourBlue" name="T-ShirtColourSelection" value="Blue" required>
<label for="ColourGreen">Green</label>
<input type="radio" id="ColourGreen" name="T-ShirtColourSelection" value="Green" required>
</fieldset>

</div>

<!-- T-Shirt Size Selection:
- dropdown select for size options
- field is required  
-->

<div>

<fieldset>
<legend>*T-Shirt Size:</legend>
<label for="TShirtSize">Select Size:</label>
<select id="TShirtSize" name="TShirtSize" required>
<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>

</div>

</section>

</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By ALEX OKOREFE</h2>
</footer>
</body>
</html>
Loading