SURVEY FORM checkbox error

As i finished with the project, i decided to test it and this thing keeps telling me I have errors with checkbox…please help out. PS My code is a bit disorganized because I was trying to solve for the checkbox, any help would be appreciated… This is the link, thanks in advance.

https://codepen.io/sammyfak/pen/NLZBZa

Looks like there is an orphan </div> in your radio button section. It’s attempting to close with the topmost div so it throws off the whole form from the radio buttons on down.

Just read the comment below… and yep… noticed that there were way more divs (than I used in my own survey form). Won’t surprise me if there are some more orphan tags floating in there.

1 Like

So, the relevant code is:

<fieldset>
  <div>
    <input type="checkbox" name="choose1" id="front" value="Front" />
    <label for="front">Front-end Projects</label>
  </div>
  <div>
    <input type="checkbox" name="choose2" id="back" value="Back" />
    <label for="back">Back-end Projects</label>
  </div>
</fieldset>

I would recommend you stop using Bootstrap. It interferes with the lessons in raw HTML and css the curriculum has been teaching up to that point. You have gone div-crazy trying to get the layout and styling right (a common problem in Bootstrap).

I tidied up your HTML using CodePen’s menu in the HTML pane, and I noticed that the fieldset tag was at the same level of indentation as the <form> tag at the top, which implies that the fieldset can’t be a child of the form (can’t be inside it), it has to be a sibling (next to it).

Get rid of the extraneous </div> tag, and all 17 tests pass.

2 Likes

Thanks a lot guys, I really do appreciate.

CHECK IT OUT NOW, WHAT DO YOU THINK?

https://codepen.io/sammyfak/full/GXVmVe/

Looks good (the field borders being rounded on just two corners is a little unusual, but it’s internally consistent, so it doesn’t look bad.)

Again, I can’t recommend enough refactoring this project (now that it passes) wihout Bootstrap. I got twisted up by it myself, went back and used the then-beta, now learn.freecodecamp curriculum, and it gives you so much more control over what you’re doing, which will matter a lot once you start using Javascript to try to manipulate the HTML elements and style them. I know it’s the very last thing you want to hear when you just completed an assignment, but I did a few in bootstrap, then went back and re-did them all. It was the best decision I made except using FCC.

Best, Vip.

P.S.: How to make your links and stuff more clickable, insert code like I did in my earlier reply:

Okay! Thanks man, I appreciate.

1 Like