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	5556d08
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6987aaacd65b950008f145d0
😎 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]

Good question 🙂
Radio buttons don’t strictly have to be inside a fieldset, but it’s considered best practice when they represent a group of related choices (like selecting one colour). The fieldset groups them semantically, and the legend acts as the label for the whole group, which helps screen readers understand the context.
Each radio button still has its own label, but the legend describes the question they all belong to.
So in cases like this, using a fieldset + legend is usually the most accessible approach, but it’s not required for the form to function.

Nice thinking about accessibility here 👍

[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 <p> 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.

[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]

I meant in general for typical HTML forms when you’re using type="email", browsers already provide built-in validation that covers most real-world cases. Because of that, adding a custom pattern is often unnecessary unless you have a very specific requirement to restrict the format further.

In future projects, you might choose to add one if there’s a clear reason, but it’s worth thinking about what additional validation you actually need before doing so.

[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

[XiaoQuark]

Hi, I was just wondering if your last comment means the pull request could be marked as complete or if I need to do more changes.
I'm a bit pressed as today's the last day for submitting step 1.

Please let me know.

Thank you
Kris

[iprithv]

Please check conflicts and validation and resolve it. otherwise LGTM 🚢

[XiaoQuark]

Thank you, I think I fixed it for now.
Apparently my Prettier was force formatting to all lowercase. I need to research this a bit so it doesn't happen again.