Responsive Web Design Projects - Build a Survey Form

HTML-CSS
1

Hey all, I am completing the certification project and I have included all that is required but the system is not reading my radio button group, I am not sure if it’s something in the code or if it’s the website. The code that is not being read is in bold (**).

  **Your code so far**

/* file: index.html */
<main>

<h1 id="title">freeCodeCamp Survey Form</h1>

<p id="description">Thank you for taking the time to help us improve the platform</p>

<form id="survey-form">

  <label id="name-label"> Name </label>

  <input id="name" type="text" placeholder="Insert Your Name" required/>
<br>
   <label id="email-label"> Email </label>
  <input id="email" type="email" placeholder="Insert Your Email" required/>
</br><br>
   <label id="number-label"> Age </label>
  <input id="number" type="number" placeholder="Insert A Number" min="0" max="90" />
  </br><br>

  <label> Which option best describes your current role?
    </br>
  <select id="dropdown" type="dropdown"> 
    <option id="Student">Student</option>

    <option id="Full-time job">Full-time job</option>

    <option id="Part-time job">Part-time job</option>
  
    <option id="Prefer not to say">Prefer not to say</option>
    <option id="Other">Other</option>
  </select>
  <label>

    <br>
    <label> Would you recomment freeCodeCamp to a friend?
      </br>
**<label>**
**<br>**
**<input type="radio" name="Definetly" for="Definetly" value="Definetly"> Definetly </input>**
**</br>**
**<br>**
**<input type="radio" name="Maybe" for="Maybe" value="Maybe"> Maybe</input>**
**</br>**
**<br>**
**<input type="radio" name="Not sure" for="Not sure" value="Not sure"> Not sure</input>  **
**</br>**
**</label>**
<br>
<label> What would you like to see improved? (Check all that apply)</label>
</br>

<br>
<label for="Front-end Projects"><input id="Front-end Projects" type="checkbox" name="opinion" value="Front-end Projects"> Front-end Projects</label>
    </br><br>
<label for="Data-end Projects"><input id="Data-end Projects" type="checkbox" name="opinion" value="Data-end Projects"> Data-end Projects</label>
</br><br>
<label for="Data Visualization"><input id="Data Visualization" type="checkbox" name="opinion" value="Data Visualization"> Data Visualization</label>
</br><br>
<label for="Challenges"><input id="Challenges" type="checkbox" name="opinion" value="Challenges"> Challenges</label>
</br><br>
<label for="Open Source Community"><input id="Open Source Community" type="checkbox" name="opinion" value="Open Source"> Open Source Community</label>
</br><br>
<label for="Gitter help rooms"><input id="Gitter help rooms" type="checkbox" name="opinion" value="Gitter help rooms"> Gitter help rooms</label>
</br><br>
<label for="Videos"><input id="Videos" type="checkbox" name="opinion" value="Videos"> Videos</label>
</br><br>
<label for="City Meetups"><input id="City Meetups" type="checkbox" name="opinion" value="City Meetups"> City Meetups</label>
</br><br>
<label for="Wiki"><input id="Wiki" type="checkbox" name="opinion" value="Wiki"> Wiki</label>
</br><br>
<label for="Forum"><input id="Forum" type="checkbox" name="opinion" value="Forum"> Forum</label>
</br><br>
<label for="Additional Courses"><input id="Additional Courses" type="checkbox" name="opinion" value="Additional Courses"> Additional Courses</label>
</br>
<br>
<label>Any comments or suggestions?</label>
<textarea id="textarea">Enter your comment here...</textarea>
</br>

<button id="submit" type="submit">submit</button>

</form>

</main>

/* file: styles.css */


  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Responsive Web Design Projects - Build a Survey Form

Link to the challenge:

2

Hello. I think it has something to do with the fact you’ve nested all radio buttons inside the same label.

3

Thank you for your response. I have tried assigning a label element to each of them but they continue to give me an error.

4

Could you show your code again, please? With the changes you’ve made.

5 
 <br>
      <label> Would you recomment freeCodeCamp to a friend?
        </br>
  
<br>
<label>
  <input type="radio" name="Definetly" for="Definetly" value="Definetly"> Definetly
  </label>
  </br>
  <br>
  <label>
  <input type="radio" name="Maybe" for="Maybe" value="Maybe"> Maybe
  </label>
  </br>
  <br>
  <label>
  <input type="radio" name="Not sure" for="Not sure" value="Not sure"> Not sure
  </label>
  </br>
6

Edit your reply, select your code, and click the Preformatted text button (</>). Otherwise it will not be legible.

7

The issue might be that you have, at some point, accidentally erased or forgotten the closing tag for your first shown label element.

8

I just corrected it and it still doesn’t work.

9

You added the attribute for to your input elements. That is not correct, since those should go in your label elements.

10 
    <label> Would you recomment freeCodeCamp to a friend?
        </br>
<br>
<label for="Definetly">
  <input type="radio" name="Definetly" for="Definetly" value="Definetly"> Definetly
  </label>
  </br>
  <br>
  <label for="Maybe">
  <input type="radio" name="Maybe"  value="Maybe"> Maybe
  </label>
  </br>
  <br>
  <label for="Not sure">
  <input type="radio" name="Not sure"  value="Not sure"> Not sure
  </label>
  </br>
  </label>

it still doesn’t work

11

:dizzy_face:

For your ‘Not sure’ radio button, remember that names, id’s, and generally speaking all attribute values cannot contain any spaces in them, so it’d be correct to replace the space with an underscore (_).

Sorry for only noticing one at a time.

12

It still doesn’t work. :sleepy:

Thank you so much for trying to help me, I really appreciate it!

13

Darn, what exactly does it say when you try to pass your code? Which test(s) does it fail?

14

“Every radio button group should have at least 2 radio buttons”

15

Oh wow. I see it now. It was actually a very simple issue. I’m sorry for missing this!

Radio buttons need to all have the same name when they are in a group.

For example:

These are all tied to one question. Therefore they should all share the same name. This is because the name dictates whether or not they are exclusive to one another. Currently, in your page one can select all three options, but that is incorrect, since it should only accept one.

Give all three radio buttons a single name, ideally a name that conveys their purpose, maybe something like recommendation.

Also, another small issue:

The first label should end after the question ends, so you should remove the closing tag at the end and place it next to the question.

16

That was it! Thank you so much!!!

17

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