Manchester | 26-ITP-Jan | Liban Jama | Sprint 2 | Form-Controls by libanj0161 · Pull Request #1082 · CodeYourFuture/Module-Onboarding

libanj0161 · 2026-01-27T14:04:11Z

Self checklist

I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
My changes meet the requirements of the task
I have tested my changes
My changes follow the style guide

Changelist
I created a form to collect customer data. The form consists of their name, email, t-shirt colour and size. I used only HTML. All the inputs have labels they are associated with. I scored 100 in the Lighthouse Accessibility score. Their name and email has to be a valid one and they can only pick one colour and size out of the options given.

Questions
N/A.

netlify · 2026-01-27T14:04:26Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`3277e6e`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/699b2632fb882a0008a0365c
😎 Deploy Preview	https://deploy-preview-1082--cyf-onboarding-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	2 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 86 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

takanocap · 2026-01-27T17:22:28Z

Form-Controls/index.html

+      <input id="Extra Extra Large"type="radio" name="size" value="XXL" />
+      <label for="Extra Extra Large">Extra Extra Large</label> <br>
+
+


How do we submit the form? is there an element to use to submit the form ?

takanocap · 2026-01-27T17:22:35Z

Form-Controls/index.html

+      <br>
+
+      <p>Size</p>
+


well done for the good work.
just a few more things to do
can we use a dropdown menu () for the sizes ? when should you use radio buttons and drop down menu ()
see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select

takanocap · 2026-01-27T17:26:11Z

Form-Controls/index.html

+      </p>
+      <p>
+        <label for="mail">Email</label>
+        <input type="email" id="mail" name="user_email" />


can we use a placeholder to guide the users?
can we check for a minlength too ?
is there a way to validate the inputs?
can we use an attribute for the validation?

takanocap · 2026-01-27T17:29:37Z

Form-Controls/index.html

+      </p>
+      <p>Colour</p>
+
+      <label>


is there an attribute to associate the label with the radio button ?

takanocap · 2026-01-27T17:52:17Z

Form-Controls/index.html

+    <form>
+      <p>
+        <label for="name">Name</label>
+        <input type="text" id="name" name="user_name" />


can we use a minlength and other attribute to validate or make sure the input is required ?
can we use the placeholder to guide the users ?

takanocap · 2026-02-05T13:46:27Z

Form-Controls/index.html

+    <form>
+      <p>
+        <label for="name">Name</label>
+        <input type="text" id="name" name="user_name" placeholder="John Smith" required maxlength="18"/>


what happens if someone enters only 1 character ? example "w" what is the minimum expected length for name input ? can we use minlength for validation here ?

takanocap · 2026-02-05T13:48:04Z

Form-Controls/index.html

+        <input type="email" id="email" name="user_email" placeholder="johnsmith@hotmail.com" required maxlength="32"/>
+      </p>


what happens when a user enters a@b as email? can we use minlength for validation ?

takanocap · 2026-02-05T13:50:36Z

Form-Controls/index.html

+
+      <p>Size</p>
+
+      <label for="size">Size</label>


can we validate the form element to make sure users select a value?

takanocap · 2026-02-05T13:52:23Z

Form-Controls/index.html

+      <p>Colour</p>
+
+      <label for="red">
+        <input id="red" type="radio" name="colour" value="red" />


when should you use a radio button vs select ? which is more appropriate in this scenario and why ? can you also validate this ?

cjyuan · 2026-02-13T14:28:42Z

@libanj0161
It's considered a good practice to respond to every reviewer's question and comment.
Can you take a look at this "Addressing Reviewer Feedback" Guide
and take this opportunity to practice them?

I think you have addressed most but not all of the reviewer's comments.

Can you take look at this General Feedback to see if there is anything you can do to make your PR more robust and ready?

libanj0161 · 2026-02-14T15:46:27Z

Afternoon, I have made the necessary changes. I have added submit elemet, added a dropdown menu for sizes, added placeholders, minimum and maximum lengths, required. Thank you.

CameronDowner

There is a question in this comment you should try and answer: #1082 (comment)

CameronDowner · 2026-02-19T13:04:52Z

Form-Controls/index.html

+        <select id="size" name="size" required>
+          <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>


There is a small error that comes up when I validate this HTML. Can you check what's showing & try and fix it?

https://validator.w3.org/nu/#textarea

CameronDowner · 2026-02-19T13:11:36Z

Form-Controls/index.html

+        <label for="name">Name</label>
+        <input type="text" id="name" name="user_name"
+          placeholder="John Smith"
+          required minlength="2" maxlength="18">


Do we want maxlength on name / email address? Could a name be longer than 18 characters, or an email longer than 32 characters?

…end>. Wrapped the size dropdown in <fieldset >and added placeholder option.

libanj0161 · 2026-02-21T09:24:48Z

I removed max length from name and email fields.
I also wrapped the radio buttons in and changed
Colour
to Colour.
I wrapped the size dropdown in and added a placeholder option.

