Skip to content

London | 26-ITP-May | Rhoda Ajiroba | Sprint 1|Form Controls #1419

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
codebyra wants to merge 8 commits into
base: main
Choose a base branch
from
+82 −6
Open

London | 26-ITP-May | Rhoda Ajiroba | Sprint 1|Form Controls #1419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
de31bb8
feat: add requirements comment block
codebyra Jun 6, 2026
a3484fd
feat: add full name input field
codebyra Jun 6, 2026
240ecb4
feat: add T-shirt colour dropdown with 3 options
codebyra Jun 6, 2026
c533798
feat: add T-shirt size dropdown with 6 options
codebyra Jun 6, 2026
5ba0ce9
style: add basic form styling
codebyra Jun 6, 2026
1c697fc
fix: correct email field validation
codebyra Jun 6, 2026
d56e0ea
chore: fix HTML to pass W3C validation
codebyra Jun 6, 2026
086fb6a
chore: fix HTML structure and clean void elements
codebyra Jun 6, 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
56 changes: 50 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,71 @@
<!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" />
<link rel="stylesheet" href="style.css" />
</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-->
<!-- REQUIREMENTS:
1. Collect customer's name (minimum 2 non‑space characters)
2. Collect customer's email (must be a valid email format)
3. Provide exactly 3 colour options
4. Provide exactly 6 size options
5. All fields must be required
6. No JavaScript allowed
-->
<fieldset>
<legend>Customer Details</legend>

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

@Luro91 Luro91 Jun 6, 2026

Choose a reason for hiding this comment

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

Well done on the validaiton

/>

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

<fieldset>
<legend>T-Shirt Options</legend>
<label for="colour">T‑Shirt Colour</label>
<select id="colour" name="colour" required>
<option value="">-- Select a colour --</option>
<option value="red">Red</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>

<label for="size">T‑Shirt Size</label>
<select id="size" name="size" required>
<option value="">-- Select 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>
</fieldset>

<button type="submit">Submit Order</button>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Rhoda Ajiroba</p>
</footer>
</body>
</html>
32 changes: 32 additions & 0 deletions Form-Controls/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}

form {
max-width: 400px;
Copy link
Copy Markdown

@Luro91 Luro91 Jun 6, 2026

Choose a reason for hiding this comment

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

The styling looks quite nice. A small detail that you could improve (but don't have to) is to take a look at the text inputs. They are overflowing the form border a bit

Image

}

label {
display: block;
margin-top: 15px;
font-weight: bold;
}

input,
select {
width: 100%;
padding: 8px;
margin-top: 5px;
}

button {
margin-top: 20px;
padding: 10px;
width: 100%;
background-color: black;
color: white;
border: none;
cursor: pointer;
}
Loading