Survey form point 13 and 14 not working

HTML-CSS
1

Hello!
I’m working on the webform and I can’t get around point 13 ( Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute) and 14 (the same with checkmarks).

I’m doing something wrong but I really can’t grab what it is. The name attributes of the inputs are the same and the browsers selects them without any problems.

The code in question:

            <h3>What was your main priority while buying your product?</h3>
            <label class="containerRadio"><input id="Comfortability" type="radio"      name="priorities"> <span class="checkradio"></span>Comfortability </label>
            <label class="containerRadio"><input id="Cuteness" type="radio"            name="priorities"> <span class="checkradio"></span>Cuteness </label>
            <label class="containerRadio"><input id="Matching" type="radio"            name="priorities"> <span class="checkradio"></span>Matching outfits </label>
            <label class="containerRadio"><input id="Style" type="radio"               name="priorities"> <span class="checkradio"></span>Style </label>
            <label class="containerRadio"><input id="None" type="radio"                name="priorities" checked><span class="checkradio"></span> None/Not listed </label>

            <h3>How did you find us?</h3>
                <label class="containerMark"><input id="social"          type="checkbox" name="communication" checked><span class="checkmark"></span> Social Network </label>
                <label class="containerMark"><input id="friend"          type="checkbox" name="communication"> <span class="checkmark"></span>Friends </label>
                <label class="containerMark"><input id="advertisement"   type="checkbox" name="communication"> <span class="checkmark"></span>Advertisement </label>
                <label class="containerMark"><input id="recommendation"  type="checkbox" name="communication"> <span class="checkmark"></span>Recommendation </label>
                <label class="containerMark"><input id="passedBy"        type="checkbox" name="communication"> <span class="checkmark"></span>Just passed by</label>

The codepen:

I have also tried what the solution suggested here: Survey form project, Probelm on the radio buttons

It said that it may not be working due to the tag being inside the tag. I tried to do this:

            <label class="containerRadio" for="priorities">Comfortability  <input id="Comfortability" type="radio"      name="priorities"> <span class="checkradio"></span>         </label>
            <label class="containerRadio" for="priorities">Cuteness        <input id="Cuteness" type="radio"            name="priorities"> <span class="checkradio"></span>         </label>
            <label class="containerRadio" for="priorities">Matching outfits<input id="Matching" type="radio"            name="priorities"> <span class="checkradio"></span>         </label>
            <label class="containerRadio" for="priorities">Style           <input id="Style" type="radio"               name="priorities"> <span class="checkradio"></span>         </label>
            <label class="containerRadio" for="priorities"> None/Not listed<input id="None" type="radio"                name="priorities"><span class="checkradio"></span>  </label>

But the tester didn’t think it was good and also the custom classes stopped working.

2

You need to add the value attribute to both the radio and checkbox inputs.

Input radio:
<label class="containerRadio"><input id="Comfortability" type="radio" value="comfortability" name="priorities"> <span class="checkradio"></span>Comfortability</label>

Input checkbox:
<label class="containerMark"><input id="social" value="social" type="checkbox" name="communication" checked><span class="checkmark"></span> Social Network </label>
2 Likes
3

That was it! Thank you!