Survey Form - Build a Survey Form

Tell us what’s happening:
My only error is “Every radio button group should have at least 2 radio buttons.” I have three radio buttons and cannot figure out what is wrong here.
Your code so far

<!-- file: index.html -->
<!DOC type html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>form</title>
  <link rel="stylesheet"href="styles.css">
</head>
<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">
   
   <div> <label id="name-label">Name</label>
  <input id="name"type="text" placeholder="Enter your name" required></div>
  
  <div><label id="email-label">Email</label>
  <input id="email"type="email" placeholder="Enter your email" required></div>
  
  <div><label id="number-label">Age (optional)</label>
  <input id="number" type="number" min="15"max="99" 
  placeholder="Enter your age"value-"age"></div>
  
  <div><label>Which option describes your current role?</label>
  <select name="role"id="dropdown"</select>
    <option value="select">Select current role</option>
    <option value="student">Student </option>
    <option value="job">Full time job</option></div>


<div><label for="def"id="def">Definitely</label>
<input type="radio" id="def"name="definitely"value="maybe">
<label for="maybe" id="maybe">Maybe</label>
<input id="maybe"name="maybe"type="radio"value="maybe">
<label for="no" id="no">No</label>
<input id="no" name="no"type="radio"value="no"></div>

<br>
<label>What would you like to see improved? <span class="clue">(check all that apply)</span></label>
<div><label><input class="check"type="checkbox"value="front">Front-end Projects</label></div>
<div><label><input class="check"type="checkbox"value="back">Back-end Projects</label></div>
<div><label><input class="check"type="checkbox"value="data">Data Visualization</label></div>
<div><label><input class="check"type="checkbox"value="challenges">Challenges</label></div>
<div><label><input class="check"type="checkbox"value="Videos">Videos</label></div>

<label for="comments">Any comments of suggestions?</label>
<textarea id= "textarea"name="comments"placeholder="Enter your comments here..."
rows="5"cols="40"></textarea>
<button id="submit">Submit</button>
</form>




   
    

    

/* file: styles.css */
* {background-color: purple; color:white;}
h1, p {font-family:Arial;}
h1 {margin-top:40px;
margin-bottom:20px;
font-weight:100px;}
p {font-size:20px;
font-weight:100px;
font-style:italic;}
label {display:block;
font-size:20px;
font-family:Arial;
padding:5px;}
#name, #email, #number, #dropdown {width:300px;
height:40px;
background-color:white;
font-size:20px; margin:10px;border-radius:5px;}
#dropdown {color:grey;}

button {display:block; 
margin-top:20px;
width:75px;height:35px;
font-size:20px;}
button:hover{background-color:red;}
#textarea {font-size:20px;}
.check {margin:5px;}
#maybe {display:inline;}
#def {display:inline;margin-top: 15px;
margin-bottom:10px;}
.clue {font-size: 18px;}
#no {display:inline;}
/* body {margin-left:300px;} */

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.6.1 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

try to copy your index.html code into an online html validator and fix all the syntax errors first. This may help you figure out what is wrong

Tell us what’s happening:
The only thing wrong with my form is I keep getting “Every radio button group should have at least 2 radio buttons.” I have spent hours on this and can’t figure it out. I have three radio buttons that look perfectly fine on the form.
Your code so far

form

freeCodeCamp Survey Form

Thank you for taking the time to help us improve the platform

Name
Email
Age (optional)

Which option describes your current role?
<select name="role"id=“dropdown”>
Select current role
Student
Full time job



Would you recommend freeCodeCamp to a friend?
Definitely
Maybe
No

What would you like to see improved? (check all that apply)
Front-end Projects
Back-end Projects
Data Visualization
Challenges
Videos

Any comments of suggestions?

Submit

<!-- file: index.html -->
<!DOC type html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>form</title>
  <link rel="stylesheet"href="styles.css">
</head>
<body>
<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">
   
   <div> <label id="name-label">Name</label>
  <input id="name"type="text" placeholder="Enter your name" required></div>
  
  <div><label id="email-label">Email</label>
  <input id="email"type="email" placeholder="Enter your email" required></div>
  
  <div><label id="number-label">Age (optional)</label>
  <input id="number" type="number" min="15"max="99" 
  placeholder="Enter your age"value-"age"></div>
  
  <label>Which option describes your current role?</label>
  <select name="role"id="dropdown">
    <option value="select">Select current role</option>
    <option value="student">Student </option>
    <option value="job">Full time job</option>
    </select>



<br>
<br>
<label>Would you recommend freeCodeCamp to a friend?</label>

<div><label for="def"id="def">Definitely</label>
<input type="radio" id="def"name="definitely"value="maybe"></div>

<div><label for="maybe" id="maybe">Maybe</label>
<input id="maybe"name="maybe"type="radio"value="maybe"></div>

<div><label for="no" id="no">No</label>
<input id="no" name="no"type="radio"value="no"></div>

<br>
<label>What would you like to see improved? <span class="clue">(check all that apply)</span></label>
<div><label><input class="check"type="checkbox"value="front">Front-end Projects</label></div>
<div><label><input class="check"type="checkbox"value="back">Back-end Projects</label></div>
<div><label><input class="check"type="checkbox"value="data">Data Visualization</label></div>
<div><label><input class="check"type="checkbox"value="challenges">Challenges</label></div>
<div><label><input class="check"type="checkbox"value="Videos">Videos</label></div>

<label for="comments">Any comments of suggestions?</label>
<textarea id= "textarea"name="comments"placeholder="Enter your comments here..."
rows="5"cols="40"></textarea>
<button id="submit">Submit</button>
</form></body>




   
    

    

/* file: styles.css */
* {background-color: purple; color:white;}
h1, p {font-family:Arial;}
h1 {margin-top:40px;
margin-bottom:20px;
font-weight:100px;}
p {font-size:20px;
font-weight:100px;
font-style:italic;}
label {display:block;
font-size:20px;
font-family:Arial;
padding:5px;}
#name, #email, #number, #dropdown {width:300px;
height:40px;
background-color:white;
font-size:20px; margin:10px;border-radius:5px;}
#dropdown {color:grey;}

button {display:block; 
margin-top:20px;
width:75px;height:35px;
font-size:20px;}
button:hover{background-color:red;}
#textarea {font-size:20px;}
.check {margin:5px;}
#maybe {display:inline;}
#def {display:inline;margin-top: 15px;
margin-bottom:10px;}
.clue {font-size: 18px;}
#no {display:inline;}
body {margin-left:300px;}

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.6.1 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

I have merged your topics into one as we don’t want to have duplicate topics created on the forum.

Every radio button group should have at least 2 radio buttons.

This means that the radio buttons should be grouped together. You do this by using the same name value for them.

I addition to what hbar1st aid, I have noticed something in your html. You have multiple elements that are using the same id name Applying the same id to multiple elements is invalid HTML and should be avoided . You can however have elements use classes with the same name, but ids are meant to be unique meaning you can not use the same name twice.

Perfect, thanks! I did not know how to do that!

1 Like

Ah, okay, thank you!

1 Like