Skip to content
Submitted about 3 years ago

Sign up form

Bazthos•430
@Bazthos
A solution to the Intro component with sign-up form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

First exercise on HTML forms and their use with JS.

What I got from this project :

  • Using several functions to clarify my code and decrease the writing of it;
  • Use of regular expressions and first thoughts on data validation;
  • First experience on event propagation with preventDefault();

I used very simple regular expressions for the validation of the mail, if you have any advice to improve it I'm interested!

Good continuation

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Bazthos! 👋

    Well done on this challenge! Your solution looks great! 👍 It's nice that you have a hidden h1 on this site (if this is a real website the h1 would exist somewhere else on the page).

    Regarding the RegEx for the email, I recommend searching the RegEx on the internet, and then once you find the one that almost works for you (it's hard to find to exact or "perfect" RegEx right away) then try improving the existing RegEx. I suggest using Regexr to help you understand what the RegEx is doing and at the same time learn RegEx and improve it as best as you can. This way, you ended up learning RegEx and possibly creating your own RegEx.

    Now, some suggestions from me.

    • input with type="submit" is a browser legacy. So, my recommendation is to use button with type="submit" instead. Also, use CSS to uppercase the text. Uppercased text in HTML would more likely be spelled by screen readers.
    • Every input needs a label element. So, I recommend having a sr-only label or even better (in my opinion) is to make the label as a placeholder (you can read this article by CSS Tricks about Form Validation with pure HTML and CSS).

    Keep up the good work! 👍

    Marked as helpful
  • Ivan•2,610
    @isprutfromua

    Hi there. You did a good job 😎

    keep improving your programming skills🛠️

    your solution looks great, however, if you want to improve it, you can follow these recommendation:

    ✅ Keep using HTML5 validation attributes (required, minLength, pattern etc).

    ✅ Don’t re-implement stuff HTML5 attributes can do for us (no unnecessary JS).

    ✅ Follow a consistent HTML format. It is important to remain consistent in your HTML style. You can use prettier to help you with that but the goal is to always follow a consistent way you code your markup.

    I hope my feedback will be helpful. You can mark it as useful if so 👍 it is not difficult for you, but I understand that my efforts have been appreciated

    Good luck and fun coding 🤝⌨️

    Marked as helpful

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