Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Receive an error message when the
form
is submitted if:- Any
input
field is empty. The message for this error should say "[Field Name] cannot be empty" - The email address is not formatted correctly (i.e. a correct email address should have this structure:
name@host.tld
). The message for this error should say "Looks like this is not an email"
- Any
- Challenge URL: Frontend Mentor
- Solution URL: https://github.com/NoaSalgado/Sign-Up-Form-Intro-Component
- Live Site URL: https://noasalgado.github.io/Sign-Up-Form-Intro-Component/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
With this challenge I learned and practiced about some basic form validations on the client side.
I also learned how to hide labels, by design requirement in an accesible way:
<label for="password" class="visually-hidden">Password</label>
.visually-hidden {
border-width: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
In future projects I would like to focus on learn and improving accessibility and especially accessibility in forms.
- HTML Inputs and Labels: A Love Story - This article helped me understand the importance of label elements for accessibility and how to hide them visually, but still be available to screen readers.
- Frontend Mentor - @NoaSalgado
- Twitter - @noasalgadodev