Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening: I’m getting the following errors :

“You should have a select field with an id of dropdown”

" Your #dropdown should be a descendant of #survey-form"

" You should have at least two radio buttons that are descendants of #survey-form ."

" You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form ."

As you all can see, it is pretty much due the same issue, being a descendant of survey-form.

Your code so far

<fieldset>
 <form id="survey-form">
        <label for="name" id="name-label"> Name <input type="text" id="name" placeholder="Enter your full name"required>
        </label>
        <label for="email" id="email-label"> Email<input type="email" id="email" placeholder="Enter your email"required>
        </label>
        <label for="number" id="number-label">Age (optional)<input type="number" id="number" placeholder="Enter your age" min="0" max="99">
        </label>
      </fieldset>
      <fieldset>
        <label for="dropdown"id="dropdown">Which option best describes your current role?</label>
    <select id="dropdown"> 
    <option value=""disabled selected>Select current role</option>  
    <option value="Student">Student</option> 
    <option value="Full time job">Full time job</option>
    <option value="Full time learner">Full time learner</option>
    <option value="other">other</option> 
 </select>
      </fieldset>
      <fieldset>
      <label for="Definitely" id="survey-form">Would you recommend freeCodeCamp to a friend?</label>
      <label for="Definitely">
      <input type="radio" id="Definitely" name="recommendation" class="radio-inline" 
 value="1"     checked>Definitely
      </label>
      <label for="maybe">
      <input type="radio" id="maybe" name="recommendation" class="radio-inline"
      value="2">Maybe
      </label>
      <label for="notsure">
      <input type="radio" id="notsure" name="recommendation" class="radio-inline"
      value="3">Not sure
      </label>
      </fieldset>
      <fieldset>
        <label for="dropdown" id="dropdown">What is your favorite feature of freeCodeCamp? </label>
        <select id="dropdown">
          <option value="" disabled selected>Select an option</option> 
          <option value="challenges">challenges</option>
          <option value="projects">projects</option>
          <option value="community">community</option>
          <option value="open source">open source</option>
          </select>
          </fieldset>
          <fieldset>What would you like to see improved? (Check all that apply)
            <label for="front">
<input type="checkbox"
id="front" name="front" value="1">Front-end Projects
<label for="back">
<input type="checkbox"
id="back" name="back" value="2"class="checkbox">Back-end Projects
<label for="data">
<input type="checkbox"
id="data" name="data" class="checkbox1" value="3">Data Visualization
<label for="Challenges">
<input type="checkbox"
id="Challenges" name="Challenges" class="checkbox2" value="4">Challenges
<label for="Open Source Community">
<input type="checkbox"
id="Open Source Community" name="Open Source Community" class="checkbox3" value="5">Open Source Community
<label for="Gitter help rooms">
<input type="checkbox"
id="Gitter help rooms" name="Gitter help rooms" class="checkbox4" value="6">Gitter help rooms
<label for="Videos">
<input type="checkbox"
id="Videos" name="Videos" class="checkbox5" value="7">Videos
<label for="City Meetups">
<input type="checkbox"
id="City Meetups" name="City Meetups" class="checkbox6" value="8">City Meetups
<label for="Wiki">
<input type="checkbox"
id="Wiki" name="Wiki" class="checkbox7" value="9">Wiki

<label for="Forum">
<input type="checkbox"
id="Forum" name="Forum" class="checkbox8" value="10">Forum

<label for="Additional Courses">
<input type="checkbox"
id="Additional Courses" name="Additional Courses" class="checkbox9" value="11">Additional Courses
</fieldset>

<label for="comment">Any comments or suggestions?</label>
<textarea id="comment" name="suggestions" rows="5" cols="45" placeholder="Enter your comment here...">
</textarea>
<div>
  <button type="submit" id="submit">Submit</submit>
  </form>

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Welcome to ffc forum. You didn’t post your actual code. Post your entire code here, then anyone can help you.
@Rainier

