Manchester | 26-ITP-Jan | Liban Jama | Sprint 2 | Form-Controls#1082
Manchester | 26-ITP-Jan | Liban Jama | Sprint 2 | Form-Controls#1082libanj0161 wants to merge 3 commits intoCodeYourFuture:mainfrom
Conversation
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
libanj0161
added
📅 Sprint 2
| <input id="Extra Extra Large"type="radio" name="size" value="XXL" /> | ||
| <label for="Extra Extra Large">Extra Extra Large</label> <br> | ||
|
|
||
|
|
There was a problem hiding this comment.
How do we submit the form? is there an element to use to submit the form ?
| <br> | ||
|
|
||
| <p>Size</p> | ||
|
|
There was a problem hiding this comment.
well done for the good work.
just a few more things to do
can we use a dropdown menu () for the sizes ?
when should you use radio buttons and drop down menu ()
see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select
Form-Controls/index.html
Outdated
| </p> | ||
| <p> | ||
| <label for="mail">Email</label> | ||
| <input type="email" id="mail" name="user_email" /> |
There was a problem hiding this comment.
can we use a placeholder to guide the users?
can we check for a minlength too ?
is there a way to validate the inputs?
can we use an attribute for the validation?
Form-Controls/index.html
Outdated
| </p> | ||
| <p>Colour</p> | ||
|
|
||
| <label> |
There was a problem hiding this comment.
is there an attribute to associate the label with the radio button ?
takanocap
added
Reviewed
Form-Controls/index.html
Outdated
| <form> | ||
| <p> | ||
| <label for="name">Name</label> | ||
| <input type="text" id="name" name="user_name" /> |
There was a problem hiding this comment.
can we use a minlength and other attribute to validate or make sure the input is required ?
can we use the placeholder to guide the users ?
libanj0161
added
the
Needs Review
takanocap
removed
the
Needs Review
| <form> | ||
| <p> | ||
| <label for="name">Name</label> | ||
| <input type="text" id="name" name="user_name" placeholder="John Smith" required maxlength="18"/> |
There was a problem hiding this comment.
what happens if someone enters only 1 character ? example "w" what is the minimum expected length for name input ? can we use minlength for validation here ?
| <input type="email" id="email" name="user_email" placeholder="johnsmith@hotmail.com" required maxlength="32"/> | ||
| </p> |
There was a problem hiding this comment.
what happens when a user enters a@b as email? can we use minlength for validation ?
|
|
||
| <p>Size</p> | ||
|
|
||
| <label for="size">Size</label> |
There was a problem hiding this comment.
can we validate the form element to make sure users select a value?
| <p>Colour</p> | ||
|
|
||
| <label for="red"> | ||
| <input id="red" type="radio" name="colour" value="red" /> |
There was a problem hiding this comment.
when should you use a radio button vs select ? which is more appropriate in this scenario and why ? can you also validate this ?
2 participants
Self checklist
Changelist
I created a form to collect customer data. The form consists of their name, email, t-shirt colour and size. I used only HTML. All the inputs have labels they are associated with. I scored 100 in the Lighthouse Accessibility score. Their name and email has to be a valid one and they can only pick one colour and size out of the options given.
Questions
N/A.