Survey Form - Build a Survey Form

HTML-CSS
1

Hi, I need help with this plz.
Your #name should be a descendant of #survey-form .

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
  <header>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css" />
    <title>freeCodeCamp Survey Form</title>
    </header>
    <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" class="survey-form"></form>
      <fieldset>
         <label id="name-label">Name<input id="name" type="text" placeholder="Enter your Name" required /></label>
         <label id="email-label">Email<input id="email" type="email" placeholder="Enter your Email" required /></label>
        <label id="number-label">Age <small>(optional)</small> <input id="age" type="number" min="10" max="99" placeholder="Age" /  ></label>
           <label for="referrer">Which option best describes your current role?<select id="referrer" name="referrer"></label>
             <option value="">Select current role</option>
             <option value="1">Student</option>
             <option value="2">Full Time Job</option>
             <option value="3">Full Time Learner</option>
             <option value="4">Prefer not to say</option>
             <option value="5">Other</option></select>
           </fieldset>
           <fieldset>
             <label>Would you recommend freeCodeCamp to a friend?</label>
                    <label for="definetly"><input id="definetly" type="radio" name="attribute" class="inline" />Definetly</label>
                                      <label for=maybe"><input id="maybe" type="radio" name="attribute" class="inline" />Maybe</label>
                                                        <label for="not sure"><input id="not sure" type="radio" name="attribute" class="inline" />Not sure</label>
             </fieldset>
         <fieldset>
           <label for="option">What is your favorite feature of freeCodeCamp?<select id="option" name="option"></label>
            <option value="">Select an option
            </option>
             <option value="1">Challenges</option>
            <option value="2">Projects</option>
               <option value="3">Community</option>
                        <option value="3">Open Source</option>
                        </select>
                    </fieldset>
                    <fieldset>
                     <label for="opinion">What would you like to see improved?<small> (Check all that apply)</small></label>
                     <label for="front-end"><input id="front-end" type="checkbox" value="front-end" class="inline"  /> Front-end Projects</label>
<label for="front-end"><input id="back-end" type="checkbox" value="back-end" class="inline"  /> Back-end Projects</label>
<label for="data-visualization"><input id="data-visualization" type="checkbox" value="data-visualization" class="inline"  /> Data Visualization</label>
<label for="challenges"><input id="challenges" type="checkbox" value="challenges" class="inline"  /> Challenges</label>
<label for="open source community"><input id="open source community" type="checkbox" value="open source community" class="inline"  /> Open Source Community</label>
<label for="gitter help rooms"><input id="gitter help rooms" type="checkbox" value="gitter help rooms" class="inline"  /> Gitter help rooms</label>
<label for="videos"><input id="videos" type="checkbox" value="videos" class="inline"  /> Videos</label>
<label for="city meetups"><input id="city meetups" type="checkbox" value="city meetups" class="inline"  /> City Meetups</label>
<label for="wiki"><input id="wiki" type="checkbox" value="wiki" class="inline"  /> Wiki</label>
<label for="forum"><input id="forum" type="checkbox" value="forum" class="inline"  /> Forum</label>
<label for="additional courses"><input id="additional courses" type="checkbox" value="additional courses" class="inline"  /> Additional Courses</label>
         </fieldset>
         <fieldset>
           <label for="comments">Any comments or suggestions?<textarea rows="6" cols="100" placeholder="Enter your comments here..."></textarea>
           </label>
           <fieldset>
             <input id="submit" type="submit" value="Submit"/>
             </form>
</body>
</html>

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

1 Like
2

Please describe What’s the issue?

3

It says i need name as a descendant of survey form?
How should i do it?
Your #name should be a descendant of #survey-form .

4

First change your id in for in label element.
label for="name"><input id="name"></label>

5

