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 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 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	385841d
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6984c86e7b2d0d0008879fb2
😎 Deploy Preview	https://deploy-preview-1140--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.

[iprithv]

We can make this, <legend>Please select a colour *</legend>

Screen readers announce legends, not surrounding text.

[XiaoQuark]

I will do that, thank you. I just have a question: does it mean that radio buttons should always be inside a fieldset? Because I don't think I can create a "group" label, only one for each input. Unless there's another trick I could not find.

[iprithv]

The <p> is not needed.

pattern like below is not needed,

<li>
  <p>
    <input>
    <label>
  </p>
</li>

we can have cleaner,

<li>
  <input>
  <label>
</li>

this goes to some places on top as well

[XiaoQuark]

Absolutely agree. I wouldn't normally add a

inside a list item, but Lighthouse was not happy with the list's tiny spacing, and, because I could not use CSS, I tried to improvise.
So now I'm not sure if I can remove them or leave forever.

[iprithv]

\a is invalid inside character class
Browsers already validate emails using: type="email"

you can remove the pattern completely
<input type="email" ... required />

[XiaoQuark]

Ops, that was a missed typo. I've corrected it now, thank you

[XiaoQuark]

When you say remove the pattern do you mean for this specific sprint or in general?

[iprithv]

Above are suggestions. Other than that this submission meets the expected learning outcomes for the exercise.
It demonstrates understanding of form structure and validation fundamentals, and shows readiness to continue progressing through the module. Nice work @XiaoQuark