Skip to content

Brussels | ITP | Nik | Week 2 | Form Controls #75

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

Brussels | ITP | Nik | Week 2 | Form Controls #75

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
00b76ef
Create T-shirt order form
bezdzenariy Feb 19, 2026
5bbb8b9
Updated footer signature
bezdzenariy Feb 20, 2026
69b2046
feat: restore form structure with fieldset and radio groups
bezdzenariy Feb 25, 2026
7c6cba2
refactor: fix html structure and nested form tags
bezdzenariy Feb 26, 2026
cded0e0
fix: placeholder option
bezdzenariy Feb 26, 2026
140b296
fix: t-shirt sizes and group fields with "fieldset"
bezdzenariy Apr 23, 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
107 changes: 82 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,84 @@
<!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 action="#" method="post">

<!-- group 1: Client info -->
<fieldset>
<legend>Customer Information</legend>

<div>
<label for="name">Customer's Name:</label>
<input type="text" id="name" name="name" required minlength="2">
</div>

<div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="user-email" required>
</div>
</fieldset>

<!-- group 2: T-shirt parameters -->
<fieldset>
<legend>T-shirt Options</legend>

<!-- group 2.1: color -->
<fieldset>
<legend>Pick a T-shirt Color:</legend>

<div>
<input type="radio" id="red" name="color" value="red" required>
<label for="red">Red</label>
</div>

<div>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label>
</div>

<div>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
</div>
</fieldset>

<!-- group 2.2: size -->
<div>
<label for="size">T-shirt Size:</label>
<select id="size" name="size" required>
<option value="" disabled selected hidden>Choose a size...</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>
</div>
</fieldset>

<button type="submit">Place Order</button>

</form>
</main>

<footer>
<h2>By Nik</h2>
</footer>
</body>

</html>