Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening: So one of the tasks ask:" 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 ." The issue that I am having is when i enter “name-label” “email-label”, “number-label” into the form section where the label elements are, and check my code, they still show errors and other tasks that have been checked turn into an error. Please advise.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  </html>
   <head>
     <meta charset="UTF-8">
     <title> freeCodeCamp Survey Form
       </title>
     <link ref="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" action="https://survey-form.freecodecamp.rocks" method="post">
    <fieldset>
      <label for="name">Enter your name <input id="name" type="text" placeholder="Enter your name" required> </label>
      <label for="email">Enter your email <input type="email" id="email" placeholder="Enter your email" required></label>
      <label for="number">Age <input id="number" type="number" placeholder="age" min="13" max="120"></label>
      <!-- NOT SURE ABOUT DROPDOWN INPUT? --> <!-- TURNS OUT IT WAS SELECT ID="" -->

      <label for="dropdown">Which option best  describes your current role? </label>
      <select id="dropdown" name="dropdown">
        <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>
      <!-- NOT SURE ABOUT DROPDOWN INPUT? -->
      <!-- TURNS OUT IT WAS SELECT ID="" -->
      </select>
    </fieldset>
    <fieldset>
      <label> Would you recommend freeCodeCamp to a friend?</label>
    <label><input type="radio" /> Definitely </label>
    <label><input type="radio" /> Maybe</label>
    <label><input type="radio" /> Not Sure</label>
    </fieldset>
    <!-- EACH FIELDSET NEEDS A NEW INPUT -->
    <fieldset>
      <label for="favorite">What is your favorite feature of freeCodeCamp?</label>
    <select id="favorite" name="favorite">
      <option>Select An Option</option>
      <option>Challenges</option>
      <option>Projects</option>
      <option>Community</option>
      <option>Open Source</option>
      </select>
    </fieldset>
    <fieldset>
      <label>What would you like to see improved? (Check all that apply)</label>
      <label><input type="checkbox" value="Front-end Projects" />Front-end Projects</label>
      <label><input type="checkbox" value="Back-end Projects
" />Back-end Projects</label>
      <label><input type="checkbox" value="Data Visualization
" />Data Visualization
</label>
      <label><input type="checkbox" value="Challenges
" />Challenges</label>
      <label><input type="checkbox" value="Open Source Community
" />Open Source Community</label>
      <label><input type="checkbox" value="Gitter help rooms
" />Gitter help rooms</label>
      <label><input type="checkbox" value="Videos" />Videos</label>
      <label><input type="checkbox" value="City Meetups" />City Meetups</label>
      <label><input type="checkbox" value="Wiki" />Wiki</label>
      <label><input type="checkbox" value="Forum" />Forum</label>
      <label><input type="checkbox" value="Additional Courses"/>Additional Courses</label>
    </fieldset>
    <fieldset>
      <label>Any comments or suggestions? </label>
      <textarea <input placeholder="Enter your comment here...."/>
        </textarea>
    </fieldset>
        <button> <input type="submit" value="Submit" />
        </button>
      </form>
  </body>

/* file: styles.css */
body{
  width:100%;
  height:100vh;
  margin:0;
background-color:#1b1b32;
box-shadow: 100px;
  color: #f5f6f7;
}
label{
  display:block;
  margin:0.5rem 0;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

can you write the code and show it to us (the one that didn’t work?)

4 
  <label for="name-label">Enter your name <input id="name-label" type="text" placeholder="Enter your name" required> </label>
  <label for="email-label">Enter your email <input type="email" id="email-label" placeholder="Enter your email" required></label>
  <label for="number-label">Age <input id="number-label" type="number" placeholder="age" min="13" max="120"></label>
5

The labels are the ones that need these ids.

1 Like
6

Thank you, This worked. As simple as the task was asked, it’s confusing. Appreciate it.

1 Like