Is there any part of the form that you would like feedback for?
Generally - try to be careful with your color selection. In the body of the survey form, it is difficult to read the black text on a dark-colored background.
And for the following section (line 80):
<textarea id="txt" rows="6" cols="40" name="comment" >Enter your comment here...</textarea>
You can try using the attribute
placeholder instead of putting in the placeholder text between the
<textarea id="txt" rows="6" cols="40" name="comment" placeholder="Enter your comment here..." ></textarea>
The advantage with this method is the users don’t need to delete the existing “Enter your comment here…” text when they want to type their comments.
(And I just realised that you’ve already used ‘placeholder’ as attribute for your other fields so it should be easy for you to implement this).
With that said, good work on completing the project and keep up the good work.
Apart from the great points made by @wanzulfikri, I’d just like to add a couple more things that you might want to consider:
- It’s a good accessibility practice to make the text for your checkbox and input options clickable by wrapping it in a
labeltag. Just remember, the
forattribute corresponds to the input’s
id, so you’ll have to add those as well.
- I’d also suggest you change the cursor to
pointeron your Submit button (it’s just a better user experience ).
- And try giving your page a bit of extra responsiveness by using a media query to expand the size of the entire form on smaller screens. For instance, it gets quite narrow on less that 500px, so you might add a break there and make the form wider and easier to read through.
- Finally, I’ve noticed that you used
<br>tags to make every input element sit on the next line. In general, you should try to accomplish this in CSS. If you want to make elements have their own line, set their
blockor use flexbox/grid on the parent container and then arrange the children elements in a column. This way, you have more control over how they’re positioned. Or, if you just want more space between elements, use padding or margin instead of
I hope this helps Congrats on passing the tests and good luck moving forward
Thank you so much when i try to
<textarea id="txt" rows="6" cols="40" name="comment" placeholder="Enter your comment here..." ></textarea> the output look like :
textarea opening tag doesn’t have
> at the end so it treats everything that comes after it as text for the field, not as html code.
Just fix that one small issue and that should do it.
And one thing that you should look out for is to put the
textarea tags side by side; this is a mistake I frequently make as well.
If you’ve added the missing
> bracket and the placeholder is still not being displayed, check the space between the two
textarea tags and remove all spaces.
Here’s a stackoverflow thread on the issue.
Yeah i fixed that issue…
Thank @wanzulfikri the link you shared helped me…
Ooopx i forgot to add a closing tag
the next issue I have is
This happens because you have
<p> elements inside
<label> elements, and paragraphs have a little bit of default top and bottom margin which you haven’t overwritten. Actually, you don’t really need
p tags here, you can wrap the text with just
label tags and it’s going to be OK. Be careful, though,
label is an inline element by default, so you’ll have to set it’s
display property to
block and then you can do whatever you want with its margin to adjust the spacing (side note: you could just as well remove the margin on those
p elements and achieve the same effect, but you don’t need them so it’s better to keep your code clean from redundant tags)
Hope this helps and happy coding