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 13 commits into
base: main
Choose a base branch
from
+168 −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
13 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
cbaa62b
Add default option to T-Shirt color selection
Monsur0001 Sep 26, 2026
6fb93d6
Fix label positioning for T-shirt size options
Monsur0001 Sep 26, 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
90 changes: 81 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,99 @@
<!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="monsur@gmail.com"
required
/>
</div>
<div>
<label for="color">T-Shirt Color</label>
<select name="color" id="color" required>
<option value="">-- Select a color --</option>
<option value="White">White</option>
<option value="Green">Green</option>
<option value="Black">Black</option>
</select>
Comment on lines +47 to +52

@cjyuan cjyuan Sep 22, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

There is a way to configure a <select> element so that no option is selected by default, allowing the user to make an explicit choice.

@Monsur0001 Monsur0001 Sep 26, 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 for reviewing my pull request. I have included the select option to allow the users to make choices, rather than a default option.

</div>

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

<fieldset>
<Legend>Size</Legend>

<div class="size-option">
<input type="radio" name="size" id="xs" required />
<label for="xs">XS</label>

</div>
<div class="size-option">
<input type="radio" name="size" id="s" value="S" />
<label for="s">S</label>

</div>
<div class="size-option">
<input type="radio" name="size" id="m" value="M" />
<label for="m">M</label>

</div>
<div class="size-option">
<input type="radio" name="size" id="l" value="L" />
<label for="l">L</label>
</div>
<div class="size-option">
<input type="radio" name="size" id="xl" value="XL" />
<label for="xl">XL</label>

</div>
<div class="size-option">
<input type="radio" name="size" id="xxl" value="XXL" />
<label for="xxl">XXL</label>

</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