Skip to content

London | 26-ITP-MAY | Chinwe Chukwuma | Sprint 1 | Form Controls #1392

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

London | 26-ITP-MAY | Chinwe Chukwuma | Sprint 1 | Form Controls #1392

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
bb6c17b
Added my name as footer and the requirements as comments
ChinweP May 31, 2026
ccca42c
Added all the requirements: name, email, colours and sizes
ChinweP May 31, 2026
ba18980
Added my name as footer and added the requirements as comment
ChinweP May 31, 2026
7758364
Formatted code
ChinweP May 31, 2026
587c1c7
Added <select> for colour and size as comment
ChinweP May 31, 2026
164f988
Filled the empty tags with the appropriate colours
ChinweP May 31, 2026
f3719bf
Filled the empty tags with the sizes
ChinweP May 31, 2026
319d0ea
Removed repeated "required" from radio buttons
ChinweP May 31, 2026
75f16f1
Grouped the select dropdown by adding Fieldset and legend
ChinweP May 31, 2026
a237a1b
Editted legend and formatted code
ChinweP May 31, 2026
fa58d77
Updated title
ChinweP May 31, 2026
418efc8
Filled in the content of the description, added colour to button
ChinweP May 31, 2026
20e1211
Removed unnecessary slashes from code
ChinweP Jun 1, 2026
9af1f1e
Added style to button
ChinweP Jun 1, 2026
6453378
Added style to name and email
ChinweP Jun 1, 2026
a5ba9e3
Moved style block to the head section
ChinweP Jun 1, 2026
f45878f
Deleted commented out codes and Assignment requirements
ChinweP Jun 1, 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
110 changes: 101 additions & 9 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,119 @@
<!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="description" content="Form for ordering T-Shirts" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
form div {
margin-bottom: 10px;
}
#name,
#email,
#colour {
padding: 10px;
font-size: 1rem;
border: 1px solid black;
border-radius: 5px;
}

input[type="text"],
input[type="email"],
select {
width: 100%;
max-width: 400px;
padding: 20px;
box-sizing: border-box;
}

button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 1.5rem;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>Product Pick - T-Shirt Order Form</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-->

<div>
<label for="name">Full Name</label>
<input
id="name"
name="name"
type="text"
required
pattern=".*\S.*\S.*"
/>
</div>

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

<fieldset>
<legend>Choose your Colour</legend>

<label for="colour" class="visually-hidden">Colour Choice</label>
<select id="colour" name="colour" required>
<option value="">Select Your Colour</option>
<option value="Burgundy">Burgundy</option>
<option value="Purple">Purple</option>
<option value="Yellow">Yellow</option>
</select>
</fieldset>

<fieldset>
<legend>Size Choice</legend>
<div>
<label>
<input type="radio" name="size" value="XS" required />
XS
</label>

<label>
<input type="radio" name="size" value="S" />
S
</label>

<label>
<input type="radio" name="size" value="M" />
M
</label>
<label>
<input type="radio" name="size" value="L" />
L
</label>
<label>
<input type="radio" name="size" value="XL" />
XL
</label>
<label>
<input type="radio" name="size" value="XXL" />
XXL
</label>
</div>
</fieldset>


<button type="submit">Place Your Order</button>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>

<p>By CHINWE CHUKWUMA</p>
</footer>
</body>
</html>
Loading