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

Closed
ChinweP wants to merge 18 commits into from
+96 −9
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 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
afa9373
Move inline CSS into external stylesheet
ChinweP Jun 12, 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
75 changes: 66 additions & 9 deletions Form-Controls/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,84 @@
<!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" />
<link rel="stylesheet" href="style.css" />
</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.*"

@Luro91Luro91Jun 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done on the validation

@ChinwePChinwePJun 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @Luro91

/>
</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>
Comment on lines +37 to +42

@Luro91Luro91Jun 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: I would switch around the form types. Radio buttons are good if there are not to many options to choose from. Space on a web page is precious and for inputs with a lot of options a dropdown can save a lot of space. (You don't need to change anything. This is just an information on the different input types)

@ChinwePChinwePJun 5, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted @Luro91. Thank you.

</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>
30 changes: 30 additions & 0 deletions Form-Controls/style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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;
}
Loading