Newsletter sign-up form - HTML / CSS / JS ( JQuery )

Community feedback

• 

  P. Ricardo•2,370

  @pRicard0Posted about 1 year ago

  HTML tip

  • You shouldn't use a div with the class "email-container". You should use the tag <form> instead.
  • The button must be a form submission button, so... type="submit"

  I think that's all. I think the <legend> tag for the form is not necessary.

  Marked as helpful

  0

  ---

  

  Antonain E.•220

  @antoebtfrPosted about 1 year ago

  Thanks for your feedback, @pRicard0 !

  Yes, I agree for the type="submit". I changed that because I didn't want the page to submit/reload every time we press "Enter" but I set it up in JS so yes I corrected it.

  Concerning the "email-container" div, we are already in the "newsletter-form" form so it would have been a duplicate form..

  and I didn't understand for <legend> tag because there is no legend tag in my code

  EDIT : I have to let the type="button" because as I set up my success modal as a DOM modification and not as an other html page I can't access to it with type="submit"

  1

  

  P. Ricardo•2,370

  @pRicard0Posted about 1 year ago

  @antoebtfr

  • Sorry, I didn't see your form tag, this is because it is recommended that the form tag only wraps tags related to the form such as input, label, error messages.

  • About the legend tag, I must have gotten confused with another project, you did the right thing.

  • About the button, it is possible to achieve the same result with type="submit". An example would be using the onsubmit attribute on the form.

  It seems like I didn't help you much so... I'll tell you more things, I hope this helps

  • The error message is invisible but auxiliary devices can still read it. The message must contain aria-hidden="true" and you can change this with JS
  • The input must contain aria-invalid. It is used to indicate whether the value of an input field or form control is valid or invalid for the user. You should update the value using Javascript. aria-invalid should be true or false.
  • You should use aria-describedby. The aria-describedby attribute lists the ids of the elements that describe the object. It is used to establish a relationship between widgets or groups and the text that describes them. In short, it is used to associate the input with the error message in this case.

  Marked as helpful

  0