Skip to content
Submitted about 2 years ago

Signup Form Using CSS Grid and Javascript

DarkDev56•330
@dotfivesix
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any feedback is valuable, especially I want to know more about semantic html practices. Using regular <form> and <input type="email"> etc... gives some default results (like error box and message you get on invalid input) and I want to get rid of those ugly styles. I don't know how to do that so I had to use div tags, any suggestion ? Also how important is a form in terms of SEO ?

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi DarkDev56,

    Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

    • Forms with proper inputs and labels are much easier for people to use. To pair the label and input, one way is an explicit label’s for attribute value must match its input’s id value. Input fields without accompanying labels can lead to accessibility issues for those who rely on screen readers. If a screen reader comes across an input field without a label it will try to find some accompanying text to use as the label. (To hide the label visually but present for assistive technology, you may use sr-only class ).
    • The aria-live attribute is set on that error message class="error-textto make sure that error message will be presented to everyone, including it being read out to ** screen reader users**.
    • Really important to keep css specificity as low/flat as possible. It’s not recommended use the id's to target the DOM elements for styling purposes , using ID's creates problems due to the specificity , better to use class so that it could be more manageable and reusable.

    Hopefully this feedback helps.

    Marked as helpful
    1
    DarkDev56•330
    @dotfivesixPosted about 2 years ago

    @PhoenixDev22 Thanks for appreciating my solution and providing feedback. It means a lot to me and helps me a lot to improve ! I will take care of id and aria-live next time.

    1
    PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    @DarkDev56 Glad to hear that it was helpful . Happy coding

    1
  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Hello DarkDev congrats on finishing the challenge!

    First it impress me a lot that you used a div instead of a form then I came up and read up your solution comment and now I know why you did it!

    If you want to remove the default validation from your form you just have to use the novalidate prop on your <form> tag!, try using it and tell me how it goes, I want to see your solution with an actual form instead of a div!

    Hope my answer did help you!

    Marked as helpful
    1
    DarkDev56•330
    @dotfivesixPosted about 2 years ago

    @DavidMorgade Thanks for appreciating my work, that suggestion was really helpful, it fixed the issue and I can use <form> tag now. Thanks again !

    0

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