3 
<fieldset>
 <form id="survey-form">
        <label for="name" id="name-label"> Name <input type="text" id="name" placeholder="Enter your full name"required>
        </label>
        <label for="email" id="email-label"> Email<input type="email" id="email" placeholder="Enter your email"required>
        </label>
        <label for="number" id="number-label">Age (optional)<input type="number" id="number" placeholder="Enter your age" min="0" max="99">
        </label>
      </fieldset>
      <fieldset>
        <label for="dropdown"id="dropdown">Which option best describes your current role?</label>
    <select id="dropdown"> 
    <option value=""disabled selected>Select current role</option>  
    <option value="Student">Student</option> 
    <option value="Full time job">Full time job</option>
    <option value="Full time learner">Full time learner</option>
    <option value="other">other</option> 
 </select>
      </fieldset>
      <fieldset>
      <label for="Definitely" id="survey-form">Would you recommend freeCodeCamp to a friend?</label>
      <label for="Definitely">
      <input type="radio" id="Definitely" name="recommendation" class="radio-inline" 
 value="1"     checked>Definitely
      </label>
      <label for="maybe">
      <input type="radio" id="maybe" name="recommendation" class="radio-inline"
      value="2">Maybe
      </label>
      <label for="notsure">
      <input type="radio" id="notsure" name="recommendation" class="radio-inline"
      value="3">Not sure
      </label>
      </fieldset>
      <fieldset>
        <label for="dropdown" id="dropdown">What is your favorite feature of freeCodeCamp? </label>
        <select id="dropdown">
          <option value="" disabled selected>Select an option</option> 
          <option value="challenges">challenges</option>
          <option value="projects">projects</option>
          <option value="community">community</option>
          <option value="open source">open source</option>
          </select>
          </fieldset>
          <fieldset>What would you like to see improved? (Check all that apply)
            <label for="front">
<input type="checkbox"
id="front" name="front" value="1">Front-end Projects
<label for="back">
<input type="checkbox"
id="back" name="back" value="2"class="checkbox">Back-end Projects
<label for="data">
<input type="checkbox"
id="data" name="data" class="checkbox1" value="3">Data Visualization
<label for="Challenges">
<input type="checkbox"
id="Challenges" name="Challenges" class="checkbox2" value="4">Challenges
<label for="Open Source Community">
<input type="checkbox"
id="Open Source Community" name="Open Source Community" class="checkbox3" value="5">Open Source Community
<label for="Gitter help rooms">
<input type="checkbox"
id="Gitter help rooms" name="Gitter help rooms" class="checkbox4" value="6">Gitter help rooms
<label for="Videos">
<input type="checkbox"
id="Videos" name="Videos" class="checkbox5" value="7">Videos
<label for="City Meetups">
<input type="checkbox"
id="City Meetups" name="City Meetups" class="checkbox6" value="8">City Meetups
<label for="Wiki">
<input type="checkbox"
id="Wiki" name="Wiki" class="checkbox7" value="9">Wiki

<label for="Forum">
<input type="checkbox"
id="Forum" name="Forum" class="checkbox8" value="10">Forum

<label for="Additional Courses">
<input type="checkbox"
id="Additional Courses" name="Additional Courses" class="checkbox9" value="11">Additional Courses
</fieldset>

<label for="comment">Any comments or suggestions?</label>
<textarea id="comment" name="suggestions" rows="5" cols="45" placeholder="Enter your comment here...">
</textarea>
<div>
  <button type="submit" id="submit">Submit</submit>
  </form>
4

There are a few corrections and improvements that can be made to the HTML code:

  1. Closing tags for <input> elements should end with > instead of />.
  2. The closing </submit> tag should be </button>.
  3. The closing </fieldset> tags are missing for some fieldsets.
  4. The id attribute should be unique for each element, but there are duplicates like id="dropdown".
  5. The for attribute in <label> tags should match the corresponding input element’s id.
  6. There are missing closing </label> tags for some checkboxes.
  7. The <label> tags for checkboxes are not properly nested within each other.

Here’s the corrected HTML:

<fieldset>
  <form id="survey-form">
    <label for="name" id="name-label">Name
      <input type="text" id="name" placeholder="Enter your full name" required>
    </label>
    <label for="email" id="email-label">Email
      <input type="email" id="email" placeholder="Enter your email" required>
    </label>
    <label for="number" id="number-label">Age (optional)
      <input type="number" id="number" placeholder="Enter your age" min="0" max="99">
    </label>
</fieldset>
<fieldset>
  <label for="dropdown">Which option best describes your current role?</label>
  <select id="dropdown">
    <option value="" disabled selected>Select current role</option>
    <option value="Student">Student</option>
    <option value="Full time job">Full time job</option>
    <option value="Full time learner">Full time learner</option>
    <option value="other">Other</option>
  </select>
