Survey Form - Problem with checkbox

HTML-CSS
1

Hi, I have two problems with the checkbox:
1- I can’t pass this test: “All your checkboxes inside #survey-form should have a value attribute and value.”
2- I don’t know how I can’t arrange the checkbox and radio inputs.

My code is here:

I’m not an english speaker, so If you don’t understand my doubt, I can try to explain again.

Thank you!

2

hi there, you have multiple syntax errors that need to be fixed.

Please copy your code to this online html validator

Then fix all the errors reported to you.

1 Like
3

You should give each input element its own label container.

Setting width to 100% on all input elements is going to cause issues. Target the specific elements that need the width.

1 Like
4

I didn’t know about this tool. Thank you, I already fixed all errors.

But I still have the same issues that I say before.

5

The only test that is failing for me with your new code is this one.

All your radio buttons should have a name attribute and value.

6

Yes, but I don’t know how to fix it. My radio buttons already have a name attribute and value. I need help to find what in my code is wrong.

7

You should have been shown how to create radio/checkbox groups using the name attribute in the “Building a Registration Form” challenge. Giving the elements the same name will group them.

In your code, I don’t see a name attribute.

<label for="definitely"><input id="definitely" type="radio" value="definitely" class="inline" /> Definitely</label>
<label for="maybe"><input id="maybe" type="radio" value="maybe" class="inline" /> Maybe</label>
<label for="not-sure"><input id="not-sure" type="radio" value="not-sure" class="inline" /> Not sure</label>
1 Like
8

Thank you, it worked. I just want to improve my CSS code, because my checkbox and radios buttons aren’t “aligned”.

9

As I said, you can’t do this…

input, textarea, select{
  width: 100%;
  margin: 10px 0 0 0;
  min-height: 1em;
}

You need to target the specific input elements that need to be 100% wide, not all of them.

If you remove the width: 100% you can see the radio and checkbox inputs align. Now you just need to target the other input elements that have to be 100% wide.

1 Like
10

I just put width: unset in radio and checkbox and it worked. Thank you very much!

11

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