Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
I need help with the “You should have a select field with an id of dropdown .”. so far everything look good on my end but when I try to run test it the code show up ’ You should have a select field with an id of dropdown .’ Which I do have id of dropdown in select. I’m confuse about it. Thank you

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>freeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>freeCodeCamp Survey Form</h1>
    <p id='description'>Thank you for taking the time to help us improve the platform</p>
    <form id='survey-form'>
      <label id='name-label' for="name">Enter Your Name: <input id='name-label' name="name" type="text" placeholder='Enter your name' required /></label>
        <label id='email-label' for="email">Enter Your Email: <input id='email-label' name="email" type="email" placeholder='Enter your email' required /></label>
        <label id="number-label" for='age'>Age (optional): <input id="number-label" name='age' type='number' placeholder='Age' min="13" max="120" ></label>
        <label id ='dropdown' for='role' name='role'>Which option best describes your current role? 
          <select id="role" name="role">
            <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'>Perfer not to say</option>
            <option value='5'>Other</option>
          </select>
        </label>
        <legend> Would you recommend freeCodeCamp to a friend?</legend>
        <label for="def-ref"><input id="def-ref" type="radio" name="account-type" class="inline" checked /> Definitly</label>
        <label for="maybe-ref"><input id="maybe-ref" type="radio" name="account-type" class="inline" checked /> Maybe</label>
        <label for="no-ref"><input id="no-ref" type="radio" name="account-type" class="inline" checked />Not sure</label>
        <label for='role' name='role'>What is your favorite feature of freeCodeCamp?
          <select id="dropdown" name="role">
            <option value=''>Select an options</option>
            <option value='1'>Challenges</option>
            <option value='2'>Community</option>
            <option value='3'>Projects</option>
            <option value='4'>Open Source</option>
        </label>
        <label id='check'>
          <legend>What would you like to see improved? (Check all that apply)</legend>
           <input class="inline" id="check" type="checkbox"/>Front-end Projects
           <input class="inline" id="check" type="checkbox"/>Back-end Projects
           <input class="inline" id="check" type="checkbox"/>Data Visualization
           <input class="inline" id="check" type="checkbox"/>Challenges
           <input class="inline" id="check" type="checkbox"/>Open Source Community
           <input class="inline" id="check" type="checkbox"/>Gitter help rooms
           <input class="inline" id="check" type="checkbox"/>Videos
           <input class="inline" id="check" type="checkbox"/>City Meetups
           <input class="inline" id="check" type="checkbox"/>Wiki
           <input class="inline" id="check" type="checkbox"/>Forum
           <input class="inline" id="check" type="checkbox"/>Additional Courses
          </label>
      <label for="bio">Any comments or suggestions?
          <textarea id="bio" name="bio" rows="13" cols="30" placeholder="Enter your comment here..."></textarea>
        </label>
    </form>
  </body>
</html>

/* file: styles.css */
label {
  display: block;
  margin: 0.5rem 0;
}
input, textarea {
  background-color: white;
  border: 0.5px solid #0a0a23;
  color: #ffffff;
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}
.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}
.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hi there and welcome to our community!

Your second select element does have an id of ‘dropdown’ but you’ve missed out the closing select tag.

You have also duplicated this id in a label element further up in your code however, which is not permitted. Every id attribute in your document should have a unique value.

These two issues are likely causing this test to fail for you.

3

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