Here is my survey form: https://codepen.io/urvashi965/full/wRqBLQ
Feel free to give feedback/suggestions.
So there are a few questionable things in here. The page itself looks good, from the design view, but the implementation is questionable. Here’s an example of what I mean:
<div class="labels"> <label id="name-label">Name: </div> <input id="name" type="text" required placeholder="Full Name" class="input"> </label> <br><br>
This is taken from your code. The issue here is this: any element nested within another, should be completely nested. The
<label> tag opens in the
<div class="label">, but closes outside of it. This will not make some language parsers (for example, screen readers) happy. Instead, do something like this:
<div class="labels"> <label for="name" id="name-label">Name:</label> </div> <input id="name" name="name" type="text" required placeholder="Full Name" class="input"> <br><br>
Or, even cleaner:
<label for="name" id="name-label">Name:</label> <input id="name" name="name" type="text" required placeholder="Full Name" class="input">
Here’s a rule I find OFTEN applies (not always, but often): If a tag contains a single tag element, you likely don’t need one of the two. So you can get rid of that
div tag that wraps the
label, it is redundant.
In the same way, you wrap the entire
form element in a
div. That, too, is unnecessary. Apply any style to the form itself, just as you would its containing div.
And I can see you like having the labels wrapped, so you can do the whole “left-column/right-column” thing, but you can do that using a grid layout applied to the form element.
Another thing, I don’t really advise using
<br> tags – you can do the same with CSS spacing, and it will make for cleaner HTML.
Again, the code you have is presenting visually exactly as you want it, and it’s passing all the tests – but if you put this in a portfolio and show it to a prospective employer, they aren’t doing their job if they miss pointing things like this out.
Thank you for your feedback and suggestions. I will make a note of these things and will try to improve them in my next page.