</fieldset>
<fieldset>
  <label for="recommendation">Would you recommend freeCodeCamp to a friend?</label>
  <label for="Definitely">
    <input type="radio" id="Definitely" name="recommendation" class="radio-inline" value="1" checked>Definitely
  </label>
  <label for="maybe">
    <input type="radio" id="maybe" name="recommendation" class="radio-inline" value="2">Maybe
  </label>
  <label for="notsure">
    <input type="radio" id="notsure" name="recommendation" class="radio-inline" value="3">Not sure
  </label>
</fieldset>
<fieldset>
  <label for="favorite-feature">What is your favorite feature of freeCodeCamp?</label>
  <select id="favorite-feature">
    <option value="" disabled selected>Select an option</option>
    <option value="challenges">Challenges</option>
    <option value="projects">Projects</option>
    <option value="community">Community</option>
    <option value="open-source">Open Source</option>
  </select>
</fieldset>
<fieldset>
  <label for="improvements">What would you like to see improved? (Check all that apply)</label>
  <label for="front">
    <input type="checkbox" id="front" name="front" value="1">Front-end Projects
  </label>
  <label for="back">
    <input type="checkbox" id="back" name="back" value="2">Back-end Projects
  </label>
  <!-- Repeat for other checkboxes -->
</fieldset>
<label for="comment">Any comments or suggestions?</label>
<textarea id="comment" name="suggestions" rows="5" cols="45" placeholder="Enter your comment here..."></textarea>
<div>
  <button type="submit" id="submit">Submit</button>
</form>
</div>

@Rainier

5

I did the corrections, and I still getting this errors:

“Your #dropdown should be a descendant of #survey-form .”

" You should have at least two radio buttons that are descendants of #survey-form ."

" You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form ."

  • All your checkboxes inside #survey-form should have a value attribute and value.

  • Failed:You should have at least one textarea element that is a descendant of #survey-form.

Your #submit should be a descendant of #survey-form .

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport content"= "width=device-width, initial-scale=1.0">
    <title> Survey form </title>
      <link rel="stylesheet" href="styles.css">
      </head>
      <body>
      <h1 id="title"> freeCodeCamp Survey Form</h1>
<p id="description"> The platform that will get you results</p>
      
      <fieldset>
 <form id="survey-form">
        <label for="name" id="name-label"> Name <input type="text" id="name" placeholder="Enter your full name"required>
        </label>
        <label for="email" id="email-label"> Email<input type="email" id="email" placeholder="Enter your email"required>
        </label>
        <label for="number" id="number-label">Age (optional)<input type="number" id="number" placeholder="Enter your age" min="0" max="99">
        </label>
      </fieldset>

      <fieldset>
        <label for="dropdown">Which option best describes your current role?</label>
    <select id="dropdown"> 
    <option value=""disabled selected>Select current role</option>  
    <option value="Student">Student</option> 
    <option value="Full time job">Full time job</option>
    <option value="Full time learner">Full time learner</option>
    <option value="other">other</option> 
 </select>
      </fieldset>

      <fieldset>
      <label for="recommendation">Would you recommend freeCodeCamp to a friend?</label>
      <label for="Definitely">
      <input type="radio" id="Definitely" name="recommendation" class="radio-inline" 
 value="1" checked>Definitely
      </label>
      <label for="maybe">
      <input type="radio" id="maybe" name="recommendation" class="radio-inline"
      value="2">Maybe
      </label>
      <label for="notsure">
      <input type="radio" id="notsure" name="recommendation" class="radio-inline"
      value="3">Not sure
      </label>
      </fieldset>

      <fieldset>
        <label for="favorite-feature">What is your favorite feature of freeCodeCamp? </label>
        <select id="favorite-feature">
          <option value="" disabled selected>Select an option</option> 
          <option value="challenges">challenges</option>
          <option value="projects">projects</option>
          <option value="community">community.     </option>
          <option value="open source">open source  </option>
          </select>
          </fieldset>

          <fieldset>
            <label for="improvement">What would you like to see improved? (Check all that apply)</label>
            <label for="front">
