Build a Survey Form - CSS Grids and Forms

HTML-CSS
1

Hi everyone, I have a doubt about using CSS Grid in a HTML Form. To use the grid I need to create various <div> inside a <form> , by doing this am I screwing up the form? Since the test suite is giving me a bunch of errors while before going with the grid i had none?

<div class="container">

    <div class="c1">  
        <p>* Name:</p>
    </div>
        
    <div class="c2">
      <form id="survey-form" action="#">
          <label for="name" id="name-label">
           <input id="name" type="text" name="name" placeholder="Enter your name" required>
          </label>
    </div>
    
      <div class="c3">
        <p>* Email:</p>
      </div>
      
      <div class="c4">          
        <label for="email" id="email-label">
             <input id="email" type="email" name="email" placeholder="Enter your Email" required>
        </label>
      </div>
      
      <div class="c5">
        <p>* Age:</p> 
      </div>
      
      <div class="c6">
      <label for="number" id="number-label">
        <input id="number" type="number" name="age" placeholder="Age" min="1" max="200" required>
      </label>
      </div>

      <div class="c7">
        <p>Which option best describes your current role?</p>
      </div>
      
      <div class="c8">
        <label for="dropdown" id="role-label">
         <select name="ocupation" id="dropdown">
           <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="prefer-not-to-say">Prefer not to say</option>
           <option value="other">Other</option>
         </select>
        </label>
      </div>
      
      <div class="c9">
                   <p>How likely is that you would recommend freeCodeCamp to a friend?</p>
      </div>
  
      <div class="c10">
        <label for="recommend" id="label-recommend">
        <input type="radio" name="recommend" value="definitely">Definitely<br>
        <input type="radio" name="recommend" value="maybe">Maybe<br>
        <input type="radio" name="recommend" value="not-sure">Not sure<br>
        </label>
      </div>
  
      <div class="c11">
      <p>What do you like most in FCC:</p>
      </div>
   
    <div class="c12">
      <label for="like" id="label-like">
        <select name="most" id="like">
        <option value="challanges">Challanges</option>
        <option value="projects">Projects</option>
        <option value="community">Community</option>
        <option value="open-source">Open Source</option>
        </select>
    </label>
  </div>
      
      <div class="c13">
      <p>Things that should be improved in the future
        (Check all that apply):</p>
  </div>
  
  <div class="c14">
        <label for="improve" id="label-improve">
      <input type="checkbox" name="improve" value="front-end-projects">Front-end Projects<br>
      <input type="checkbox" name="improve" value="back-end-projects">Back-end Projects<br>
      <input type="checkbox" name="improve" value="data-visualization">Data Visualization<br>
    </label>
  </div>
  
  <div class="c15">
    <p>Any Comments or Suggestions?</p>
  </div>
  
  <div class="c16">
      <label for="comments" id="comments-label">
      <textarea name="comments" rows:"10" cols:"30">Enter your comment here...</textarea>
    </label>
  </div>
  
     <div class="c17"
      <label for="submit" id="submit-label">
      <input id="submit" type="submit" value="Submit">
    </label>
  </div>
      </form>
    </div>
2

No, you aren’t. It doesn’t matter what the HTML structure looks like inside the form element.

All you should just care is about various inputs boxes and the submit button.

1 Like
3

Thanks, so if it’s not that what screwed the project?
Unfortonatly I can’t link URLs yeat XD

4

Share part of your url. You can omit h of https

5

Here you go: codepen.io/PortugueseWolf/pen/axVgQj?editors=1100

And thank you for your attention

6 
<div class="c2">
  <form id="survey-form" action="#">
      <label for="name" id="name-label">
       <input id="name" type="text" name="name" placeholder="Enter your name" required>
      </label>
</div>

Looks like you have a closing div that matches with .c2 div. Your form is closing early which means rest of the inputs are not actually inside the form element.

1 Like
7

God dammit… Thank you! Spent an entire day doing this project and hours checking for what’s wrong and not seeing that… You’re a life saver :v:

8