Skip to content

Sheffield | 26-Jan-ITP | Karim Mhamdi | Sprint 2 | Form Controls #1102

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
KKtech06 wants to merge 15 commits into
base: main
Choose a base branch
from
+121 −14
Open

Sheffield | 26-Jan-ITP | Karim Mhamdi | Sprint 2 | Form Controls #1102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3383490
Implement wireframe layout for AFCON page
KKtech06 Jan 14, 2026
47ac9af
Complete wireframe webpage with semantic HTML, CSS grid layout, and a…
KKtech06 Jan 18, 2026
caac86b
Trigger CI re-run
KKtech06 Jan 18, 2026
ada7f2c
Trigger CI re-run
KKtech06 Jan 18, 2026
23d0dc6
Trigger CI re-run
KKtech06 Jan 18, 2026
1f69ca6
Fix layout and accessibility issues from review
KKtech06 Jan 25, 2026
37ef30d
Fix issues from review feedback
KKtech06 Jan 25, 2026
07aa245
Fix layout and accessibility issues from review
KKtech06 Jan 25, 2026
5f454f2
Fix footer overlap and improve article alignment
KKtech06 Jan 27, 2026
05ffb4d
Fixed footer
KKtech06 Jan 27, 2026
ea33d48
Complete form controls task with semantic HTML and accessibility
KKtech06 Jan 29, 2026
a48cbd9
Update form title for Form Controls task
KKtech06 Jan 29, 2026
b172696
Minor spacing adjustment in form
KKtech06 Jan 29, 2026
a1e107b
Wireframe updated
KKtech06 Jan 31, 2026
5a3d451
Merge branch 'CodeYourFuture:main' into feature/form-controls
KKtech06 Jan 31, 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
131 changes: 119 additions & 12 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,129 @@
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<h1>Product Pick</h1>
</head>
<body>
<header>

<h1><em>T-Shirt Selections</em></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-->
</form>
<form>
<table>
Copy link
Contributor

@cjyuan cjyuan Feb 3, 2026

Choose a reason for hiding this comment

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

I don't think it is a good practice to use table to layout form elements.

For this exercise, just use <div> or <br> to create enough space to pass the Lighthouse accessibility check.


<!--Login Section-->
<legend><strong>Customer Details</strong></legend>


<tr>

<td><label for="name">Name</label></td>
<td><input
type="text"
id="name"
name="name"
minlength="2"
required ></td>
Comment on lines +28 to +33
Copy link
Contributor

@cjyuan cjyuan Feb 3, 2026

Choose a reason for hiding this comment

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

Currently a user can enter a name consisting of only space characters (e.g., " "). Can you enforce a stricter validation rule using the pattern attribute to disallow any name that contains only space characters?



</tr>

<tr>

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

</tr>

</table>

<br>

<button>Submit</button>


<br>
<!--Color Section-->

<fieldset>

<legend>
T-shirt Colour
</legend>

<label>
<input type="radio" name="Colour" value="red" required>
Red
</label>

<label>
<input type="radio" name="Colour" value="blue">
Blue
</label>

<label>
<input type="radio" name="Colour" value="black">
Black
</label>

</fieldset>

<!--Size Section-->

<br>

<fieldset>

<legend>
T-shirt Sizes
</legend>


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

</fieldset>

</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>

<h2>By Karim M'hamdi</h2>

</footer>
</body>
</html>
2 changes: 1 addition & 1 deletion Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,4 @@ <h2>Title</h2>
</p>
</footer>
</body>
</html>
</html>
2 changes: 1 addition & 1 deletion Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,4 +86,4 @@ article {
> img {
grid-column: span 3;
}
}
}
Loading