Brussels | itp-2026-1 | Sarah Almadi | Week 2 |Feature/form controls

[sarahalmadi]

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

Used Semantic HTML based on MDN
Added inputs to my labels
Used 'Radio buttons' and option selection for colors and sizes
Added a footer with my name
checked the code validation

Questions

Ask any questions you have for your reviewer.

[talmurshidi]

@sarahalmadi , Nice start --- you've got the core controls in place (labels, radios, select, fieldsets). Now you need to align with the assignment requirements and fix HTML validity.

What You Did Well

• Good use of fieldset + legend to group related inputs.

• Size options are correct (XS, S, M, L, XL, XXL) and color is constrained to 3 radios.

Fix / Improve

1. Validate your HTML (you have a hard error)

You have <br>> (extra >), which makes your HTML invalid.

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

1. paste the full HTML

2. fix all errors it reports

3. re-check until you get 0 errors

This is required workflow when there are typos or tag issues.

2. Name validation: wrong minimum length

Requirement: valid name = 2 characters or more.
You used minlength="3". Change to:

<input type="text" id="name" name="name" required minlength="2" />

3. Remove fields that are not requested

The assignment explicitly says we already have address and charging details, and only need:

• name

• email

• color (3 options)

• size (6 options)

You added phone number + a pattern requirement. That's out of scope. Remove it.

4. Avoid <br> for layout

<br> is not for spacing/layout in forms. Group controls in containers (<div>) and format with VS Code.

Example pattern:

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

5. Accessibility/UX for size placeholder

Your placeholder option should be disabled so it can't be submitted:

<option value="" disabled selected>--Please pick an option--</option>

Commits feedback

You have 6 commits, but they read like "I did the steps" rather than meaningful increments. Prefer ~4 focused commits, for example:

1. add basic form structure

2. add name and email fields with validation

3. add colour radio group

4. add size select and submit button

Also: keep commit messages consistent (imperative verb + what changed).

Please fix the issues then push the changes to the same branch, no need to create a new PR, it will be updated automatically.