Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Error is “#ID tag must be a descendant of #survery-form” is there something with my tags that I’m missing for this to run correctly?

Thanks for your help everyone.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

  </head>
  <body>
    <div id="heading">
    <h1 id="title">New York Resident Pizza Survey</h1>
  
    <p id="description">
      We want to find out the favorite kind of pizza in all of NYC! Let your
      opinion be heard, submit your vote below.</p></div>
      <div id="survey">
<div id="info">
    <form action="#" id="survey-form">
      <div class="form-id">
      <label for="name" id="name-label">Full Name:</label>
      <input type="text" id="name" placeholder="First and Last name" required />
    </div>
    
      <label for="email" id="email-label">Email:</label>
      <div class="form-id">
      <input type="email" id="email" placeholder="Enter email" required />
    </div>
 
      <label for="number" id="number-label">Age:</label> 
      <div class="form-id">
      <input type="number" id="number" min="13" max="99" placeholder="13" />
    </div></div>
  <label for="dropdown">Favorite Pizza Topping</label>
      <select id="dropdown">
        <option disabled selected value>Choose One</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="cheese">Cheese</option>
        <option value="veggie">Veggie</option>
      </select>
      <fieldset>
      <legend>What borough are you from:</legend>
<div id="newyork">
      <label> <input type="radio" name="borough" value="bronx" /> Bronx </label>
      <label>
        <input type="radio" name="borough" value="manhattan" /> Manhattan
      </label>
      <label>
        <input type="radio" name="borough" value="queens" /> Queens
      </label>
      <label>
        <input type="radio" name="borough" value="brooklyn" /> Brooklyn
      </label>
      <label>
        <input type="radio" name="borough" value="staten-island" /> Staten
        Island
      </label>
      <label>
        <input type="radio" name="borough" value="long-island" /> Long Island
      </label>
      <label>
        <input type="radio" name="borough" value="upstate" /> Upstate
      </label>
      <label>
        <input type="radio" name="borough" value="hudson-valley" /> Hudson Valley</label>
      </div>
    </fieldset>
  <fieldset>
      <legend>Liked Extra Toppings</legend>
      <div class="toppings">
      <label> <input type="checkbox" value="sausage" />Sausage </label>
      <label> <input type="checkbox" value="pineapple" />Pineapple </label>
      <label>
        <input type="checkbox" value="buffalo-chicken" />Buffalo Chicken
      </label>
      <label>
        <input type="checkbox" value="grilled-chicken" />Grilled Chicken
      </label>
      <label> <input type="checkbox" value="mushroom" />Mushroom </label>
      <label> <input type="checkbox" value="peppers" />Peppers </label>
    </div>
  </fieldset>
      <label for="feedback">What do you like most about Pizza?</label>
      <textarea id="feedback"
    placeholder="My pizza thoughts..."></textarea>

      <button type="submit" id="submit">Submit</button>
    </form>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script></div>
  </body>
</html>


