Manchester | 26-ITP-Sep | Rahana Suleiman | Sprint 1 | Form Controls

[rahanasuleiman8-ship-it]

Learners, PR Template
Self checklist

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

Task code
CYF-1004

Changelist
Built a semantic HTML form to collect T-shirt order details without using JavaScript.

Added a required name input featuring the regex pattern .*\S.*\S.* to enforce a minimum of two non-space characters.

Included a required email input field.

Added a required colour dropdown with the 3 required colour options.

Added a required size dropdown with the 6 required sizes: XS, S, M, L, XL, and XXL.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	03a96d4
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6aa56c09092f3b00083f3706
😎 Deploy Preview	https://deploy-preview-1508--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: 86 (no change from production) PWA: - View the detailed breakdown and full score reports
🤖 Make changes	Run an agent on this branch

---

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

[Liam310]

It's good to write out your TODOs in comments as you're going along, but anything that is used as a tool for development can be removed once that development is done! Same applies to the other comments too 🙂

[Liam310]

I can see you've used br a lot here to create space between the different form elements. This is a neat trick, but is actually not what it is supposed to be used for. To quote MDN:

The <br> element has a single, well-defined purpose — to create a line break in a block of text.

If you are adding spacing between elements on a page, that's exactly what CSS is for. Shortcuts like this can seem useful but they run the risk of causing unexpected confusion for assistive technologies when used out of place!

Note: styling is not required for this task. I'm not going to require you to change anything on this point, but bear in mind for future that you should avoid using br tags for this reason 🙂

[Liam310]

I love the creative choices of colours! 😄

[Liam310]

Hey @rahanasuleiman8-ship-it! Good work on this first PR. All the form validation works exactly as intended, and I like the good practice of your git commit history too: avoiding committing everything in one go and writing meaningful messages! A very minor point: using commit messages are written in the future tense - you can imagine saying the words "this commit will..." followed by your message. So instead of **Added** the submit button it'd be **Add the submit button**. In general great job though!

The only change I want you to make before I mark it as complete is getting rid of the TODO comments in the HTML. It's no longer todo - it's done!

You may also want to explore the CSS alternatives to using br to create linebreaks, but this isn't essential for finishing this coursework. If you do look into it, I'd recommend reading about flexbox and trying to see how to get all your form elements into a neat column!