Your contribution to this survey form will be highly appreciate

1 Like

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, the for attribute corresponds to the input’s id, 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 :slight_smile: ).
  • 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 display property to block 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 :slight_smile: Congrats on passing the tests and good luck moving forward :smiley:

1 Like

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 :

so how can I fix that issue?

1 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.
close_tag
Just fix that one small issue and that should do it.

2 Likes

@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.

1 Like

Yeah i fixed that issue…

Thank @wanzulfikri the link you shared helped me… :clap::smiley:

I need to fix that issue but i don’t know where the problem is
Capture1

I don’t see the paragraph :disappointed_relieved: :point_right:

Ooopx i forgot to add a closing tag </select> Capture1

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 :slight_smile: (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 :smiley: