London | 26-ITP-Jan | Kris Oldrini | Sprint 2 | Form Controls

[XiaoQuark]

Learners, PR Template

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

This PR adds a semantic HTML form for ordering a t-shirt, following the given requirements.

Form Structure

• Created a form using semantic HTML elements including form, fieldset, and legend to group related inputs.
• Added a header with a page title and instructions for completing required fields.
• Added a footer with author information.
• Marked all fields as required using the required attribute.
• Used only HTML as required by the task.

Customer Information

• Added a required name input using type="text" with a minimum length of 2 characters for validation.
• Added a required email input using type="email" and a regex pattern for validation.
• Associated all inputs with <label> elements for accessibility.

T-shirt Options

• Added a colour selection using radio buttons, limiting the user to one choice from three defined colours (Red, Blue, Yellow).
• Included colour square emojis using Unicode to visually represent each colour without using CSS.
• Added a size selection using a <select> dropdown with six available sizes: XS, S, M, L, XL, XXL.
• Included a disabled placeholder option to ensure the user must actively choose a size.

Accessibility & Testing

• Ensured all form controls have properly associated labels.
• Added meta description to improve page metadata SEO.
• Tested the form using browser validation to ensure required fields and input types behave correctly.
• Verified the page achieves a Lighthouse score of 100 on all aspects.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	b5d8b0d
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6984bbeba86b8c000850875b
😎 Deploy Preview	https://deploy-preview-1139--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: 100 (🟢 up 14 from production) PWA: - View the detailed breakdown and full score reports

---

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

[github-actions]

The changed files in this PR don't match what is expected for this task.

Please check that you committed the right files for the task, and that there are no accidentally committed files from other sprints.

Please review the changed files tab at the top of the page, we are only expecting changes in this directory: ^Form-Controls/

If this PR is not coursework, please add the NotCoursework label (and message on Slack in #cyf-curriculum or it will probably not be noticed).

If this PR needs reviewed, please add the 'Needs Review' label to this PR after you have resolved the issues listed above.

[github-actions]

The changed files in this PR don't match what is expected for this task.

Please check that you committed the right files for the task, and that there are no accidentally committed files from other sprints.

Please review the changed files tab at the top of the page, we are only expecting changes in this directory: ^Form-Controls/

If this PR is not coursework, please add the NotCoursework label (and message on Slack in #cyf-curriculum or it will probably not be noticed).

If this PR needs reviewed, please add the 'Needs Review' label to this PR after you have resolved the issues listed above.

[github-actions]

The changed files in this PR don't match what is expected for this task.

Please check that you committed the right files for the task, and that there are no accidentally committed files from other sprints.

Please review the changed files tab at the top of the page, we are only expecting changes in this directory: ^Form-Controls/

If this PR is not coursework, please add the NotCoursework label (and message on Slack in #cyf-curriculum or it will probably not be noticed).

If this PR needs reviewed, please add the 'Needs Review' label to this PR after you have resolved the issues listed above.