ITP-2025-1 | Daniela Fajardo | Week 2 | form controls

[ldfajardo10-tech]

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

Change

just one commit
tested in lighthouse with 100 score

Questions

no questions

[talmurshidi]

Well done, @ldfajardo10-tech

What You Did Well

• Used a clear semantic page structure (<header>, <main>, <footer>).
• Divided the form into logical sections for readability — good use of <section> and headings.
• All form fields include labels and required attributes.
• Added minlength="2" to the name field — solid validation choice.
• Correctly used type="email" to ensure valid email entry.
• Included dropdowns for both color and size — simple and functional.
• No CSS or JavaScript used, which matches the task rules.

What Needs Improvement

• You added not related files to form control assignment.
• The <select> element should not include a type="color" attribute — remove it. (type is not valid for <select>).
• The form is missing a submit button (<button type="submit">Submit</button>) — required for testing and validation.
• Although <section> is acceptable, consider using <fieldset> with <legend> for form grouping — this improves accessibility for screen readers.
• The email field is missing a name="email" attribute — this is important for form data submission.
• Each <option> could start with a placeholder like "Select a color" or "Select a size" (disabled + selected) to prompt the user before choosing.
• Maintain consistent indentation and lowercase values for cleaner code style (see CodeYourFuture Style Guide).

Example Corrections

<!-- Fix the color dropdown -->
<fieldset>
  <legend>Choose a color:</legend>
  <select id="color" name="color" required>
    <option value="" disabled selected>Select a color</option>
    <option value="blue">Blue</option>
    <option value="pink">Pink</option>
    <option value="green">Green</option>
  </select>
</fieldset>

<!-- Add submit button at the end of the form -->
<button type="submit">Submit</button>