Skip to content

London | 26-ITP-January | Laura C | Sprint 2 | Form Controls #996

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

London | 26-ITP-January | Laura C | Sprint 2 | Form Controls #996

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c104d11
Update footer with author name
lauracs24 Jan 20, 2026
6dbb6b6
Add form requirements as comments
lauracs24 Jan 20, 2026
7de7874
Add required name field with minimum length
lauracs24 Jan 20, 2026
6a3d716
Add required email field with HTML validation
lauracs24 Jan 20, 2026
b408fee
Add required colour selection with radio buttons
lauracs24 Jan 20, 2026
023e081
Add required size selection with radio buttons
lauracs24 Jan 20, 2026
b12b1ed
Add submit button to form
lauracs24 Jan 20, 2026
a2d8ef2
Format HTML for readability
lauracs24 Jan 20, 2026
081e848
Improve name validation using HTML pattern
lauracs24 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
127 changes: 102 additions & 25 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,104 @@
<!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>
</html>

<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>
<!-- Requirements:
- Collect customer name (minimum 2 characters)
- Collect customer email (must be valid email)
- Choose 1 colour from 3 options
- Choose 1 size from 6 options (XS, S, M, L, XL, XXL)
- All fields are required
- HTML only, no CSS or JavaScript
- No form action
-->

<p>
<label for="customer-name">Name</label><br />
<input type="text" id="customer-name" name="customerName" required minlength="2" pattern="[A-Za-z][A-Za-z' -]*"
title="Name should contain only letters, spaces, hyphens, or apostrophes." />
</p>

<p>
<label for="customer-email">Email</label><br />
<input type="email" id="customer-email" name="customerEmail" required />
</p>

<fieldset>
<legend>Choose a colour</legend>

<p>
<input type="radio" id="colour-red" name="tshirtColour" value="red" required />
<label for="colour-red">Red</label>
</p>

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

<p>
<input type="radio" id="colour-green" name="tshirtColour" value="green" />
<label for="colour-green">Green</label>
</p>
</fieldset>

<fieldset>
<legend>Choose a size</legend>

<p>
<input type="radio" id="size-xs" name="tshirtSize" value="XS" required />
<label for="size-xs">XS</label>
</p>

<p>
<input type="radio" id="size-s" name="tshirtSize" value="S" />
<label for="size-s">S</label>
</p>

<p>
<input type="radio" id="size-m" name="tshirtSize" value="M" />
<label for="size-m">M</label>
</p>

<p>
<input type="radio" id="size-l" name="tshirtSize" value="L" />
<label for="size-l">L</label>
</p>

<p>
<input type="radio" id="size-xl" name="tshirtSize" value="XL" />
<label for="size-xl">XL</label>
</p>

<p>
<input type="radio" id="size-xxl" name="tshirtSize" value="XXL" />
<label for="size-xxl">XXL</label>
</p>
</fieldset>

<p>
<button type="submit">Submit order</button>
</p>
</form>
</main>

<footer>
<h2>By Laura</h2>
</footer>
</body>

</html>