Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Good afternoon everyone, I have a problem with this code, I looked in several posts, but I didn’t find anything that works, can someone help me?

  1. You should have at least two radio buttons that are descendants of #survey-form.

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>survey</title>
    <link rel="stylesheet" href="style.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>

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

    <label id="email-label"> 
      Email
      <input id="email" type="email" placeholder="Enter your Email" required>
      </input>
      </label>

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

    <label id="role">
      Which option best describes your current role?
      <select id="dropdown" name="dropdown" required>
        <option value=""> Select current role</option>
        <option value="1"> Student</option>
        <option value="2"> Full Time Job</option>
        <option value="3"> Full Time Leaner</option>
        <option value="4"> Prefer not to say</option>
        <option value="5"> Other</option>
        </select>
    </label>
    </fieldset>

    <fieldset>
    <legend>
      Would you recommend freeCodeCamp to a friend?
    </legend>

    <label id="recommend">
      <input id="definitely" value="definitely" type="radio" class="inline" name="radio" checked>
      Definitely
      </input>
    </label>

    <label id="recommend">
      <input  id="maybe" value="maybe" type="radio" class="inline" name="radio" >
      Maybe
      </input>
    </label>

    <label id="recommend">
      <input  id="not-sure" value="not-sure" type="radio" class="inline" name="radio">
      Not Sure
      </input>
    </label>
    </fieldset>

    <fieldset>
    <label id="feature">
      What is your favorite feature of freeCodeCamp?
      <select id="dropdown" required>
        <option value=""> Select an option</option>
        <option value="1"> Challenges</option>
        <option value="2"> Projects</option>
        <option value="3"> Community</option>
        <option value="4"> Open Source</option>
        </select>
    </label>
    </fieldset>

    <fieldset>
      <label for="improved">
        What would you like to see improved? (Check all that apply)
        <input value="1" id="front-end" type="checkbox"> 
        Front-end Projects
      </label>
      <label for="improved">
        <input value="2" id="back-end" type="checkbox"> 
        Back-end Projects
        <label for="improved">
        <input value="3" id="data-visualization" type="checkbox"> 
        Data Visualization
      </label>
      <label id="challenges">
        <input value="4" id="challenges" type="checkbox"> 
        Challenges
      </label>
      <label id="open-source">
        <input value="5" id="open-source" type="checkbox"> 
        Open Source Community
      </label>
      <label id="help-rooms">
        <input value="6" id="help-rooms" type="checkbox"> 
        Gitter help rooms
      </label>
      <label id="videos">
        <input value="7" id="videos" type="checkbox"> 
        Videos
      </label>
      <label id="city-meetups">
        <input value="8" id="city-meetups" type="checkbox"> 
        City Meetups
      </label>
      <label id="wiki">
        <input value="9" id="wiki" type="checkbox"> 
        Wiki
      </label>
      <label id="forum">
        <input value="10" id="forum" type="checkbox"> 
        Forum
      </label>
      <label id="additional-courses">
        <input value="11" id="additional-courses" type="checkbox"> 
        Additional Courses
      </label>
    </fieldset>

    <fieldset>
      <label id="textarea">
        Any comments or suggestions?
        <textarea id="textarea" rows="7" cols="50" placeholder="Inside the comment here..."></textarea>
        </label>
    </fieldset>

    <input id="submit" type="submit" value="submit">

  </form>
</body>
</html>

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hi,
Are you sure your radio buttons are descendants of the #survey-form?
Also, label elements don’t take the id attribute. Instead, they use the for attribute to connect to certain input elements.

3

corrections

well any element take an id attribute

also a label element is automatically linked to the input it has inside, in this case the for attribute is not needed

2 Likes
4

Thanks for answering, previously I used for in label, but the exercise asked to use id, only then I completed the step.
About #survey-form, I open the tag at the beginning of the code and close it at the end, wouldn’t that make them all descendants of it?

5

you have some syntax issues, you should pass your code through a validator so that it can catches all of them: Ready to check - Nu Html Checker

6

I’m fixing them right now, thank you very much

7

My bad. Thanks for correcting me.
I thought it was a must to use for attributes with the labels in this project.