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>
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>
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.