Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 2 | Form Controls

[mahmoudshaabo1984]

I have completed the Form Controls task for Sprint 2.

Work done:

• Built a T-shirt order form using HTML only.
• Implemented HTML form validation (required, minlength=2, type=email).
• Used fieldset/legend for accessibility.

Learners, PR Template

• 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

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	0c342f9
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6981d0ee9eb72e0008db04e7
😎 Deploy Preview	https://deploy-preview-1113--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]

Code looks pretty solid. Just some minor changes needed.

• Currently Lighthouse Accessibility score is 93. Can you improve the score to 100?

Reason given by Lighthouse: Touch targets do not have sufficient size or spacing.

Feel free to use AI to help you figure out possible ways to tackle this issue.

[cjyuan]

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]

Note: You could consider wrapping the radio button input element inside the label element. This way, you don't need to use id and for attributes.

[mahmoudshaabo1984]

Hi CJ, I have updated the code to address your feedback. I used semantic HTML to increase touch targets for accessibility (targeting score 100) and added the name validation pattern. Ready for your review! Thanks.