Skip to content

Manchester | 26-ITP-SEP | Monsur Abdulrahman | Sprint 1 | Form-controls #1540

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
Monsur0001 wants to merge 11 commits into
base: main
Choose a base branch
from
+162 −9
Open

Manchester | 26-ITP-SEP | Monsur Abdulrahman | Sprint 1 | Form-controls #1540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4ac79cf
Add initial styles and update index
Monsur0001 May 13, 2026
9030b1d
form controls html structure
Monsur0001 May 14, 2026
898c120
form control raw html
Monsur0001 May 14, 2026
1e40348
Syling in Progress
Monsur0001 May 14, 2026
2d804f3
h1 & footer styled
Monsur0001 May 14, 2026
5a74685
styling the fieldset and radio options
Monsur0001 May 14, 2026
d70b447
Ensuring the name input accepts the minimum of 2 characters
Monsur0001 May 15, 2026
6aef7dc
changing the incorrect attribute of "email" to "name"
Monsur0001 May 15, 2026
f4e5824
Removing the div tag to ensure consistency
Monsur0001 May 15, 2026
e732d80
Adding comments to code
Monsur0001 May 16, 2026
acf0cde
border radius
Monsur0001 May 30, 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
84 changes: 75 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,93 @@
<!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="form controls"
content="an exercise on the understanding of form controls"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>T-Shirt Product Pick</h1>
</header>

<!-- T-Shirt Information Collection Form Design (Name Email and T-shirt color) -->
<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">Name</label>
<input
type="text"
name="name"
id="name"
minlength="2"
placeholder="Monsur Abdulrahman"
required

/>
</div>
<div>
<label for="email">Email</label>
<input
type="email"
name="email"
id="email"
placeholder="[email protected]"
required
/>
</div>
<div>
<label for="color">T-Shirt Color</label>
<select name="color" id="color" required>
<option value="White">White</option>
<option value="Green">Green</option>
<option value="Black">Black</option>
</select>
</div>

<!-- T-shirt Size Column -->

<fieldset>
<Legend>Size</Legend>

<div class="size-option">
<label for="xs">XS</label>
<input type="radio" name="size" id="xs" required />
</div>
<div class="size-option">
<label for="s">S</label>
<input type="radio" name="size" id="s" value="S" />
</div>
<div class="size-option">
<label for="m">M</label>
<input type="radio" name="size" id="m" value="M" />
</div>
<div class="size-option">
<label for="l">L</label>
<input type="radio" name="size" id="l" value="L" />
</div>
<div class="size-option">
<label for="xl">XL</label>
<input type="radio" name="size" id="xl" value="XL" />
</div>
<div class="size-option">
<label for="xxl">XXL</label>
<input type="radio" name="size" id="xxl" value="XXL" />
</div>
</fieldset>

<button type="submit">Submit</button>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<!-- Footer -->
<p>Designed with Love by Monsur Abdulrahman</p>
</footer>
</body>
</html>
87 changes: 87 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@


* {
box-sizing: border-box;
}

h1, footer {
text-align: center;
}


main {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: aliceblue;
border-radius: 10px;
box-shadow: 0 4px 6px;

}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}

input,
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid green;
border-radius: 5px;

}

fieldset {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
border: 1px solid green;
padding: 10px;
margin-bottom: 5px;
border-radius: 5px;



}



.size-option {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 5px;

}

input [type="radio"] {
width: auto;
margin-bottom: 0;
}

button[type="submit"] {

width: 100%;
padding: 12px;
background-color: green;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;

}

button[type="submit"]:hover {
background-color: blue;
}

footer {
margin-top: 20px;
font-size: 0.9em;

}
Loading