<input type="checkbox" id="front" name="front" value="1">Front-end Projects</label>
<label for="back">
<input type="checkbox"
id="back" name="back" value="2"class="checkbox">Back-end Projects</label>
<label for="data">
<input type="checkbox"
id="data" name="data" class="checkbox1" value="3">Data Visualization</label>
<label for="Challenges">
<input type="checkbox"
id="Challenges" name="Challenges" class="checkbox2" value="4">Challenges</label>
<label for="Open Source Community">
<input type="checkbox"
id="Open Source Community" name="Open Source Community" class="checkbox3" value="5">Open Source Community</label>
<label for="Gitter help rooms">
<input type="checkbox"
id="Gitter help rooms" name="Gitter help rooms" class="checkbox4" value="6">Gitter help rooms</label>
<label for="Videos">
<input type="checkbox"
id="Videos" name="Videos" class="checkbox5" value="7">Videos</label>
<label for="City Meetups">
<input type="checkbox"
id="City Meetups" name="City Meetups" class="checkbox6" value="8">City Meetups</label>
<label for="Wiki">
<input type="checkbox"
id="Wiki" name="Wiki" class="checkbox7" value="9">Wiki</label>

<label for="Forum">
<input type="checkbox"
id="Forum" name="Forum" class="checkbox8" value="10">Forum</label>

<label for="Additional Courses">
<input type="checkbox"
id="Additional Courses" name="Additional Courses" class="checkbox9" value="11">Additional Courses</label>
</fieldset>

<label for="comment">Any comments or suggestions?</label>
<textarea id="comment" name="suggestions" rows="5" cols="45" placeholder="Enter your comment here...">
</textarea>
<div>
  <button type="submit" id="submit">Submit</button>
 </div>
  </form>
</body>
</html>
type or paste code here
6

Here’s the modified HTML code according to the given requirements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Survey form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">The platform that will get you results</p>
  
  <form id="survey-form">
    <fieldset>
      <label for="name" id="name-label">Name <input type="text" id="name" name="name" placeholder="Enter your full 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="age" placeholder="Enter your age" min="0" max="99"></label>
    </fieldset>

    <fieldset>
      <label for="dropdown">Which option best describes your current role?</label>
      <select id="dropdown" name="current-role"> 
        <option value="" disabled selected>Select current role</option>  
        <option value="Student">Student</option> 
        <option value="Full time job">Full time job</option>
        <option value="Full time learner">Full time learner</option>
        <option value="other">Other</option> 
      </select>
    </fieldset>

    <fieldset>
      <label>Would you recommend freeCodeCamp to a friend?</label>
      <label for="Definitely">
        <input type="radio" id="Definitely" name="recommendation" class="radio-inline" value="Definitely" checked>Definitely
      </label>
      <label for="maybe">
        <input type="radio" id="maybe" name="recommendation" class="radio-inline" value="Maybe">Maybe
      </label>
      <label for="notsure">
        <input type="radio" id="notsure" name="recommendation" class="radio-inline" value="Not sure">Not sure
      </label>
    </fieldset>

    <fieldset>
      <label for="favorite-feature">What is your favorite feature of freeCodeCamp?</label>
      <select id="favorite-feature" name="favorite-feature">
        <option value="" disabled selected>Select an option</option> 
        <option value="challenges">Challenges</option>
        <option value="projects">Projects</option>
        <option value="community">Community</option>
        <option value="open source">Open Source</option>
      </select>
    </fieldset>

    <fieldset>
      <label for="improvement">What would you like to see improved? (Check all that apply)</label>
      <label for="front">
        <input type="checkbox" id="front" name="improvement[]" value="Front-end Projects">Front-end Projects
      </label>
      <label for="back">
        <input type="checkbox" id="back" name="improvement[]" value="Back-end Projects">Back-end Projects
      </label>
      <!-- Add more checkboxes with proper values -->
    </fieldset>

    <fieldset>
      <label for="comment">Any comments or suggestions?</label>
      <textarea id="comment" name="comments" rows="5" cols="45" placeholder="Enter your comment here..."></textarea>
    </fieldset>
    
    <div>
      <button type="submit" id="submit">Submit</button>
    </div>
  </form>
</body>
</html>

Changes made:

  • Added name attributes to form elements to ensure they are submitted properly.
  • Modified the checkbox name attribute to improvement[] to allow multiple selections to be submitted as an array.
  • Added a name attribute to the radio buttons to ensure only one option is selected and submitted.
  • Added a name attribute to the textarea for submitting comments.

@Rainier

7

I provided you modified code, but you need to do it yourself. Copy paste is not a good idea for learning. I suggest you to start practicing from previous project.
@Rainier

8

Hey Hasan, I did the corrections you pointed out, and I still was having the same errors, luckily, i was able to find out the solution, I added the form element to every “block” of the form, not sure if I m being clear enough.

Thanks for your help.

