Build a survey form certification project- not sure what the problem is

HTML-CSS
1

I don’t understand what my code is missing, everything seems to be working fine but the parts which the challenge says I am missing are:

  • 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.

  • Your #name-label should contain text that describes the input.

*Your #email-label should contain text that describes the input.

  • Your #number-label should contain text that describes the input.

  • Your #name-label should be a descendant of #survey-form.

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

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

Should I just re-start the challenge? Whenever I change the id to ‘name-label’ it then states that my input element should have an id of ‘name’. I’m really confused.

This is my code so far:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset=UTF-8></meta>
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title" >Survey Form</h1>
      <p id="description" >Thank you for completing our form</p>
        <form id="survey-form">
    <fieldset>
      <label for="name-label">Enter Your First Name: <input id="name" #name-label type="text" required <textarea id="bio" name="bio" rows="3" cols="30" placeholder="Jane"></textarea></label>
        <label for="number">Enter Your Age: <input id="number" name="number" type="number" min="13" max="99" required <textarea id="bio" name="bio" rows="3" cols="30" placeholder="20"></textarea></label>
        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required <textarea id="bio" name="bio" rows="3" cols="30" placeholder="Jane123@email.com"></textarea></label>
        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
          <label for="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" value="1" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </fieldset>
      <fieldset>
       <label for="languages">Select all that apply</label>
        <label for="html"><input id="html" type="radio" name="radio" class="inline" value="1" /> HTML</label>
        <label for="java"><input id="java" type="radio" name="radio" class="inline" value="2"/> Java</label>
         <label for="python"><input id="python" type="radio" name="radio" class="inline" value="3"/> Python</label>
        <label for="other"><input id="other" type="radio" name="radio" class="inline" value="4"/> Other</label>
        <label
        <label
        <label for="bio">If other, what languages does that include?
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I also know..."></textarea>
        </label>
      </fieldset>
      <fieldset>
<label for="dropdown">How did you hear about us?
          <select id="dropdown" name="referrer">
            <option value="">(select one)</option>
            <option value="1">Social Media</option>
            <option value="2">Google Search</option>
            <option value="3">Word Of Mouth</option>
            <option value="4">Other</option>
          </select>
        </label>
      </fieldset>
      <fieldset>
        <label for="reccomendation">Would you reccomend this survey to a friend? </label>
        <label for="reccomendation"> <input id="reccomendation" type="checkbox" required name="reccomendation" class="inline" value="1" /> Yes </label>
        <label for="reccomendation"> <input id="reccomendation" type="checkbox" required name="reccomendation" class="inline" value="2" /> No </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/116.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Hi there and welcome to our community!

You should have id attributes in your label elements which match the required values (specified in the user stories).

However, to link your label and input elements together, you also need to have for attributes in your label elements which match the id attributes of the corresponding input elements. You cannot use the same id values, as id values must always be unique to a single element.

All of the values you should be using are specified in the user stories, so I’d go through them one-by-one again and ensure that they are all correct.

There are a few other issues in your code too, such as unclosed tags, stray tags and missing tags.

For example, you have two stray (and unclosed) label tags here:

        <label for="other"><input id="other" type="radio" name="radio" class="inline" value="4"/> Other</label>
        <label
        <label
        <label for="bio">If other, what languages does that include?
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I also know..."></textarea>
        </label>

It may be helpful to paste your code into a code formatter, as it will tidy up the formatting and allow you to see more easily where there are issues.

3

Thank you this was really helpful! I managed to complete the challenge :smile:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.