Survey Form - Build a Survey Form

I’m having a few problems with labels!

  1. I’m having trouble understanding why I need a label element with and id of name-label when I already have a label element with an id of name. This goes for all the others ones that also need this kind of label. Wouldn’t I just have two of the same thing?
  2. It’s saying that my checkboxes don’t have value attributes. Why is this?
  3. I’m having a similar problem with the submit button. I have the id, type, and it’s a descendent of the survey-form, but it’s not counting.

I would appreciate any insight!

My code

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Change this</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    </body>
    <form id="survey-form">
  <!--Title and description-->
      <h1 id="title">Educational Attainment and Personality</h1>
    <p id="description">This survey will ask about your educational and personality traits. Please be as honest as possible.</p>
  <!--Demographic Questions-->
    <fieldset>
      <h2>Demographics</h2>
      <label for="name">Name:<input type="text" id="name" placeholder="Jane Doe" required></label>
        <!--Age-->
      <label for="number">Age:<input type="number" id="number" min="18" max="100" placeholder="18" required></label>
      <label for="email">Email:<input type="email" id="email" placeholder="janedoe@gmail.com" required></label>
      <label for="phone-number">Phone Number:<input id="number" type="phone-number" min="10" max="11" placeholder="(XXX)-XXX-XXXX"required></label>
      <p class="sex">What is your sex</p>
      <label for="male"><input type="radio" name="sex" id="sex" value="1">Male</label>
      <label for="female"><input type="radio" name="sex" id="sex" value="2">Female</label>
      </fieldset/>
<!--Education-->
<fieldset>
  <h2>Education</h2>
<label for="dropdown">What is your educational status?<select id="dropdown" required>
<option value="1">High school</option>
<option value="2">Associate's</option>
<option value-"3">Bachelor's</option>
<option value="4">Master's</option>
<option value="5">Doctorate's</option>
</select>
</label>

<label for="discipline">If you recieved post-secondary education, what was your academic field?<select id="discipline" required>
  <option value="1">Applied Science</option>
  <option value="2">Natural Science</option>
  <option value="3">Social Science</option>
  <option value="4">Business</option>
  <option value="5">Humanities</option>
  </select>
  </label>
  </fieldset>
  <!--Personality Questions-->
  <fieldset>
    <h2>Personality Questions</h2>
<p>Select which traits best describe you.</p>
  <label for="bashful"><input type="checkbox" id="bashful" value="1">Bashful
    </label>
    <label for="bold"><input type="checkbox" id="bold" value="2">Bold
    </label>
    <label for="disorganized"><input type="checkbox" id="disorganized" value="3">Disorganized
    </label>
    <label for="practical"><input type="checkbox" id="practical" value="4">Practical
    </label>
    <label for="kind"><input type="checkbox" id="kind" value="5">Kind
    </label>
    </fieldset>
  <!--Terms and Conditions-->
I accept the <a href="https://freecodecamp.org">terms and conditions</a> <label for="terms-and-conditions"><input type="checkbox" id="term-and-conditions" value="" required>
</label>
<!--Comments-->
<label for="comment">Please leave a comment on how I can improve this survey:<textarea id="comment" placeholder="comment"></textarea>
  </label>
  <!--Submission-->
  <label for="submit"><input type="submit" value="Submit">
  </label>
      </form>
    </body>
  </html>
/* file: styles.css */
label {display: block}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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:

You have too many mistakes in the html code. Check it out for yourself:

1 Like

Okay, I’m working on it again right now!
But I still don’t understand why I need to have two different labels, unless that’s also because of my mistakes?

Or could it be that my for and id should be different?

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