Here is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport content"= "width=device-width, initial-scale=1.0">
    <title> Survey form </title>
      <link rel="stylesheet" href="styles.css">
      </head>
      <body>
      <h1 id="title"> freeCodeCamp Survey Form</h1>
<p id="description"> The platform that will get you results</p>
      
      <fieldset>
 <form id="survey-form">
        <label for="name" id="name-label"> Name <input type="text" id="name" name="name" placeholder="Enter your full name"required>
        </label>
        <label for="email" id="email-label"> Email<input type="email" id="email" name="mail" placeholder="Enter your email"required>
        </label>
        <label for="number" id="number-label">Age (optional)<input type="number" id="number" name="age" placeholder="Enter your age" min="0" max="99">
        </label>
        </form>
      </fieldset>

      <fieldset>
        <form id="survey-form">
        <label for="dropdown">Which option best describes your current role?</label>
    <select id="dropdown" name="current-role"> 
    <option value=""disabled selected>Select current role</option>  
    <option value="Student">Student</option> 
    <option value="Full time job">Full time job</option>
    <option value="Full time learner">Full time learner</option>
    <option value="other">other</option> 
 </select>
 </form>
      </fieldset>

      <fieldset>
        <form id="survey-form">
      <label for="recommendation">Would you recommend freeCodeCamp to a friend?</label>
      <label for="Definitely">
      <input type="radio" id="Definitely" name="recommendation" class="radio-inline" 
 value="Definitely" checked>Definitely
      </label>
      <label for="maybe">
      <input type="radio" id="maybe" name="recommendation" class="radio-inline"
      value="maybe">Maybe
      </label>
      <label for="notsure">
      <input type="radio" id="notsure" name="recommendation" class="radio-inline"
      value="notsure">Not sure
      </label>
      </form>
      </fieldset>

      <fieldset>
        <form id="survey-form">
        <label for="favorite-feature">What is your favorite feature of freeCodeCamp? </label>
        <select id="favorite-feature" name="favorite-feature">
          <option value="" disabled selected>Select an option</option> 
          <option value="challenges">challenges</option>
          <option value="projects">projects</option>
          <option value="community">community.     </option>
          <option value="open source">open source  </option>
          </select>
          </form>
          </fieldset>

          <fieldset>
            <form id="survey-form">
            <label for="improvement">What would you like to see improved? (Check all that apply)</label>
            <label for="front">
<input type="checkbox" id="front" name="front" value="front-end">Front-end Projects</label>
<label for="back">
<input type="checkbox"id="back" name="back" value="back-end"class="checkbox">Back-end Projects</label>
<label for="data">
<input type="checkbox"
id="data" name="data" class="checkbox1" value="data">Data Visualization</label>
<label for="Challenges">
<input type="checkbox"
id="Challenges" name="Challenges" class="checkbox2" value="challenges">Challenges</label>
<label for="Open Source Community">
<input type="checkbox"
id="Open Source Community" name="Open Source Community" class="checkbox3" value="open-source">Open Source Community</label>
<label for="Gitter help rooms">
<input type="checkbox"
id="Gitter help rooms" name="Gitter help rooms" class="checkbox4" value="Gitter">Gitter help rooms</label>
<label for="Videos">
<input type="checkbox"
id="Videos" name="Videos" class="checkbox5" value="videos">Videos</label>
<label for="City Meetups">
<input type="checkbox"
id="City Meetups" name="City Meetups" class="checkbox6" value="meetups">City Meetups</label>
<label for="Wiki">
<input type="checkbox"
id="Wiki" name="Wiki" class="checkbox7" value="Wiki">Wiki</label>
<label for="Forum">
<input type="checkbox"
id="Forum" name="Forum" class="checkbox8" value="Forum">Forum</label>
<label for="Additional Courses">
<input type="checkbox"
id="Additional Courses" name="Additional Courses" class="checkbox9" value="Courses">Additional Courses</label>
</form>
</fieldset>

<fieldset>
  <form id="survey-form">
<label for="comment">Any comments or suggestions?</label>
<textarea id="comment" name="comments" rows="5" cols="45" placeholder="Enter your comment here...">
</textarea>

      <button type="submit" id="submit">Submit</button>
  </form>
</fieldset>
</body>
</html>
type or paste code here
9

Now your project is passed or not? Because you should have only one form element in the project and your all other elements should be descendents of your form.
@Rainier

10

Yes, the project passed.

Regards,

11

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