Issues with Label elements

Hi I hope you can help me. I have finished my survey form and I ran the html code through a validator.

The main issue is that it says p elements (for Name and email and number) are not allowed inside a label element. However if I remove the p element the text moves too close to the input box.

Any ideas on how to keep the style I currently have without using the p elements? I have tried styling the label elements but this doesn’t seem to do anything.


You already have a .labels class you can use. Set it to display: block and use some margin-bottom.

.labels {
  display: block;
  margin-bottom: 0.5rem;

  • You should use labels for the checkbox and radio inputs as well.

  • I would suggest making the input 100% wide so they line up with the labels.

Ok thanks i will try that!

Should I make labels for each individual checkbox instead of the p elements?

I guess I am not really sure about the purpose of a label element. What does it do?


Yes, you should.

Thanks for your help I have fixed it now!

Looks good.

I would give the checkbox and radio inputs a bit of margin-right and add resize: vertical to the textarea (allow only vertical resizing by the user).

Good job, keep it up.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.