Design comparison
SolutionDesign
Solution retrospective
Hello my fellow developers this is my solution to the intro-component-with-signup-form challenge. This project has helped me delve more into form validation and I also tried my best to match the design. Please feel free to criticize my code on GitHub (https://github.com/kimanthigregory/sign-up-form.git). Your feedback will be very helpful in my continued development. Happy coding everyone.
Community feedback
- @pRicard0Posted about 1 year ago
Some HTML tips
- Everything inside the form should be wrapped inside a
<fieldset>which will have a<legend>that is visually hidden using CSS. The legend tag is like the label of the form. - The error message is invisible but auxiliary devices can still read it. The message must contain
aria-hidden="true" - The input must contain
aria-invalid. It is used to indicate whether the value of an input field or form control is valid or invalid for the user. You should update the value using Javascript. aria-invalid should be true or false. - You should use
aria-describedby. Thearia-describedbyattribute lists the ids of the elements that describe the object. It is used to establish a relationship between widgets or groups and the text that describes them. In short, it is used to associate the input with the error message in this case.
0@kimanthigregoryPosted about 1 year ago@pRicard0 thanks for the feedback I will work on the suggested changes
0 - Everything inside the form should be wrapped inside a
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord