Build a Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

my survey form is tell me use at least two radio button

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Survey Form</title>
  <h1 id ="title"> freeCodeCamp Survey Form </h1>
  </head>
 <body> 
   <main>
   <p id ="description"> Thank you for taking the time to help us improve the platform</p> 
   <form id ="survey-form"> 
     <label for =" name" id ="name-label"> Name </label>
     <input type ="text" id ="name" value =""  placeholder ="Enter you name" required ><br>
     <label for ="email" id ="email-label"> Email </label>
        <input type ="email" id ="email" value ="" placeholder="Enter your email" required ><br>
        <label for ="age" id ="number-label"> Age(optional) </label>
        <input id ="number" size ="3" type ="number" min ="0" max ="9" placeholder ="Age" >
   </form >
   </main>
   <main> 
     <p id ="description"> Which option best decribes your current role? </p>
     <form id ="survey-form">
       <select id ="dropdown"> 
         <option name ="current-role" selected value ="Select-current-role"> Select current role </option>

         <option name ="student" value ="student"> Student </option>

         <option name ="full-time-job" value ="full-time-job"> Full time job </option>

         <option name ="full-time-learner" value ="full-time-learner"> Full time learner </option>

         <option name ="prefer-not-to-stay" value ="prefer-not-to-stay"> Prefer not to stay </option>

         <option name ="other" value ="other"> Other </option>
       </select> 
       </form>
   </main>
   <main> 
     <p id ="description"> Would you recommend freeCodeCamp to a friend? </p>
     <form id ="survey-form"> 
       <input type ="radio" type ="radio" name ="definitely" value ="definitely"> <label for ="definitely"> Definitely </label>

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

         <input type ="radio" name ="not-sure" value ="not-sure" > <label for ="not-sure"> Not sure </label>
     </form>
   </main>
   <main> 
     <p id ="description"> What is your favorite feature of freeCodeCamp? </p>
     <form id ="survey-form"> 
       <select id ="dropdown"> 
         <option selected value ="select an option"> Select an option </option>

         <option value ="challenges"> Challenges </option>

         <option value ="projects"> Projects </option>

         <option value ="community"> Community </option>

         <option value ="open-source"> Open Source </option>
       </select>
     </form>
   </main>
   <main> 
     <p id ="description"> What would you like to see imroved?(click all that aplly)
       <form id ="survey-form"> 
         <input type ="checkbox"  value ="fron-end-project"> <label>Front-end Project </label>

         <input type ="checkbox"  value ="back-end-project"> <label>Back-end Project </label>

         <input type ="checkbox"  value ="data-visualization"> <label>Data Visualization </label>

         <input type ="checkbox"  value ="Challenges"> <label> Challenges </label>

         <input type ="checkbox"  value ="open-source"> <label>Open Source Community </label>

         <input type ="checkbox"  value ="gitter-help-rooms"> <label>Gitter help rooms </label>

         <input type ="checkbox"  value ="videos"> <label> Videos </label>

         <input type ="checkbox"  value ="city-meetups"> <label>City Meetups </label>

         <input type ="checkbox"  value ="wiki"> <label> Wiki </label>

         <input type ="checkbox"  value ="forum"> <label>Forum </label>

         <input type ="checkbox"  value ="additional-courses"> <label>Additional Courses </label>
       </form>
   </main>
   <main> 
    <p id ="description"> Any comments or suggestions? </p>
    <form id ="survey-form"> 
      <textarea placeholder ="Enter-your-comment-here"></textarea><br>
        <button id ="submit"> submit </button>
    </form>
   </main>
 </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build a Survey Form - Build a Survey Form
https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-survey-form/build-a-survey-form why do i need two radio button?

2

you may want to review how to do a group with radio buttons

3

In HTML, radio buttons must share the same name attribute if you want the user to select only one option from a group. Right now, each of your radio buttons has a different name

Here’s the corrected radio button section:

code removed by moderator

  • Avoid using multiple <main> or <form> tags for the same page. Usually, one <form> wraps all input elements.

  • Each id should be unique across the page.

4

hi @sainbux

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
5

Hi Buddy, I would like to inform you that in any html code we only do use single main element In one main element we do write our code and then do create our page.

Kindly do put the single main element and delete the extra one.

Hope You Understand.

6

I recommend reviewing this lecture about the importance of using an HTML boilerplate. You can make your own boilerplate and re-use it to start each of your projects here:

And this HTML validator can help you locate errors until you are more comfortable with HTML:

https://validator.w3.org/#validate_by_input

Just copy/paste your code into the text area, then check/fix until there are no more errors. If you scroll down to the bottom of the page, you’ll see that all the lines of code in error have been highlighted for you.