Issues with Label elements

HTML-CSS
1

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.

https://codepen.io/clare1950/pen/vYxJdqe

Thanks!
Clare

2

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.

3

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?

Thanks!
Clare

4

Yes, you should.

5

Thanks for your help I have fixed it now!

https://codepen.io/clare1950/pen/vYxJdqe

6

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.

7

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