Sign Up form built using HTML, CSS, Javascript and Sass

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks fine, the form is just little shorter than the original, site is responsive and the mobile state looks great.

  Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .content-container should be using the main instead of div.
  • You don't need padding to center the content of .content-container, remove the padding and just add min-height: 100vh and let the flexbox center it properly.
  • To be honest, it would better if the error-messages are only shown when the form is submitted instead of using keyup event because you only want to show the errors if you submitted the form incorrectly , because right now, just focusing on the input then using like a backspace without text, error is already being shows.
  • Each input needs to have a label associated to it, the label would be a screen-reader only text, defining what the input needs to have.
  • Error-messages should have an id attribute since it will be referenced by the input if the input is wrong.
  • Each input should be using aria-invalid="true" if the input is wrong as well. A pseudocode looks like this:

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", id of the error-message);
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  By doing this, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy.

  • Here is a sample form snippet that I have. Lookup the markup and the js used in here, it is accessible and take note of the structure and attributes addition. You will also see a usage of aria-live in here that announces if a form is successfully submitted or if there is an error on the form.
  • button should have use type="submit" be specific on how your button will act especially when it is inside a form.
  • Adding a cursor: pointer to the button in desktop layout would be great.

  Aside from those ,great work again on this one and if you have any queries just drop it here okay.

  0
• 

  Al-Baraa Bakri•330

  @Al-Baraa-BakriPosted about 3 years ago

  Good Job :) I think there is no need to scroll on big screens.. More Smooth without this scroll .. And You Need To Fix ACCESSIBILITY ISSUES By use Landmarks. Keep Coding :)

  0