Hello,
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>
tags.
Example:
<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
label
tag. Just remember, thefor
attribute corresponds to the inputāsid
, so youāll have to add those as well. - Iād also suggest you change the cursor to
pointer
on 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 theirdisplay
property toblock
or 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<br>
.
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 :
Your 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.
@Senatrius is correct. Thank you for the help, @Senatrius.
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 </select>
the next issue I have is
the space between those paragraph and input ā¦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