Belgium | ITP 2026 | Nema Nehme | Week 1 | Form Controls

[NemaJNema]

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

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Created a form with name, email, colour, and size fields.
All fields are required and validated.
Lighthouse Accessibility score is 100.

[talmurshidi]

@NemaJNema ,Nice work --- this is close and much more focused on the actual assignment.

What You Did Well

• You included the 4 required data points: name, email, colour, and size.

• Name validation is correct with required and minlength="2".

• Labels are associated correctly with inputs using for and id.

Fix / Improve

1. Missing semantic grouping (fieldset and legend)

You did not group related form controls using fieldset and legend.

For this assignment this is important for semantic HTML and accessibility, especially when grouping options like colour.

Example:

<fieldset>
  <legend>T-shirt colour</legend>

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

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

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

This clearly communicates that the options belong to the same group.

2. Size options must match the requirement exactly

The assignment requires:

• XS

• S

• M

• L

• XL

• XXL

You currently use:

• XS

• Small

• Medium

• Large

• XL

• XXL

Change them to:

<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>

3. Missing submit button

Your form cannot be submitted because it has no submit button.

Add:

<button type="submit">Submit</button>

4. Improve placeholder options in selects

Disable the placeholder option so it cannot be submitted.

Example:

<option value="" disabled selected>Select a color</option>

6. Validate your HTML

Before submitting, validate your markup:

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

Steps:

1. Paste the full HTML

2. Fix all reported errors

3. Re-validate until you get 0 errors

Also run Format Document in VS Code to fix indentation.

Commits Feedback

Your commit message:

Complete from controls assignment

Issues:

• typo (from → form)

• too vague

• only one commit

Prefer several small commits:

• Add name and email inputs

• Add colour options

• Add size select

• Add validation attributes

Summary

This submission is close but needs a revision:

• add semantic grouping with fieldset and legend
• fix the size labels
• add a submit button
• validate the HTML
• improve commit messages
• correct PR title Week 1 -> Week 2

After these changes the assignment will meet the requirements.

[NemaJNema]

Hi @talmurshidi,

I made the requested changes:

• Added fieldset and legend for semantic grouping
• Added div wrappers around form controls
• Added submit button
• Fixed size labels (S, M, L instead of Small, Medium, Large)
• Added disabled selected to placeholder options
• Validated HTML with 0 errors

Ready for review. Thank you!