London | 26-ITP-Jan | Oussama Mouggal | Sprint 2| Form-controls #1009
Conversation
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Oussama-Mouggal
added
📅 Sprint 2
There was a problem hiding this comment.
Pull request overview
This PR implements a basic T-shirt e-store form using HTML with client-side validation. The form collects customer information (name and email) along with product preferences (color and size) and validates required fields before submission.
Changes:
- Added form inputs for name (with pattern validation) and email (with type validation)
- Implemented radio button group for color selection (black, blue, red)
- Added dropdown select menu for size selection (XS through XXL)
- Updated footer with student name
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? | ||
| What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL | ||
| All fields are required. Do not write a form action for this project.--> | ||
| </form> |
There was a problem hiding this comment.
Duplicate closing form tag detected. The form is already closed on line 52, so this closing tag should be removed to avoid invalid HTML structure.
| </form> |
| <br /><br /> | ||
| <fieldset> | ||
| <legend>Please select a color:</legend> | ||
| <input type="radio" id="black" name="color" value="black" /> |
There was a problem hiding this comment.
The radio buttons for color selection should have the required attribute to enforce that users make a selection. Since all fields are required per the specification, at least one radio button in the group should be marked as required to ensure a color is selected before form submission.
| <input type="radio" id="black" name="color" value="black" /> | |
| <input type="radio" id="black" name="color" value="black" required /> |
| <select id="size" name="size" required> | ||
| <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> | ||
| </select> |
There was a problem hiding this comment.
The size dropdown should include a default placeholder option to ensure users actively select a size. Consider adding a first option like "Select a size" with an empty value and the disabled and selected attributes, so that the required attribute properly enforces selection.
|
@copilot open a new pull request to apply changes based on the comments in this thread |
1 participant
Self checklist
Changelist
A basic T-shirt e-store based on html only, where form won't be submitted unless email and name are entered correctly based on the required form.