Survey Form - Build a Survey Form

HTML-CSS
21 
<!DOCTYPE html>
<html lang="en">
  <header>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css" />
    <title>freeCodeCamp Survey Form</title>
    </header>
    <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" class="survey-form">
      <fieldset>
         <label for="name">Name<input id="name"  type="text" name="name" required placeholder="Enter your Name"  /></label>
         <label for="email">Email<input id="email"  type="number" placeholder="Enter your Email" required /></label>
        <label for="age">Age <small>(optional)</small> <input id="age" type="number" min="10" max="99" placeholder="Age" /  ></label>
           <label for="referrer">Which option best describes your current role?<select id="referrer" 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>
             </label>
           </fieldset>
           <fieldset>
             <label>Would you recommend freeCodeCamp to a friend?
                    <label for="definetly"><input id="definetly" type="radio" name="attribute" class="inline" />Definetly
                                      <label for="maybe"><input id="maybe" type="radio" name="attribute" class="inline" />Maybe
                                                        <label for="not sure"><input id="not sure" type="radio" name="attribute" class="inline" />Not sure</label>
             </fieldset>
         <fieldset>
           <label for="option">What is your favorite feature of freeCodeCamp?</label><select id="option" name="option">
            <option value="">Select an option
            </option>
             <option value="1">Challenges</option>
            <option value="2">Projects</option>
               <option value="3">Community</option>
                        <option value="3">Open Source</option>
                        </select>
                    </fieldset>
                    <fieldset>
                     <label for="opinion">What would you like to see improved?<small> (Check all that apply)</small></label>
                     <label for="front-end"><input id="front-end" type="checkbox" value="front-end" class="inline"  /> Front-end Projects</label>
<label for="front-end"><input id="back-end" type="checkbox" value="back-end" class="inline"  /> Back-end Projects</label>
<label for="data-visualization"><input id="data-visualization" type="checkbox" value="data-visualization" class="inline"  /> Data Visualization</label>
<label for="challenges"><input id="challenges" type="checkbox" value="challenges" class="inline"  /> Challenges</label>
<label for="open source community"><input id="open source community" type="checkbox" value="open source community" class="inline"  /> Open Source Community</label>
<label for="gitter help rooms"><input id="gitter help rooms" type="checkbox" value="gitter help rooms" class="inline"  /> Gitter help rooms</label>
<label for="videos"><input id="videos" type="checkbox" value="videos" class="inline"  /> Videos</label>
<label for="city meetups"><input id="city meetups" type="checkbox" value="city meetups" class="inline"  /> City Meetups</label>
<label for="wiki"><input id="wiki" type="checkbox" value="wiki" class="inline"  /> Wiki</label>
<label for="forum"><input id="forum" type="checkbox" value="forum" class="inline"  /> Forum</label>
<label for="additional courses"><input id="additional courses" type="checkbox" value="additional courses" class="inline"  /> Additional Courses</label>
         </fieldset>
         <fieldset>
           <label for="comments">Any comments or suggestions?<textarea rows="6" cols="100" placeholder="Enter your comments here..."></textarea>
           </label>
           <fieldset>
             <input id="submit" type="submit" value="Submit"/>
             </form>
</body>
</html>
22

change your email id to email and do email required
and age id to number and also label for also number

23

thnks. Everything is good.

1 Like
24

You didn’t follow their conditions in the id name and in some other cases like all radio buttons with name and value and so on. So " Your #name should be a descendant of #survey-form" error was showing.
Compare this code with yours now. I tried it and it was completely passed

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css" />
    <title>freeCodeCamp Survey Form</title>
    </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" class="survey-form">
        <fieldset>
          <label for="name" id="name-label">Name</label>
          <input id="name" type="text" placeholder="Enter your Name" required/>
          <label for="email" id="email-label">Email</label>
          <input id="email" type="email" placeholder="Enter your Email" required/>
          <label for="number" id="number-label">Age <small>(optional)</small></label>
          <input id="number" type="number" min="10" max="99" placeholder="Age"/>
          <label for="referrer">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>
      
        <fieldset>
          <label>Would you recommend freeCodeCamp to a friend?</label>
          <label for="definetly">Definetly</label>
          <input id="definetly" type="radio" value="definitely" name="attribute" class="inline"/>
          <label for="maybe">Maybe</label>
          <input id="maybe" type="radio" value="maybe" name="attribute" class="inline"/>
          <label for="not sure">Not sure</label>
          <input id="not sure" type="radio" value="not sure" name="attribute" class="inline"/>
        </fieldset>

        <fieldset>
          <label for="option">What is your favorite feature of freeCodeCamp?</label>
          <select id="option" name="option">
            <option value="">Select an option</option>
            <option value="1">Challenges</option>
            <option value="2">Projects</option>
            <option value="3">Community</option>
            <option value="3">Open Source</option>
          </select>
        </fieldset>
                    
        <fieldset>
        <label for="opinion">What would you like to see improved?<small> (Check all that apply)</small></label>
        <label for="front-end">Front-end Projects</label>
        <input id="front-end" type="checkbox" value="front-end" class="inline"/>
        <label for="front-end">Back-end Projects</label>
        <input id="back-end" type="checkbox" value="back-end" class="inline"/>
        <label for="data-visualization">Data Visualization</label>
        <input id="data-visualization" type="checkbox" value="data-visualization" class="inline"/> 
        <label for="challenges"><input id="challenges" type="checkbox" value="challenges" class="inline"/>Challenges</label>
        <label for="open source community">Open Source Community</label>
        <input id="open source community" type="checkbox" value="open source community" class="inline"/>
        <label for="gitter help rooms">Gitter help rooms</label>
        <input id="gitter help rooms" type="checkbox" value="gitter help rooms" class="inline"/> 
        <label for="videos">Videos</label>
        <input id="videos" type="checkbox" value="videos" class="inline"/>
        <label for="city meetups"> City Meetups</label>
        <input id="city meetups" type="checkbox" value="city meetups" class="inline"/>
        <label for="wiki">Wiki</label>
        <input id="wiki" type="checkbox" value="wiki" class="inline"/>
        <label for="forum">Forum</label>
        <input id="forum" type="checkbox" value="forum" class="inline"/>
        <label for="additional courses">Additional Courses</label>
        <input id="additional courses" type="checkbox" value="additional courses" class="inline"/>
        </fieldset>
         
        <fieldset>
          <label for="comments">Any comments or suggestions?</label>
          <textarea rows="6" cols="100" placeholder="Enter your comments here..."></textarea>
        </fieldset>

        <fieldset>
            <input id="submit" type="submit" value="Submit"/>
        </fieldset>
    </form>
</body>
</html>
1 Like
25

Thnks. I have fixed it. Code works!!!

1 Like
27

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