Sign-Up Form Component Using HTML, CSS and Vanilla JS

Community feedback

• 

  Katie•405

  @kem522Posted over 3 years ago

  Good work!

  I believe the form changes size when someone deletes any value from the input fields because of the error message that shows up - it's positioning is messing with the document flow and shifting things around.

  Instead of positioning the error messages relative to the inputs, you could wrap both the input and associated error span in a div:

  <div class="input-wrapper">
      <input class="form-input" type="text" name="first" placeholder="First Name" required>
          <span class="error"></span>
  </div>
  

  Then they are semantically associated with one another and they will be stacked on top of one another without any extra CSS, the CSS for the error class would be something like:

  .class {
      width: 100%;
      padding: 0;
      font-size: 80%;
      color: #f00;
      display: inline-block;
      text-align: left;
  }
  

  Hope that makes sense!

  Marked as helpful

  1

  ---

  

  P

  Skyz Walker•1,045

  @Skyz03Posted over 3 years ago

  @kem522 Thanks for the great feedback it worked out

  0
• 

  Talha•120

  @TalhaAmjad0034Posted over 3 years ago

  You should add padding to main section so that interactivity don't effect the outer area. Don't let it grow on its own add some margin and padding to outer the main section. 😀

  Stop user to add bunch of blanck spaces to verify that name field and include 6 or 8 characters for password validity. 🙂

  Good Work! Keep coding!! 💝

  1