Manchester | 26-ITP-May| Abid Akhtar| Sprint 1| Form Controls#1358
Manchester | 26-ITP-May| Abid Akhtar| Sprint 1| Form Controls#1358AbidAkhtar-tech wants to merge 8 commits into
Conversation
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
AbidAkhtar-tech
added
the
Needs Review
| <label for="username">Name</label> | ||
| <input type="text" id="username" minlength="2" required autocomplete="name"> |
There was a problem hiding this comment.
Can you update this input element so that it can reject name containing only space characters? For example, " " (a string made up of two space characters)?
Note:
Your branch is one commit behind the upstream repo (CYF's main). If you use the "Sync fork" feature on your repo on GitHub to update your branch, you will find in the README.md of this exercise a regular expression that can be used to enforce "name contains at least two non-space characters".
| <legend>Choose a colour</legend> | ||
|
|
||
| <label for="red">Red</label> | ||
| <input type="radio" id="red" name="colour" value="red" required> |
There was a problem hiding this comment.
Could consider enclosing <input> within <label> as:
<label>Red
<input type="radio" name="colour" value="red" required>
</label>
This way, you don't have to introduce id to every radio button.
| <!-- | ||
| try writing out the requirements first as comments | ||
| this will also help you fill in your PR message later--> |
There was a problem hiding this comment.
Feel free to delete any unnecessary code to keep your code base clean.
There was a problem hiding this comment.
Hi cjyuan,
Thank you for the feedback. I have now:
-
Added the suggested regex
pattern=".*\S.*\S.*"to ensure the name contains at least two non-space characters. -
Updated the colour radio buttons to wrap the inputs inside their labels as suggested.
-
The changes have been committed and pushed to this PR. I'd appreciate another review when you have time.
Thanks!
cjyuan
added
Reviewed
|
Thank You for the feedback! I will fix the typo. |
AbidAkhtar-tech
added
Needs Review
cjyuan
left a comment
cjyuan
left a comment
There was a problem hiding this comment.
Changes look good.
If you haven't yet enabled "Format on save" on VS Code, consider following this guide to enable VS Code's "Format on Save" option or to use its "Format Document" command to ensure your code is always consistently formatted.
| <label> | ||
| Red | ||
| <input type="radio" name="colour" value="red" required> | ||
| </label> |
There was a problem hiding this comment.
Have you wondered whether the text should appear on the left or on the right of the radio button?
Do use an AI tool to research the advantages and disadvantages of placing radio buttons on the left versus the right of their corresponding labels.
No change required.
cjyuan
added
Complete
2 participants
Self-Checklist
Changes
This PR adds an accessible T-shirt order form using semantic HTML and CSS.