Glasgow | ITP-MAY-2026 | Tuan Nguyen | Sprint 1 | Form control#1214
Glasgow | ITP-MAY-2026 | Tuan Nguyen | Sprint 1 | Form control#1214Jacknguyen4438 wants to merge 16 commits into
Conversation
…rror and update the code for better reading
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
| <label for="name">Customer name:</label> | ||
| <input type="text" id="name" name="name" required placeholder="john smith"> |
There was a problem hiding this comment.
A valid name is meant to have at least two characters or more. At the moment I can submit a name of "P" which doesn't follow our rules but is allowed by the form. Can you add validation to only allow 2 or more characters?
And can you communicate that rule if someone doesn't follow it?
There was a problem hiding this comment.
Thank for you for your feed back I will make the validation change and message you back
| <input type="email" id="email" name="email" required placeholder="example123@gmail.com"> | ||
| </div> | ||
| <br> | ||
| <fieldset> |
| <input type="radio" id="color-red" name="color" value="red" required> | ||
| <label for="color-red">Red</label> | ||
| <input type="radio" id="color-blue" name="color" value="blue" required> | ||
| <label for="color-blue">Blue</label> | ||
| <input type="radio" id="color-green" name="color" value="green" required> | ||
| <label for="color-green">Green</label> |
There was a problem hiding this comment.
As an extension on this - it's worth thinking about how we communicate information as easily as possible. When selecting colours, it's nice to also see the colour associated. One way to improve this more is to add a colour to the radio buttons here
There was a problem hiding this comment.
Thank you for your feed back, I will make this change and message you back when it done
| <legend>Pick a color of your choosing</legend> | ||
| <input type="radio" id="color-red" name="color" value="red" required> | ||
| <label for="color-red">Red</label> | ||
| <input type="radio" id="color-blue" name="color" value="blue" required> |
There was a problem hiding this comment.
A additional thought:
All of your tags have the name "color" but you could be even more descriptive about the data we create here. Imagining we use this color in a t-shirt order, we might have other colours we want to add in future for the "design" on the t-shirt. Worth thinking about labelling this colour more descriptively so people know this is associated with "t-shirt colour"
There was a problem hiding this comment.
Thank you for your feed back, I understand that is way of writing the code can send hard to understand data I will make correct change and message you back.
| <label for="size">Shirt size</label> | ||
| <select id="size" name="shirt 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.
Could wrap this in a fieldset tag too
There was a problem hiding this comment.
Thank you for the feed back, I will see which tags I can wrap this around and make change
| <div> | ||
| <br> | ||
| <label for="size">Shirt size</label> | ||
| <select id="size" name="shirt size" required> |
There was a problem hiding this comment.
Here you've demonstrated a good naming choice in the "name" tag, using "shirt size" describes this data accurately
| </select> | ||
| </div> | ||
| <br> | ||
| <button type="submit">Submit</button> |
There was a problem hiding this comment.
Demonstrates good practice by adding submit button
Poonam-raj
left a comment
There was a problem hiding this comment.
This is good work - largely fulfils the criteria of accessibility and requirements. Only remaining work - minimum character length of the name field
Note across your HTML: tags that contain multiple words (e.g. name tags in select menus) could be better as kebab-case as this is easier to use when we using tags to reference elements in CSS (in the future), and for better readability.
|
@Poonam-raj Thank you for your time on checking this PR I will make change need to be done and I will message you back when the done is completed. |

Learners, PR Template
Self checklist
Changelist
Hello and thank you for your time reading this PR, this one is a resubmission of this course work that I have finished doing Jan ITP and I would like to submit again for review here is the link of the old PR #1103 . If change need to make please let know.
Questions
No questions.