ITP-2026-1 | Michael English | Week 2 | Form Controls

[Eigo-G]

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

• I Need to make commits regularly during the process, for some reason I wait until the end and run into staging issues and commit isn't detailed enough.
• My form is semantic html
• All inputs have associated labels
• I require a valid name. I have defined a valid name as a text string of two characters or more.
• I require a valid email.
• I require one colour from a defined set of 3 colours.
• I require one size from a defined set of 6 sizes.

Questions

I'm still having trouble testing with Lighthouse on preview live server from Visual Studio Code.

[talmurshidi]

@Eigo-G ,Nice start --- you built a working form structure, but this submission does not match the assignment yet. The main issue is scope: you added many fields that were not requested.

What You Did Well

• You used native HTML form controls with required validation.

• Size is constrained to the 6 required options.

Fix / Improve

1. Remove fields that are out of scope

The assignment only asks for:

• customer name

• customer email

• t-shirt colour

• t-shirt size

You should remove:

• First Name / Last Name split

• Street Address & House Number

• City

• Postcode

• Phone Number

• Quantity

The instructions explicitly say the customer already has an account, so address and charging details are already known.

2. Name field does not match the requirement

The task asks for the customer's name as one field, not separate first and last name fields.

Use one input, for example:

<div>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required minlength="2" />
</div>

3. Colour options are wrong

The requirement says:

• exactly 3 options

• from a defined set

• user must not be able to choose other colours

You currently have 5 colour options. Reduce this to 3 only.

Also, for this assignment, radio buttons are better for colours. select can work, but radio is clearer when there are only 3 choices.

4. Missing semantic grouping with fieldset and legend

You did not use fieldset and legend to group related form controls.

For this assignment, that matters especially for the colour options. A radio group should be wrapped in a fieldset with a meaningful legend, for example:

<fieldset>
  <legend>Choose a colour</legend>

  <div>
    <input type="radio" id="red" name="colour" value="red" required />
    <label for="red">Red</label>
  </div>

  <div>
    <input type="radio" id="blue" name="colour" value="blue" />
    <label for="blue">Blue</label>
  </div>

  <div>
    <input type="radio" id="green" name="colour" value="green" />
    <label for="green">Green</label>
  </div>
</fieldset>

This is better semantically and for accessibility.

5. Add proper id + for associations

You wrapped inputs inside labels, which is valid, but for beginner clarity and maintainability it is better to use:

• label for="..."

• matching input id="..."

That makes association explicit.

6. Invalid HTML structure

You have extra closing </div> tags near the bottom. Your nesting is broken.

Use https://validator.w3.org/#validate_by_input:

1. paste the full HTML

2. fix all reported errors

3. validate again until you get 0 errors

Also run Format Document in VS Code after fixing the structure.

Unrelated files in PR

You included:

• Form-Controls/README.md

• Module-Onboarding

These are not part of the assignment and should be removed from the PR.

If the file already exists in main and was edited by mistake

Restore it from main:

git fetch origin
git restore --source=origin/main -- Form-Controls/README.md
git commit -m "Revert unrelated README.md file changes"
git push

If a completely new unrelated file was added

Remove it from the branch:

git rm ../Module-Onboarding
git commit -m "Remove unrelated file"
git push

The PR updates automatically. No new PR is needed.

Commits feedback

Your commit messages are too vague:

• changed text <h1>

• checked off completed tasks

Use clearer commit messages like:

• Update page heading

• Add form fields for name and email

• Add size select field

• Add colour options

• Fix HTML validation errors

This needs a revision before it meets the assignment:

• reduce the form to the required 4 data points

• use one name field

• reduce colour choices to 3

• add semantic grouping with fieldset and legend

• fix invalid HTML with the validator

• remove unrelated files from the PR

[Eigo-G]

