Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
Hello👋. I have tried everything i can and i keep getting the following errors:

  • All how do i ensure all my radio buttons should have a name attribute and value.

and also how can i include radio buttons on all my radio button groups

  • Failed: Every radio button group should have at least 2 radio buttons.

Your code so far

Survey Form

freeCodeCamp Survey Form

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

Name:

Email:

Age (optional)

Yes

No

Which option best describes your current role?

Would you recommend freeCodeCamp to a friend?

Definitely

Maybe

Not sure

What is your favourite feature of freeCodeCamp?

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
<h1 id="title">freeCodeCamp Survey Form</h1>

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

<form id="survey-form">
  <fieldset>
 <label id="name-label">Name:<input id="name" type="text" required placeholder="Enter your name"></label>
 <label id="email-label">Email:<input id="email" type="email" required placeholder="Enter your email"></label>

<label id="number-label">Age (optional)<input id="number" type="number" min="13" max="120" placeholder="Age"/></label>

<select id="dropdown">
  <option> Select Current Role</option>
  <option>Employed</option>
  <option>Student</option> <option>Learning solo</option> <option>Unemployed</option>
  </select>
  <fieldset>
<label name="recommend" for="yes">Yes <input name="yes" type="radio" value="yes"></label>
<label name="recommend" for="no">No <input name="no" type="radio" value="no"></label>
<input type="checkbox" value="1">
<input type="checkbox" value="2">
  </fieldset>
<p>Which option best describes your current role?</p>
<select id="dropdown">
<input type="text" placeholder="Select an option"/>
<input id="number" type="number" min="13" max="120">

</select>

<div class="form-group">
   <p>Would you recommend freeCodeCamp to a friend?</p>

<label> 
<input name="user-recommend" value="definitely" type="radio" id="definitely" name="recommend-type" class="input-radio" value="definitely" checked >Definitely</label>
<label>
<input name="user-recommend" value="maybe" type="radio" id="maybe" name="recommend-type" class="input-radio" value="maybe" checked >Maybe</label>
<label>
<input name="user-recommend" value="not sure" type="radio" id="not sure" name="recommend-type" class="input-radio" value="not sure" checked >Not sure</label>
</div>
  
<p>What is your favourite feature of freeCodeCamp?</p><select id="dropdown" >
<input type="text" placeholder="Select an option"/>

<p>What would you like to see improved? (check all that apply)</p>


<label for="name"><input id="name" type="radio" value="front-end-projects" type="checkbox" /> Front-end projects</label>
<label for="name"><input id="name" type="radio" value="back-end-projects" type="checkbox" /> Back-end projects</label>
<label for="name"><input id="name" type="radio" value="data visualization" type="checkbox" /> Data Visualization</label>
<label for="name"><input id="name" type="radio" value="challenges" type="checkbox" /> Challenges</label>

<label for="name"><input id="name" type="radio" value="Open source community" type="checkbox" /> Open source community</label>
<label for="name"><input id="name" type="radio" value="glitter help rooms" type="checkbox" /> Glitter help rooms</label>
<label for="name"><input id="name" type="radio" value="videos" type="checkbox" /> Videos</label>
<label for="name"><input id="name" type="radio" value="city meetups" type="checkbox" /> City Meetups</label>
<label for="name"><input id="name" type="radio" value="wiki" type="checkbox" /> Wiki</label>
<label for="name"><input id="name" type="radio" value="forums" type="checkbox" /> Forums</label>
<label for="name"><input id="name" type="radio" value="additional courses" type="checkbox" /> Additional Courses</label>
</fieldset>
<p>Any comments or suggestions?</p>
<textarea placeholder="Enter your suggestions here..."></textarea>
<button id="submit">Submit</button>
</fieldset>
</form>
  </body>

  </html>
4

Your name attribute value should be same for the group of radio inputs.

5

You should have unique id value for each element and it’s corresponding label.

1 Like
6

Thank you so much . Your kind assistance is sincerely appreciated :pray:. Keep well.

7

Your most welcome. Happy Coding!