Survey Form - Build a Survey Form

Tell us what’s happening:
I am not sure if I am leaving any critical code out for what I have so far. What I am doing is getting the HTML done first; before doing the CSS. Is my code proper for this task or do I need to edit it some more.

My main issue is code formatting each fieldset and whether or not I need to give “id” for each element.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <h1 id="title">
    free CodeCamp Survey Form
  </h1>
</head>
<body>
<p id="description">Thank you for taking the time to help us improve the platform
</p>
<form id="survey-form">
  <fieldset>
  <label id="name-label">Name</label>
  <input id="name" type="text" placeholder="Enter your name" required>
  </input>
  </fieldset>
  <fieldset>
  <label id="email-label">Email</label>
  <input id="email" type="email" placeholder="Enter your email" required>
  </input>
  </fieldset>
  <fieldset>
  <label id="number-label">Age (optional)</label>
  <input id="number" type="number" placeholder="Age" min="13" max="120">
  </input>
  </fieldset>
  <fieldset>
  <label id="current-role">Which option best describes your current role?</label>
  <select id="dropdown">
    <option id="role">Select Current Role</option>
    <option id="student">Student</option>
    <option id="job">Full Time Job</option>
    <option id="learner">Full Time Learner</option>
    <option id="prefer">Prefer not to say</option>
    <option id="other">Other</option>
  </select>
  </fieldset>
  <fieldset>
  <label id="recommend">Would you recommend freeCodeCamp to a friend?</label>
  <p>Definitely</p>
  <input id="Definitely" type="radio"></input>
  <p>Maybe</p>
  <input id="Maybe" type="radio"></input>
  <p>Not Sure</p>
  <input id="Not-Sure" type="radio"></input>
  </fieldset>
  <fieldset>
  <label id="favorite-feature">What is your favorite feature of freeCodeCamp?</label>
  <select id="dropdown2">
    <option>Select an option</option>
    <option>Challenges</option>
    <option>Projects</option>
    <option>Community</option>
    <option>Open Source</option>
  </select>
  </fieldset>
  <fieldset>
  <label id="improvement">
    What would you like to see improved? (Check all that apply)
  </label>
  <p>Front-End Projects</p>
  <input id="Front-End" type="checkbox"></input>
  <p>Back-End Projects</p>
  <input id="Back-End" type="checkbox"></input>
  <p>Data Visualization</p>
  <input id="Data" type="checkbox"></input>
  <p>Challenges</p>
  <input id="Challenges" type="checkbox"></input>
  <p>Open Source Community</p>
  <input id="Open" type="checkbox"></input>
  <p>Gitter Help Rooms</p>
  <input id="Gitter" type="checkbox"></input>
  <p>Videos</p>
  <input id="videos" type="checkbox"></input>
  <p>City Meetups</p>
  <input id="city" type="checkbox"></input>
  <p>Wiki</p>
  <input id="wiki" type="checkbox"></input>
  <p>Forum</p>
  <input id="forum" type="checkbox"></input>
  <p>Additional Courses</p>
  <input id="additional" type="checkbox"></input>
  </fieldset>
  <fieldset>
  <label id="comments">Any comments or suggestions?</label>
  <input id="comments" type="textarea"></input>
  </fieldset>
  <button id="Submit" type="submit">Submit</button>
</form>
</body>
</html>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

You do not technically need to add any CSS for this project to pass. All of the tests are checking the HTML only. So if you are not passing any tests then you will need to fix your HTML.

label elements do not need ids. Most input elements should have ids though because that is how you associated the label with the id. You set the for attribute on the label to the id value on the input.

There are two portions of my code that do not pass the tests.

  • every radio button group should have at least two radio buttons.
  • you should have at least one text area element that is a descendent of survey form

Should I have used the button attribute for the radio buttons?
I have created a text area for the last question, but this error still happens.
Here is my code:

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <h1 id="title">
    free CodeCamp Survey Form
  </h1>
</head>
  <body>
    <p id="description">Thank you for taking the time to help us improve the platform
    </p>
  <form id="survey-form">
    <fieldset>
     <label id="name-label" for="name">Name</label>
      <input id="name" type="text" placeholder="Enter your name" required>
      </input>
  </fieldset>
  <fieldset>
     <label id="email-label" for="email">Email</label>
      <input id="email" type="email" placeholder="Enter your email" required>
      </input>
  </fieldset>
  <fieldset>
    <label id="number-label" for="number">Age (optional)</label>
    <input id="number" type="number" placeholder="Age" min="13" max="120">
    </input>
  </fieldset>
  <fieldset>
    <label id="current-role">Which option best describes your current role?</label>
    <select id="dropdown">
     <option id="role">Select Current Role</option>
      <option id="student">Student</option>
      <option id="job">Full Time Job</option>
      <option id="learner">Full Time Learner</option>
    <option id="prefer">Prefer not to say</option>
    <option id="other">Other</option>
    </select>
  </fieldset>
  <fieldset>
    <label id="recommend">Would you recommend freeCodeCamp to a friend?</label>
  <p>Definitely</p>
     <input id="Definitely" name="definitely" type="radio" value="1"></input>
  <p>Maybe</p>
     <input id="Maybe" name="maybe" type="radio" value="2"></input>
  <p>Not Sure</p>
     <input id="Not-Sure" name="not-sure" type="radio" value="3"></input>
  </fieldset>
  <fieldset>
  <label id="favorite-feature">What is your favorite feature of freeCodeCamp?</label>
  <select id="dropdown2">
    <option>Select an option</option>
    <option>Challenges</option>
    <option>Projects</option>
    <option>Community</option>
    <option>Open Source</option>
  </select>
  </fieldset>
  <fieldset>
  <label id="improvement">
    What would you like to see improved? (Check all that apply)
  </label>
  <p>Front-End Projects</p>
  <input id="Front-End" type="checkbox" value="none"></input>
  <p>Back-End Projects</p>
  <input id="Back-End" type="checkbox" value="1"></input>
  <p>Data Visualization</p>
  <input id="Data" type="checkbox" value="2"></input>
  <p>Challenges</p>
  <input id="Challenges" type="checkbox" value="3"></input>
  <p>Open Source Community</p>
  <input id="Open" type="checkbox" value="4"></input>
  <p>Gitter Help Rooms</p>
  <input id="Gitter" type="checkbox" value="5"></input>
  <p>Videos</p>
  <input id="videos" type="checkbox" value="6"></input>
  <p>City Meetups</p>
  <input id="city" type="checkbox" value="7"></input>
  <p>Wiki</p>
  <input id="wiki" type="checkbox" value="8"></input>
  <p>Forum</p>
  <input id="forum" type="checkbox" value="9"></input>
  <p>Additional Courses</p>
  <input id="additional" type="checkbox" value="10"></input>
  </fieldset>
  <fieldset>
  <label id="comments" for="comments">Any comments or suggestions?</label>
  <input id="comments" type="textarea"></input>
  </fieldset>
  <button id="submit" type="submit" value="submit">Submit</button>
</form>
</body>
</html>

No, you are supposed to use a radio button input. Your issue is that you aren’t grouping them correctly. Radio buttons are in the same group if they have the same name attribute.

Text areas don’t use the input element. They have their own element.

MDN: The Textarea element

Your last suggestions helped me solve the issues. All tests passed. Now I am going to work on the CSS tomorrow (from PST Time) even though it isn’t required.

Edit: P.S. I bookmarked your Developer reference in a bookmark folder. Thanks for sharing that resource.