LONDON | CHAITRA SHETTY | Module-User-Focused-Data | WEEK 2 #310
Conversation
✅ Deploy Preview for cyf-ufd ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
- May I suggest using a HTML validator (https://validator.w3.org/) to check for potential errors in your HTML code?
- What is the Lighthouse accessibility score you got from your Chrome browser? Mine indicates there is still room for improvement.
- Not all input elements meet this acceptance criteria: " I show which element is focused."
Form-Controls/index.html
Outdated
| required | ||
| minlength="3" | ||
| maxlength="40" |
There was a problem hiding this comment.
This is not required, but if you were also told, a name must contain at least two non-space characters. how would you enforce that?
There was a problem hiding this comment.
@cjyuan okay, thanks. If the name must contain at least 2 characters then I would add attribute minlength= "2"
| <div class="input"> | ||
| <label for="XS">XS</label> | ||
| <input type="radio" name="tshirtSize" id="XS" value="XS" required /> |
There was a problem hiding this comment.
Any reason you chose to use radio buttons for size and drop-down list for colors? They both allow a user to select one item, but when should one use radio buttons and when should one use drop-down list?
There was a problem hiding this comment.
@cjyuan I chose radio buttons for size and a dropdown for colors primarily for visual impact. Using a dropdown allows the color values to be displayed clearly, making it easy for the user to select. Additionally, radio buttons work well for sizes since they restrict selection to a single option
| <label for="tshirtColor">T-shirt Color</label> | ||
| <select name="tshirtColor" id="tshirtColor" required> | ||
| <option value="Black">Black</option> |
There was a problem hiding this comment.
There is an approach to not select a default value from the list so that the user is always required to explicitly select an item from the list. This way, we can ensure the user is aware of the choices.
There was a problem hiding this comment.
@cjyuan yes, we can achieve it by using a placeholder option like' select a color' so that the user can explicitly select the color.
cjyuan
added
Reviewed
|
I have made the necessary changes, Could you please review it? Thanks for your time |
Chaitra-Shetty
added
Needs Review
Learners, PR Template
Self checklist
Changelist
Briefly explain your PR.
This PR creates a valid HTML customer form with the following features:
Questions
Ask any questions you have for your reviewer.