Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro component with sign-up form

@AngAnda

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Build this sign-up form using html, scss and vanilla Javascript.

Instead of using a submit input, I've used a button input. Is this an issue when submitting a form in a real life application?

Also, when using a screen reader the only element from the right side of the screen that is read is the "Terms and Conditions" paragraph.

Why does this happen and how could I solve it?

Community feedback

@tbensheimer

Posted

Hello and congrats on completing this project! It looks great! I wanted to mention a few things.

To answer your question about the button. I don't think it is an issue since I have also used a button for form submissions. For my example, I used <button type="submit"...> to use a button to submit forms.

Another thing I wanted to mention is <form action=' '> must not be empty since it causes html issues. Instead of leaving it empty, use the '/' to fill the action since that won't do anything when the form is submitted.

When using <label for....> to label inputs, make sure the for="..." matches the ID of the input. For example <label for="sub"> <input id="sub" > would be considered good coding practice.

Finally, the last thing I wanted to mention is for your terms and service html structure, you can get rid of the <p> and </p> elements since it's not allowed inside the <sub> element. One alternative is to get rid of the <sub> element and leave the <p> element as is.

I am still currently learning more about screenreaders and how to improve its accessibility so I am not quite sure why the screenreader is only reading the terms and conditions paragraph. I do wish you best of luck on how to solve that issue!

Marked as helpful

1

@AngAnda

Posted

Thank your for such a detailed answer! I've learned quite a few new things from it which I will try to add to my code.

As for the screen reader issue, it seems to have been my fault for not using the software properly.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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