London | 2-ITP-Sept | Hugh Mills| Sprint 1 | Form Controls - #1473
London | 2-ITP-Sept | Hugh Mills| Sprint 1 | Form Controls#1473HM-127BTY wants to merge 8 commits into
Conversation
Added name at end. done inputs for Size and corrections to colours.
✅ 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.
HM-127BTY
added
📅 Sprint 1
Luro91
added
the
Review in progress
There was a problem hiding this comment.
The lighthouse Accessibility score is below 100. How can you achieve 100?
There was a problem hiding this comment.
I see, i didn't have the labels matching id's on it, fixed that now.
There was a problem hiding this comment.
I see a different problem in lighthouse now: "Touch targets with sufficient size and spacing help users who may have difficulty targeting small controls to activate the targets"
There was a problem hiding this comment.
Fixed this by spacing them out with
and spaced out the submit and reset buttons with text ---
| <form> | ||
| <div> | ||
| <label for="name">Name:</label> | ||
| <input type="text" id="name" placeholder="Hugh Mills" pattern=".*\S.*\S.*." required> |
There was a problem hiding this comment.
The validation does not allow special characters like the German ä,ü,ö or Russian ед
There was a problem hiding this comment.
I didn't use any of those, and I can't see any text input that matches those, can you point it out for me?
There was a problem hiding this comment.
When I enter this string Är as name then it does not pass the validation although it is 2 characters
There was a problem hiding this comment.
Är would not work as it is one word when the input needs at least 2, it does also accept special characters as inputting "Är Är" works.
When checking it if "Ä r" it wasn't taking that but was taking "Ä Ä", checked it and seen that the pattern=".\S.\S.*." had an extra . by mistake and removed that.
| <label for="size">XL:</label> | ||
| <input type="radio" name="size" value="xl"> | ||
| <label for="size">XXL:</label> | ||
| <input type="radio" name="size" value="xxl"> |
There was a problem hiding this comment.
FYI: I would change the form types. Radio buttons are good if there are not to many options to choose from. Space on a web page is precious and for inputs with a lot of options, a dropdown can save a lot of space. (You don't need to change anything. This is just an information on the different input types)
There was a problem hiding this comment.
Thanks for the suggestion, ill have a look into that
Luro91
added
Reviewed
…alue to blue was white now changed to blue
HM-127BTY
added
the
Needs Review
Luro91
removed
the
Needs Review
HM-127BTY
added
the
Needs Review
2 participants
Learners, PR Template
Self checklist
CYF-1004
Added in code as instructed in the readme.md for Form Control.
added requirements for Name, Email, Colour and Size.
Added input buttons for Submit and Reset
Changed text at end to have my name.