Manchester | 26-ITP-Jan | Liban Jama | Sprint 2 | Form-Controls #1082
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
| </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?
| </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> | ||
| <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 ?
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.