Survey Form - Build a Survey Form

Tell us what’s happening:
Greetings! I was just curious as to why I needed to assign an id =“value” to my label element…? Isn’t an id attribute just for the input element in the code? (Placed the part in a comment) I was able to solve why it wasnt passing, and because I got it finally working thru tinkering, I wanted a more logical answer so to speak… I’m new to coding and have just begun my journey two weeks ago. Thank you so much!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>freeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="styles.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>
    
    <form id="survey-form">
    
    <fieldset>

      <--! this part i'm curious as to why?

        <label for="name">Name <input type="text" id="name" name="name" placeholder="Enter your name" required/></label>

        -->
        
        <label for="email" id="email-label">Email <input type="email" id="email" name="email" placeholder="Enter your email"required/></label>
        <label for="number" id="number-label">Age (optional) <input type="number" id="number" name="number" min="10" max="99" placeholder="Age"/></label>
 
       
        <label for="dropdown">Which option best describes your current role? 
          <select id="dropdown" name="dropdown">
            <option value="">Select current role</option>
            <option value="1">Student</option>
            <option value="2">Fulltime Job</option>
            <option value="3">Fulltime Learner</option>
            <option value="4">Prefer not to say</option> 
            <option value="5">Other</option>
          </select>
        </label>
      
        <label><input type="radio" id="definitely" name="def-maybe-not" value="definitely" checked/> Definitely</label>
        <label><input type="radio" id="maybe" name="def-maybe-not" value="maybe"/> Maybe</label>
        <label><input type="radio" id="not-sure" name="def-maybe-not" value="not-sure"/> Not Sure</label>
        
        <label for="dropdown">What is your favorite feature of freeCodeCamp? 
          <select id="dropdown" name="dropdown">
            <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>

        <label><input id="front-end" name="improve" value="front-end" type="checkbox"/> Front-end Projects</label>
        <label><input id="back-end" name="improve" value="back-end" type="checkbox"/> Back-end Projects</label>
        <label><input id="datavisual" name="improve" value="datavisual" type="checkbox"/> Data Visualization</label>
        <label><input id="challenges" name="improve" value="challenges" type="checkbox"/> Challenges</label>
        <label><input id="opensource" name="improve" value="opensource" type="checkbox"/> Open Source Community</label>
        <label><input id="gitter" name="improve" value="gitter" type="checkbox"/> Gitter help rooms</label>
        <label><input id="videos" name="improve" value="videos" type="checkbox"/> Videos</label>
        <label><input id="meetup" name="improve" value="meetup" type="checkbox"/> City Meetups</label>
        <label><input id="wiki" name="improve" value="wiki" type="checkbox"/> Wiki</label>
        <label><input id="forum" name="improve" value="forum" type="checkbox"/> Forum</label>
        <label><input id="addcourses" name="improve" value="addcourses" type="checkbox"/> Additional Courses</label>

        <label for="comments-suggestions">Any comments or suggestions? <textarea id="comments-suggestions" name="comments-suggestions" rows="3" cols="30" placeholder="Enter your comments here..."></textarea></label>

        <input type="submit" id="submit"/>
      </fieldset>
    </form>
  </body>
</html>
/* file: styles.css */
label {
  display: block;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Id attributes can be added to all elements to distinguish them from each other in the css or in a JavaScript program (or in other contexts).

Perhaps the id was needed by the test code to distinguish that you have completed the requirement. But even without the freecodecamp environment, ids are used whenever you need to uniquely identify an html element.

Ah - so it’s one of those things that apply to many. Thank you!

1 Like