Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I don’t understand why they say that : Failed:40. All your checkboxes inside #survey-form should have a value attribute and value.
Can you explain to me what is wrong with my code ?
thanks a lot

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <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 method="post" action="https://register-demo.freecodecamp.org" id="survey-form">
    
    <!-- Section des champs de texte -->
    <fieldset>
      <label for="name" id="name-label">Name
        <input id="name" type="text" placeholder="Enter your name" required />
      </label> 
      <label for="email" id="email-label">Email
        <input id="email" type="email" placeholder="Enter your Email" required />
      </label> 
      <label for="number" id="number-label">Age (optional)
        <input id="number" type="number" name="age" min="13" max="120" placeholder="Age" />
      </label> 
    </fieldset>

    <!-- Section du choix de rôle -->
    <fieldset>
      <label for="dropdown">Which option best describes your current role?</label>
      <select id="dropdown" name="referrer">
        <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>
      </select>
    </fieldset>

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

    <!-- Section des améliorations souhaitées -->
    <fieldset>
      <legend>What would you like to see improved? (Check all that apply)</legend>
      
      <!-- Toutes les cases à cocher avec le bon attribut 'value' -->
      <input type="checkbox" id="Front-end-Projects" name="Improvement" value="Front-end-Projects">
      <label for="Front-end-Projects">Front-end Projects</label>
      
      <input type="checkbox" id="Back-end-Projects" name="Improvement" value="Back-end-Projects">
      <label for="Back-end-Projects">Back-end Projects</label>
      
      <input type="checkbox" id="Data-visualization" name="Improvement" value="Data-visualization">
      <label for="Data-visualization">Data visualization</label>
      
      <input type="checkbox" id="Challenges" name="Improvement" value="Challenges">
      <label for="Challenges">Challenges</label>
      
      <input type="checkbox" id="Open-source-Community" name="Improvement" value="Open-source-Community">
      <label for="Open-source-Community">Open source Community</label>
      
      <input type="checkbox" id="Gitter-help-rooms" name="Improvement" value="Gitter-help-rooms">
      <label for="Gitter-help-rooms">Gitter help rooms</label>
      
      <input type="checkbox" id="Videos" name="Improvement" value="Videos">
      <label for="Videos">Videos</label>
      
      <input type="checkbox" id="City-Meetups" name="Improvement" value="City-Meetups">
      <label for="City-Meetups">City Meetups</label>
      
      <input type="checkbox" id="Wiki" name="Improvement" value="Wiki">
      <label for="Wiki">Wiki</label>
      
      <input type="checkbox" id="Forum" name="Improvement" value="Forum">
      <label for="Forum">Forum</label>
      
      <input type="checkbox" id="Additional-Courses" name="Improvement" value="Additional-Courses">
      <label for="Additional-Courses">Additional Courses</label>
    </fieldset>

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

    <!-- Section des conditions -->
    <label for="terms-and-conditions">
      <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
    </label>

    <input id="submit" type="submit" value="Submit" />
  </form>
</body>
</html>


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

Hi there!

Place your code correctly between the pair three back ticks separately. Some of your code is not visible correctly.

3

Hi, I just started coding sorry if it’s an obvious mistake. I don’t know if all code was in the topic. To be sure it’s my code down here.

freeCodeCamp Survey Form

freeCodeCamp Survey Form

Thank you for taking the time to help us improve the platform

<!-- Section des champs de texte -->
<fieldset>
  <label for="name" id="name-label">Name
    <input id="name" type="text" placeholder="Enter your name" required />
  </label> 
  <label for="email" id="email-label">Email
    <input id="email" type="email" placeholder="Enter your Email" required />
  </label> 
  <label for="number" id="number-label">Age (optional)
    <input id="number" type="number" name="age" min="13" max="120" placeholder="Age" />
  </label> 
</fieldset>

<!-- Section du choix de rôle -->
<fieldset>
  <label for="dropdown">Which option best describes your current role?</label>
  <select id="dropdown" name="referrer">
    <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>
  </select>
</fieldset>

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

<!-- Section des améliorations souhaitées -->
<fieldset>
  <legend>What would you like to see improved? (Check all that apply)</legend>
  
  <!-- Toutes les cases à cocher avec le bon attribut 'value' -->
  <input type="checkbox" id="Front-end-Projects" name="Improvement" value="Front-end-Projects">
  <label for="Front-end-Projects">Front-end Projects</label>
  
  <input type="checkbox" id="Back-end-Projects" name="Improvement" value="Back-end-Projects">
  <label for="Back-end-Projects">Back-end Projects</label>
  
  <input type="checkbox" id="Data-visualization" name="Improvement" value="Data-visualization">
  <label for="Data-visualization">Data visualization</label>
  
  <input type="checkbox" id="Challenges" name="Improvement" value="Challenges">
  <label for="Challenges">Challenges</label>
  
  <input type="checkbox" id="Open-source-Community" name="Improvement" value="Open-source-Community">
  <label for="Open-source-Community">Open source Community</label>
  
  <input type="checkbox" id="Gitter-help-rooms" name="Improvement" value="Gitter-help-rooms">
  <label for="Gitter-help-rooms">Gitter help rooms</label>
  
  <input type="checkbox" id="Videos" name="Improvement" value="Videos">
  <label for="Videos">Videos</label>
  
  <input type="checkbox" id="City-Meetups" name="Improvement" value="City-Meetups">
  <label for="City-Meetups">City Meetups</label>
  
  <input type="checkbox" id="Wiki" name="Improvement" value="Wiki">
  <label for="Wiki">Wiki</label>
  
  <input type="checkbox" id="Forum" name="Improvement" value="Forum">
  <label for="Forum">Forum</label>
  
  <input type="checkbox" id="Additional-Courses" name="Improvement" value="Additional-Courses">
  <label for="Additional-Courses">Additional Courses</label>
</fieldset>

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

<!-- Section des conditions -->
<label for="terms-and-conditions">
  <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>

<input id="submit" type="submit" value="Submit" />
4

I can’t see your starting code. Like html, head and link elements. Because you pasted some of your code lines before (```) back ticks.

Try it in the next reply, use the settings option in reply options bar. There a preformatted text option, that will insert back ticks automatically in your reply editor. Then you need to paste your code blocks (html and css) within the pair of three back ticks separately, that the pair of three back ticks should remain on a separate line before and after your code.

5

I edit my topic
now it should be ok
i just have html for now and no styles.css

6

I haven’t found any issue in your code. And when I checking it in the challenge editor, it’s freezing my browser.

7

That’s weird, I really don’t understand why they don’t want to accept my code.

8

Remove that URL from the form element. It was not asked to add in the form.

9

Okay I did it but it still don’t work unfortunatelly

10

Hello and welcome to the forum community @Hikiwato !

It appears the checkbox for the terms and conditions may missing the value in the code. All of the rest appears good.
Nice job!

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like
11

It works !
Thank you so much for your help.
Have a good day bro.

1 Like