Hi Tam, Thank you so much for your feedback… yes, I was having a little fun with this and went way outside of what the exercise called for. I really appreciate the examples you provided, it’s very clear and helpful. I’m working on them now. I believe when I added this assignment to VSC I moved the entire local folder and that was why there was many other documents here. I’ll play around with trying to remove the additional information from the branch. Once again, thank you for your time and help, it’s much appreciated! Enjoy the weeken! me Michael English +32 470 91 85 48 <+32+470+91+85+48>

…

Sent from my iPhone

On Sat, Mar 7, 2026 at 11:29 Tam Almur ***@***.***> wrote: *talmurshidi* left a comment (HackYourFutureBelgium/Module-Onboarding#92) <#92 (comment)> @Eigo-G <https://github.com/Eigo-G> ,Nice start --- you built a working form structure, but this submission does *not match the assignment* yet. The main issue is scope: you added many fields that were not requested. What You Did Well - You used native HTML form controls with required validation. - Size is constrained to the 6 required options. Fix / Improve 1. Remove fields that are out of scope The assignment only asks for: - customer name - customer email - t-shirt colour - t-shirt size You should *remove*: - First Name / Last Name split - Street Address & House Number - City - Postcode - Phone Number - Quantity The instructions explicitly say the customer already has an account, so address and charging details are already known. 2. Name field does not match the requirement The task asks for *the customer's name* as one field, not separate first and last name fields. Use one input, for example: <div> <label for="name">Name</label> <input type="text" id="name" name="name" required minlength="2" /> </div> 3. Colour options are wrong The requirement says: - exactly *3 options* - from a *defined set* - user must not be able to choose other colours You currently have *5 colour options*. Reduce this to 3 only. Also, for this assignment, *radio buttons are better for colours*. select can work, but radio is clearer when there are only 3 choices. 4. Missing semantic grouping with fieldset and legend You did not use fieldset and legend to group related form controls. For this assignment, that matters especially for the *colour options*. A radio group should be wrapped in a fieldset with a meaningful legend, for example: <fieldset> <legend>Choose a colour</legend> <div> <input type="radio" id="red" name="colour" value="red" required /> <label for="red">Red</label> </div> <div> <input type="radio" id="blue" name="colour" value="blue" /> <label for="blue">Blue</label> </div> <div> <input type="radio" id="green" name="colour" value="green" /> <label for="green">Green</label> </div> </fieldset> This is better semantically and for accessibility. 5. Add proper id + for associations You wrapped inputs inside labels, which is valid, but for beginner clarity and maintainability it is better to use: - label for="..." - matching input id="..." That makes association explicit. 6. Invalid HTML structure You have extra closing </div> tags near the bottom. Your nesting is broken. Use *https://validator.w3.org/#validate_by_input <https://validator.w3.org/#validate_by_input>*: 1. paste the full HTML 2. fix all reported errors 3. validate again until you get *0 errors* Also run *Format Document* in VS Code after fixing the structure. Unrelated files in PR You included: - Form-Controls/README.md - Module-Onboarding These are not part of the assignment and should be removed from the PR. If the file already exists in main and was edited by mistake Restore it from main: git fetch origin git restore --source=origin/main -- Form-Controls/README.md git commit -m "Revert unrelated README.md file changes" git push If a completely new unrelated file was added Remove it from the branch: git rm ../Module-Onboarding git commit -m "Remove unrelated file" git push The PR updates automatically. No new PR is needed. Commits feedback Your commit messages are too vague: - changed text <h1> - checked off completed tasks Use clearer commit messages like: - Update page heading - Add form fields for name and email - Add size select field - Add colour options - Fix HTML validation errors This needs a revision before it meets the assignment: - reduce the form to the required 4 data points - use one name field - reduce colour choices to 3 - add semantic grouping with fieldset and legend - fix invalid HTML with the validator - remove unrelated files from the PR — Reply to this email directly, view it on GitHub <#92 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B3OEOY2ZVZT67ZZLH25HWPL4PP2YLAVCNFSM6AAAAACWEUJTC6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DAMJWGE4TSNRQGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>