Still Nothing((.
what does descendant mean?

6

you modify all label element in for attribute as same as your input id attribute?

7 
<!DOCTYPE html>
<html lang="en">
  <header>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css" />
    <title>freeCodeCamp Survey Form</title>
    </header>
    <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" class="survey-form"></form>
      <fieldset>
         <label for="name">Name<input id="name" type="text" name="name" placeholder="Enter your Name" required /></label>
         <label for="email">Email<input id="number" type="email" placeholder="Enter your Email" required /></label>
        <label for="age">Age <small>(optional)</small> <input id="age" type="number" min="10" max="99" placeholder="Age" /  ></label>
           <label for="referrer">Which option best describes your current role?<select id="referrer" name="referrer"></label>
             <option value="">Select current role</option>
             <option value="1">Student</option>
             <option value="2">Full Time Job</option>
             <option value="3">Full Time Learner</option>
             <option value="4">Prefer not to say</option>
             <option value="5">Other</option></select>
           </fieldset>
           <fieldset>
             <label>Would you recommend freeCodeCamp to a friend?</label>
                    <label for="definetly"><input id="definetly" type="radio" name="attribute" class="inline" />Definetly</label>
                                      <label for="maybe"><input id="maybe" type="radio" name="attribute" class="inline" />Maybe</label>
                                                        <label for="not sure"><input id="not sure" type="radio" name="attribute" class="inline" />Not sure</label>
             </fieldset>
         <fieldset>
           <label for="option">What is your favorite feature of freeCodeCamp?<select id="option" name="option"></label>
            <option value="">Select an option
            </option>
             <option value="1">Challenges</option>
            <option value="2">Projects</option>
               <option value="3">Community</option>
                        <option value="3">Open Source</option>
                        </select>
                    </fieldset>
                    <fieldset>
                     <label for="opinion">What would you like to see improved?<small> (Check all that apply)</small></label>
                     <label for="front-end"><input id="front-end" type="checkbox" value="front-end" class="inline"  /> Front-end Projects</label>
<label for="front-end"><input id="back-end" type="checkbox" value="back-end" class="inline"  /> Back-end Projects</label>
<label for="data-visualization"><input id="data-visualization" type="checkbox" value="data-visualization" class="inline"  /> Data Visualization</label>
<label for="challenges"><input id="challenges" type="checkbox" value="challenges" class="inline"  /> Challenges</label>
<label for="open source community"><input id="open source community" type="checkbox" value="open source community" class="inline"  /> Open Source Community</label>
<label for="gitter help rooms"><input id="gitter help rooms" type="checkbox" value="gitter help rooms" class="inline"  /> Gitter help rooms</label>
<label for="videos"><input id="videos" type="checkbox" value="videos" class="inline"  /> Videos</label>
<label for="city meetups"><input id="city meetups" type="checkbox" value="city meetups" class="inline"  /> City Meetups</label>
<label for="wiki"><input id="wiki" type="checkbox" value="wiki" class="inline"  /> Wiki</label>
<label for="forum"><input id="forum" type="checkbox" value="forum" class="inline"  /> Forum</label>
<label for="additional courses"><input id="additional courses" type="checkbox" value="additional courses" class="inline"  /> Additional Courses</label>
         </fieldset>
         <fieldset>
           <label for="comments">Any comments or suggestions?<textarea rows="6" cols="100" placeholder="Enter your comments here..."></textarea>
           </label>
           <fieldset>
             <input id="submit" type="submit" value="Submit"/>
             </form>
</body>
</html>

Here is my code

8

**
image
**
remove your </form> element first

9

also change this line
image
your select element comes after your label element

10

image
change this

11

image
image924×82 7.1 KB

remove extra label element.

<label></label>
<input type=radio/>
12

has your code passed

13

Thank you. Works!
yes it has

14

OKKK welcome bro. :heart::heart::heart::heart:

1 Like
15

You should have an input element with an id of email.

Your #email should have a type of email.

Your #email should require input.

Your #email should be a descendant of #survey-form.

You should have an input element with an id of number.

Your #number should be a descendant of #survey-form.

Your #number should have a type of number.

Your #number should have a min attribute with a numeric value.

Your #number should have a max attribute with a numeric value.

You should have a label element with an id of name-label.

You should have a label element with an id of email-label.

You should have a label element with an id of number-label.

What about these? Dont understand.

16

First change your email id to email. and make it required.

17

change your age label in number also input id

18

I did all that, still nothing.

19

can you share your code again please

20

and also issue in code