Manchester | ITP Jan-2026 | Ofonime Edak| Sprint 2 | Form Control

[Ofonimeedak]

Self checklist

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

Change List
-[x] My form is semantic HTML.
-[x] All inputs have associated labels.
-[x] My Lighthouse Accessibility score is 100.
-[x] I require a valid name. I have defined a valid name as a text string of two characters or more.
-[x] I require a valid email.
-[x] I require one colour from a defined set of 3 colours.
-[x] I require one size from a defined set of 6 sizes.
-[x] proper use of markdown

Form control using HTML only, to create a form for a T-shirt vendor for the following sizes
XS, S, M, L, XL, XXL

Style Guide
This code follows the style guide as included in the success criteria style-guide.
-[x] Correct use of semantic tags
-[x] Light house analysis with 100% accessibility score.
-[x] Use of labels to improve readability
Form Validation
-[x] Form input name field validation using regExp pattern attribute
-[x] radio buttons using the same name attribute across all buttons
-[x] Label on the select options to give a non-default item select
-[x] required, email attribute on email to ensure the correct email format is entered.

Testing
-[x] Take out each field and submit to see if the form submits
-[x] Entered characters without @ on the email to check if it can submit
-[x] Entered a non-alphabet character and a character less than 2 to test the pattern attribute
-[x] Validate HTML using the validator website

Changes

• text input, adding regExp
• encapsulating input in a label tag for accessibility
• Rewriting work description

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	e2566b6
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/69828eaaa9afa5000809e4e7
😎 Deploy Preview	https://deploy-preview-1057--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: 91 (🟢 up 5 from production) PWA: - View the detailed breakdown and full score reports

---

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

[cjyuan]

• According to https://validator.w3.org/, there are errors in your code. Can you fix them?

• Have you tried submitting the form to ensure it behaves as expected?

  • If any value is omitted, the form won't submit
  • If all input are valid, then the form can be submitted successfully

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

[cjyuan]

• Spec asks for 6 different sizes.

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

[Ofonimeedak]

Thank you very much, Cjyuan, for your feedback. I have done the correction, but I think checking the validator is not working because the URL is not public, and the github Url contains other HTML files

[Ofonimeedak]

PR updated

[cjyuan]

Good job in addressing some of my comments.

However, there are still errors in your code, can you fix them?

Suggestion: Use an AI tool to help you check errors, typo, consistency, accessibility, and suggest possible improvements.

[cjyuan]

Code is free of syntax error and well indented. All requirements met. Well done.

[cjyuan]

• When we wrap the radio button input inside <label>, assigning an id to the input element is optional.

• Among the radio buttons in the same button group (same name attribute value), it is not necessary to introduce multiple required.

[cjyuan]

Can you format the PR description in proper Markdown syntax so that it look like this:

---

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

Form control using HTML only, to create a form for a T-shirt vendor

[cjyuan]

The checkboxes are not yet formatted correctly in Markdown syntax.
Since Markdown are widely used on GitHub, I would strongly suggest reading this article.

The Wireframe implementation is good. Well done.