```css
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:128.0) Gecko/20100101 Firefox/128.0

Challenge Information:

Survey Form - Build a Survey Form

2

Validate your HTML.

https://validator.w3.org/nu/#textarea

More help if needed:

You have an extra closing </div> tag. The validator will tell you the line number.

3

when I remove the closing div tag it calls out, it then says I have an unclosed div element.

4

You must have removed the wrong one. When I remove the extra closing tag on line 40 your code passes all the tests.

5

Ok, that did help with that issue, but now its saying my form doesn’t have an ID of “survery-form” when it actually does?

Thank you so much for helping me through this it has been quite frustrating haha

6

Hi there!

Post your updated code here in your next reply.

7 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
</head>
  <body>
    <div id="heading">
    <h1 id="title">New York Resident Pizza Survey</h1>
  
    <p id="description">
      We want to find out the favorite kind of pizza in all of NYC! Let your
      opinion be heard, submit your vote below.</p></div>
      <div id="survey-form">
<div id="info">
    <div class="form-id">
      <form action="#" id="survey-form">
      <label for="name" id="name-label">Full Name:</label>
      <input type="text" id="name" placeholder="First and Last name" required />
    </div>
    <div class="form-id">
      <label for="email" id="email-label">Email:</label>
      <input type="email" id="email" placeholder="Enter email" required />
    </div>
  <div class="form-id">
      <label for="number" id="number-label">Age:</label>
      <input type="number" id="number" min="13" max="99" placeholder="13" />
    </div></div>
  <label for="dropdown">Favorite Pizza Topping</label>
      <select id="dropdown">
        <option disabled selected value>Choose One</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="cheese">Cheese</option>
        <option value="veggie">Veggie</option>
      </select>
      <fieldset>
      <legend>What borough are you from:</legend>
<div id="newyork">
      <label> <input type="radio" name="borough" value="bronx" /> Bronx </label>
      <label>
        <input type="radio" name="borough" value="manhattan" /> Manhattan
      </label>
      <label>
        <input type="radio" name="borough" value="queens" /> Queens
      </label>
      <label>
        <input type="radio" name="borough" value="brooklyn" /> Brooklyn
      </label>
      <label>
        <input type="radio" name="borough" value="staten-island" /> Staten
        Island
      </label>
      <label>
        <input type="radio" name="borough" value="long-island" /> Long Island
      </label>
      <label>
        <input type="radio" name="borough" value="upstate" /> Upstate
      </label>
      <label>
        <input type="radio" name="borough" value="hudson-valley" /> Hudson Valley</label>
      </div>
    </fieldset>
  <fieldset>
      <legend>Liked Extra Toppings</legend>
      <div class="toppings">
      <label> <input type="checkbox" value="sausage" />Sausage </label>
      <label> <input type="checkbox" value="pineapple" />Pineapple </label>
      <label>
        <input type="checkbox" value="buffalo-chicken" />Buffalo Chicken
      </label>
      <label>
        <input type="checkbox" value="grilled-chicken" />Grilled Chicken
      </label>
      <label> <input type="checkbox" value="mushroom" />Mushroom </label>
      <label> <input type="checkbox" value="peppers" />Peppers </label>
    </div>
  </fieldset>
      <label for="feedback">What do you like most about Pizza?</label>
      <textarea id="feedback"
    placeholder="My pizza thoughts..."></textarea>

      <button type="submit" id="submit">Submit</button>
    </form>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script></div>
  </body>
</html>
8

You have duplicate id value survey-form. Remove it from div element. Each id in the document should be unique for every element.

9

Why not just remove the extra closing tag instead of adding an opening tag?

Anyway, as said, you can’t use the same id twice.

10 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
</head>
  <body>
    <div id="heading">
    <h1 id="title">New York Resident Pizza Survey</h1>
  
    <p id="description">
      We want to find out the favorite kind of pizza in all of NYC! Let your
      opinion be heard, submit your vote below.</p></div>

    <div class="form-id">
      <form action="#" id="survey-form">
      <label for="name" id="name-label">Full Name:</label>
      <input type="text" id="name" placeholder="First and Last name" required /></form>
    </div>
    <div class="form-id">
      <label for="email" id="email-label">Email:</label>
      <input type="email" id="email" placeholder="Enter email" required />
    </div>
  <div class="form-id">
      <label for="number" id="number-label">Age:</label>
      <input type="number" id="number" min="13" max="99" placeholder="13" /></form>
    </div>
  <label for="dropdown">Favorite Pizza Topping</label>
      <select id="dropdown">
        <option disabled selected value>Choose One</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="cheese">Cheese</option>
        <option value="veggie">Veggie</option>
      </select>
      <fieldset>
      <legend>What borough are you from:</legend>
<div id="newyork">
      <label> <input type="radio" name="borough" value="bronx" /> Bronx </label>
      <label>
        <input type="radio" name="borough" value="manhattan" /> Manhattan
      </label>
      <label>
        <input type="radio" name="borough" value="queens" /> Queens
      </label>
      <label>
        <input type="radio" name="borough" value="brooklyn" /> Brooklyn
      </label>
      <label>
        <input type="radio" name="borough" value="staten-island" /> Staten
        Island
      </label>
      <label>
        <input type="radio" name="borough" value="long-island" /> Long Island
      </label>
      <label>
        <input type="radio" name="borough" value="upstate" /> Upstate
      </label>
      <label>
        <input type="radio" name="borough" value="hudson-valley" /> Hudson Valley</label>
      </div>
    </fieldset>
  <fieldset>
      <legend>Liked Extra Toppings</legend>
      <div class="toppings">
      <label> <input type="checkbox" value="sausage" />Sausage </label>
      <label> <input type="checkbox" value="pineapple" />Pineapple </label>
      <label>
        <input type="checkbox" value="buffalo-chicken" />Buffalo Chicken
      </label>
      <label>
        <input type="checkbox" value="grilled-chicken" />Grilled Chicken
      </label>
      <label> <input type="checkbox" value="mushroom" />Mushroom </label>
      <label> <input type="checkbox" value="peppers" />Peppers </label>
    </div>
  </fieldset>
      <label for="feedback">What do you like most about Pizza?</label>
      <textarea id="feedback"
    placeholder="My pizza thoughts..."></textarea>

      <button type="submit" id="submit">Submit</button>
  
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>

The original issue is back after making the changes. I feel silly missing the duplicate ID though.

11

Just to explain.

You have two div elements (survey and info) before the form element. In your initial code, one of them is closed inside the form element. Closing a parent element will close the child, so the form is closed too early.

Looking at the ids I would assume info is actually meant to be inside the form element and survey is meant to wrap the form element.

  1. Move the opening div tag with the info id inside the form element.

  2. After the </form> tag, close the survey div (it will be auto closed, but you shouldn’t rely on that).

This is based on your initial code you have in your first post.

12

YAY THAT DID IT!! Thank you!!

13

Good to hear.

Would you mind posting your passing code instead of the quoted code? Just so there isn’t any confusion.