cjyuan · 2026-02-22T10:32:52Z

@libanj0161

According to https://validator.w3.org/, there are errors in your code. Can you fix them? (If the validator shows errors or warnings, that means the HTML code is not prepared properly).
Can you improve the Lighthouse Accessibility score from 93 to 100?
The radio button inputs and dropdown list do not look right.

Some of the code are not properly indented. Consider using VSCode's "Format Document" feature to format the code for better readability and consistency.

libanj0161 · 2026-02-22T12:51:25Z

ive made all the changes you have put forward. Thank you.

cjyuan

Form is greatly improved. Just a few minor changes needed.

cjyuan · 2026-02-22T13:06:24Z

Form-Controls/index.html

+  <footer>
+    <h2>By LIBAN JAMA</h2>
+  </footer>


Headings (<h1>–<h6>) are meant to label sections of content.

Use of <h2> would make "By LIBAN JAMA" sounds like a header of a major section to a screen reader and to search engines. <p> is probably more appropriate here.

cjyuan · 2026-02-22T13:09:15Z

Form-Controls/index.html

+      <fieldset>
+        <legend>Select Size</legend>
+
+        <p>


<p> would signal this is a paragraph or some text content. <div>, a generic block-level element, is more appropriate if you only need to create enough spacing to pass the Lighthouse Accessibility check.

libanj0161 · 2026-02-22T14:47:56Z

ive done those changes, please check, thank you.

cjyuan · 2026-02-22T14:52:04Z

You only changed one <p> to <div>. Why not change all that are applicable?

And after you have made all the necessary changes, you may want to check if there are any syntax error that may be introduced by accident.

libanj0161 · 2026-02-22T15:53:55Z

I've changed the relevant p tags to div tags and have checked for syntax errors for which there are none.

cjyuan · 2026-02-22T15:57:47Z

Changes look good! Good job.

created-form

e4a809e

libanj0161 added 📅 Sprint 2 Assigned during Sprint 2 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Module-Onboarding The name of the module. labels Jan 27, 2026

takanocap reviewed Jan 27, 2026

View reviewed changes

takanocap added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jan 27, 2026

takanocap reviewed Jan 27, 2026

View reviewed changes

takanocap self-assigned this Jan 28, 2026

added dropdown menu for sizes and added minlength and required on inputs

cde3708

libanj0161 mentioned this pull request Jan 29, 2026

26-ITP-Jan | Onboarding | Liban Jama libanj0161/My-Coursework-Planner#4

Open

updated after feedback

d30df10

libanj0161 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 2, 2026

libanj0161 requested a review from takanocap February 4, 2026 18:01

takanocap removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 5, 2026

takanocap suggested changes Feb 5, 2026

View reviewed changes

made changes as per pr comments

bc15017

libanj0161 requested a review from takanocap February 6, 2026 11:29

libanj0161 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 6, 2026

new changes

695b741

CameronDowner reviewed Feb 19, 2026

View reviewed changes

libanj0161 added 3 commits February 20, 2026 18:59

added label to the select option

eb52899

removed max length for name and email

4b6f135

wrapped radio buttons in fieldset and changed colour in a <p> to <leg…

0cb58d5

…end>. Wrapped the size dropdown in <fieldset >and added placeholder option.

libanj0161 added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Feb 21, 2026

cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 22, 2026

libanj0161 added 2 commits February 22, 2026 11:21

updated after feedback

283cee5

updated to meet lighthouse accessibility

891159d

libanj0161 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 22, 2026

cjyuan reviewed Feb 22, 2026

View reviewed changes

cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 22, 2026

additional changes

66123f0

changed p tags to div tags

3277e6e

cjyuan added Complete Volunteer to add when work is complete and all review comments have been addressed. and removed Reviewed Volunteer to add when completing a review with trainee action still to take. labels Feb 22, 2026

takanocap removed their assignment Feb 22, 2026

		<input id="Extra Extra Large"type="radio" name="size" value="XXL" />
		<label for="Extra Extra Large">Extra Extra Large</label> <br>

		<input type="email" id="email" name="user_email" placeholder="johnsmith@hotmail.com" required maxlength="32"/>
		</p>

Uh oh!

Comments

Conversation

libanj0161 commented Jan 27, 2026

Uh oh!

netlify bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cyf-onboarding-module ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

takanocap Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cjyuan commented Feb 13, 2026

Uh oh!

libanj0161 commented Feb 14, 2026

Uh oh!

CameronDowner left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

libanj0161 commented Feb 21, 2026

Uh oh!

cjyuan commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

libanj0161 commented Feb 22, 2026

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

libanj0161 commented Feb 22, 2026

Uh oh!

cjyuan commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

libanj0161 commented Feb 22, 2026

Uh oh!

cjyuan commented Feb 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Jan 27, 2026 •

edited

Loading

takanocap Jan 27, 2026 •

edited

Loading

cjyuan commented Feb 22, 2026 •

edited

Loading

cjyuan commented Feb 22, 2026 •

edited

Loading