Brussels | ITP | Nik | Week 2 | Form Controls

[bezdzenariy]

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

[x] Completed SQL assignment in Google Sheets (link included).

Changelist
Created a semantic HTML form for T-shirt orders.

Added input fields for Name and Email with validation.

Included 3 color options using radio buttons.

Included 6 size options using a dropdown menu.

Ensured 100% Lighthouse Accessibility score.

SQL Assignment (Google Sheets): https://docs.google.com/spreadsheets/d/1sPD2xnJ3t41JcWO118he3c_5lWJkRUh_pd8bxQo7jDw/edit?gid=223562619#gid=223562619

[talmurshidi]

@bezdzenariy , Nice work --- this is very close and meets the core requirements.

What You Did Well

• Good semantic choices: fieldset + legend for the colour radios.

• Validation is in place (required, minlength="2", type="email"), and labels are correctly associated.

Fix / Improve

• Formatting/indentation: Your <form> contents are not consistently indented (the <form> tag is flush-left while inner elements jump). In VS Code, run Format Document so the structure is clean and readable.

• Radio group structure: Put each radio + label pair on its own line (or wrap each pair in a <div>). It improves readability and makes future layout changes easier.

• Name field clarity: You used "Full Name" which is fine, but the requirement says "customer's name." Keep either, but be consistent in naming:

  • name="full-name" is okay, but name="name" is simpler and more standard.

• Commit quality: You currently have 2 commits, but the expectation is around 4 meaningful commits. Break work into steps, for example:

  1. scaffold HTML page + form skeleton

  2. add name/email with validation

  3. add colour radios + fieldset/legend

  4. add size select + submit + footer update

• Markdown notes for this PR

  • is wrong without - -> - [ ]
  • You can leave it - [ ] empty then you can click on it when you create PR.

  Please fix it then the assignment is done

[bezdzenariy]

Hi @talmurshidi! I've updated the form structure: added fieldset/legend, wrapped radio buttons in div tags for better alignment, and fixed the indentation. Everything should be clean now. Thanks for your patience!

[talmurshidi]

Do not use <p> for layout grouping

You wrapped inputs in <p> elements. <p> is for paragraphs of text, not layout containers.

Replace with <div>:

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

Do this for all form groups.