@tbensheimer
@AngAnda
Submitted
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?
@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
@jeevitha1123
Submitted
well, i found difficulty in hovering equilibrium image over another image and learnt a lot from this challenge. any suggestions and comments kindly welcome.
@tbensheimer
Posted
Hello and congrats on finishing this project! It looks great and very similar!
One thing to suggest is add a width of 100% to the main with the container class and also add a height of 100vh (viewport height) as well. This will allow you to cover the whole page with the dark background with no white background occurring. Doing this will also help you center the container to the middle of the page if you use flexbox. Adding justify-content: center and align-items: center to the main should center the panel. (I would recommend learning the difference between using content or items in flexbox) Keep in mind that once you center your panel, you may need to readjust your icon hovering the image since the position is absolute.
This project is a great accomplishment, keep up the good work!
Marked as helpful
