ITP-2026-1 | José López | Week 2 | 05 - Form Controls

[Skill4Code]

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.

[talmurshidi]

@Skill4Code , Strong submission. Structure is clear and requirements are mostly met. A few corrections will make this solid and production-ready.

What You Did Well

• Proper use of fieldset + legend for radio group.

• Email uses type="email" and required fields are in place.

• All required size options (XS--XXL) are present.

---

Fix / Improve

1. Name validation requirement not met

The requirement defines a valid name as minimum 2 characters.
You are missing:

minlength="2"

Fix:

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

---

2. Do not use <p> for layout grouping

<p> is for paragraphs of text --- not for layout containers. Replace all grouping <p> elements with <div>.

Example fix:

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

Do this everywhere you used <p> around inputs and the button.

---

3. Radio required usage

You placed required on all three radios.
Technically it works, but best practice is:

• Add required to only one radio in the group.

Example:

<input type="radio" id="Red" name="Colors" value="Red" required />

Remove required from the other two.

---

4. Accessibility / semantic refinement

Your structure is good, but:

• IDs like Red, Green, Blue should be lowercase (convention and consistency).

• name="Colors" → better lowercase (name="colors").

• name="T-shirt_size" → avoid hyphen in name value; use tshirt_size or size.

Consistency matters.

---

5. Size select UX improvement

Right now, XS is preselected by default.

Better pattern:

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

This forces the user to actively choose.

---

6. Validate your HTML

Before submitting:

1. Go to https://validator.w3.org/#validate_by_input

2. Paste full HTML

3. Fix all errors

4. Re-check until zero errors

This is mandatory workflow.

---

Commits Feedback

Your commit messages:

• submit button and required fields

• T-shirt information added

• Costumer information

Issues:

• "Costumer" is misspelled → Customer

• Messages should be consistent, imperative, and specific.

Better version:

• Add customer information section

• Add t-shirt information section

• Add required attributes and submit button

Aim for 3--4 clean, logical commits.

---

Overall

Technically close.
Main corrections:

• Replace <p> with <div>

• Add minlength="2"

• Clean radio required

• Improve select placeholder

• Run validator

Fix those and use same branch to push the changes.