Skip to content

Manchester | 26-ITP-Sep | Precious Moses | Sprint 1 | Form controls #1482

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
moses77-boop wants to merge 35 commits into
base: main
Choose a base branch
from
+50 −6
Open

Manchester | 26-ITP-Sep | Precious Moses | Sprint 1 | Form controls #1482

Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
d4ef234
Modify title in index.html to reflect T-shirts Sale
moses77-boop Sep 7, 2026
28ee2b1
Update title in index.html to "T-shirts Order Form"
moses77-boop Sep 7, 2026
54d5e71
Add introductory paragraph to header in index.html
moses77-boop Sep 7, 2026
f5867c9
Reorganise form structure in index.html to include fieldset and legen…
moses77-boop Sep 7, 2026
f180233
Reorganise form structure in index.html to enhance user details and c…
moses77-boop Sep 7, 2026
ab5d564
Add fieldset and legend for size selection in index.html
moses77-boop Sep 7, 2026
2bba163
Add size label to size selection fieldset in index.html
moses77-boop Sep 7, 2026
bb90d98
Add size selection dropdown to size fieldset in index.html
moses77-boop Sep 7, 2026
10320b6
Add default option and XS size to size selection dropdown in index.html
moses77-boop Sep 7, 2026
eb00a8a
Add additional size options to the size selection dropdown in index.html
moses77-boop Sep 7, 2026
b35f6ed
Add submit button to the order form in index.html
moses77-boop Sep 7, 2026
b0c23e3
Add reset button to the order form in index.html
moses77-boop Sep 7, 2026
1155aa7
Add style.css and create stylesheet link for form styling
moses77-boop Sep 7, 2026
e6c6c19
Add initial CSS variables for styling in style.css
moses77-boop Sep 7, 2026
ef4f6c5
Fix CSS formatting by adding missing closing brace and ensuring box-s…
moses77-boop Sep 7, 2026
3515597
Add body styles in style.css for improved layout and consistency
moses77-boop Sep 7, 2026
0da4a27
Add main styles in style.css for layout and design consistency
moses77-boop Sep 7, 2026
75c74cf
Add styles for h1 elements in style.css for improved layout
moses77-boop Sep 7, 2026
e4c12d0
Add styles for .intro class in style.css for improved layout
moses77-boop Sep 7, 2026
e28db06
Add fieldset styles for improved form layout and consistency
moses77-boop Sep 7, 2026
691e7f1
Add styles for legend and form.row classes in style.css for improved …
moses77-boop Sep 7, 2026
7522e09
Fix margin issue for last form row in style.css
moses77-boop Sep 7, 2026
5a3e25e
Add label styles for improved form accessibility and layout
moses77-boop Sep 7, 2026
d37d178
Add styles for .radio-row class to enhance layout and alignment
moses77-boop Sep 7, 2026
f775d74
Add styles for .radio-row label to improve layout consistency
moses77-boop Sep 7, 2026
0964ece
Add styles for 'input' and 'select' elements to enhance form consistency
moses77-boop Sep 7, 2026
ee9c5da
Add styles for radio buttons and focus states to enhance form accessi…
moses77-boop Sep 7, 2026
8894975
Add hover and focus styles for buttons to enhance user interaction
moses77-boop Sep 7, 2026
c6ab611
Modify footer to reflect author name
moses77-boop Sep 7, 2026
4008d0e
Add meta description tag to enhance SEO
moses77-boop Sep 8, 2026
c607649
Merge branch 'CodeYourFuture:main' into feature/form-controls
moses77-boop Sep 8, 2026
d84058a
Comment out the stylesheet link in the HTML file
moses77-boop Sep 8, 2026
9a0e5be
Remove placeholder text from name and email input fields in the order…
moses77-boop Sep 8, 2026
f51c73c
Comment out the stylesheet link in the HTML file
moses77-boop Sep 8, 2026
f9c8b2a
Remove unused CSS file for form controls
moses77-boop Sep 8, 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
Expand Up @@ -3,25 +3,69 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<title>T-shirts Order Form</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<h1>Product Pick</h1>
<p class="intro">
Dear customer, we already have your address and payment details on file. Just confirm who you are, then pick your color and size below.
</p>
</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-->
<fieldset>
<legend>Your details</legend>
<div class="form-row">
<label for="name">Full name</label>
<input type="text" id="name" name="name" pattern=".*\S.*\S.*" required >
</div>
<div class="form-row">
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
</div>
</fieldset>
<fieldset>
<legend> Choose a color</legend>
<div class="form-row radio-row">
<input type="radio" id="color-black" name="color" value="black" required>
<label for="color-black">Black</label>
</div>
<div class="form-row radio-row">
<input type="radio" id="color-white" name="color" value="white" required>
<label for="color-white">White</label>
</div>
<div class="form-row radio-row">
<input type="radio" id="color-blue" name="color" value="blue" required>
<label for="color-blue">Blue</label>
</div>
</fieldset>
<fieldset>
<legend>Choose a size</legend>
<div class="for-row">
<label for="size">Size</label>
<select id="size" name="size" required>
<option value="" disabled selected>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>
</div>
</fieldset>
<div class="form-row">
<button type="reset">Reset</button>
<button type="submit">Confirm Order</button>
</div>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Precious Moses</p>
</footer>
</body>
</html>
Loading