Having trouble with FCC test regarding the required textarea position for the Survey Form project

HTML-CSS
1

Tell us what’s happening:

I’m almost done with my survey form project, but I can’t I find the error in my code. It keeps telling me that the textarea is not inside the form element and that the button with id=“submit” is not inside the form element.

Your code so far

<html>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

  <head>
    <title>FCC Survey Form Project</title>
  </head>
  
  <h1 id="title"> McCreamy Survey Form</h1>
 <div id="form-outer">
  <p id="description">Let us know how we can improve our resturant</p>
  <form id="survey-form" action="https://crossorigin.me/https://freecodecamp.com">
    <div class="labels">
    <label id="name-label" for="name">*Name:
      <input type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required></label>
    </div>
    <div class="labels">
     <label  id="email-label" for="email">*Email:</label> 
       <input type="email" name="email" id="email" class="input-field" placeholder="Enter your email address" required>
    </div>
    <div class="labels">
      <div class="rightTab">
      <label id="number-label" for="age">*Age:</label> 
   <input type="number" name="age" id="number" class="input-field" min="1" max="120" placeholder="Age" required>
    </div>
    </div>
    <div class="rightTab">
  <div class="labels">
    <label for="ethnicity"> Which describes your ethnicity?
    <select id="dropdown" name="ethnicity" class="dropdown">
      <option disabled value> Select your ethnicity</option>
      <option value="Black/African-American">Black/African-American</option>
      <option value="Caucasian">White/Caucasian</option>
      <option value= "Latino"> Hispanic</option>
      <option value="Hawiian">Hawiian/Pacific Islander</option>
      <option value="Asian">Asian</option>
      <option value="Native American">Native American</option>
      <option value="other">Other</option>
      </select>
      </div>
      </div>
    <div class="labels">
    <div class="rightTab">
      <label for="userRating">*How likely are you to tell a friend about McCreamy? </label>
    </div>
    <div class="rightTab">
        <ul style="list-style: none;">
          <li class="radio"><label>Definitely<input name="radio-buttons" value="1"  type="radio" class="userRatings" ></label></li>
          <li class="radio"><label>Maybe<input name="radio-buttons" value="2"  type="radio" class="userRatings" ></label></li>
          <li class="radio"><label>Not sure<input name="radio-buttons" value="3"  type="radio" class="userRatings" ></label></li>
        </ul>
      </div>
    </div>
      <div class="labels">
        <label for="preferences">*Things that should be improved in the future<br>(Check all that apply): </label>
      </div>
      <div class="rightTab">
        <ul id="preferences" style="list-style: none;">
          </div>
        <div class="labels">
    <li class="checkbox"><label>Customer service<input name="prefer" value="1" type="checkbox" class="userRatings"></label></li>
        </div>
        <div class="labels">
          <li class="checkbox"><label>Delivery wait time <input name="prefer" value="2" type="checkbox"></label></li>
      </div>
    <div class="labels">
      <li class="checkbox"><label>Drive-thru wait time<input name="prefer" value="3" type="checkbox"></label></li>
        </div>
        <div class="labels">
          <li class="checkbox"><label>Menu<input name="prefer" value="4" type="checkbox"></label></li>
          </ul>
      </div>
    </div>
    
<div class="rowTab">
      <div class="labels">
        <label for="comments">Any Comments or Suggestions?</label>
      </div>
      <div class="rightTab">
        <textarea id="comments" class="input-field" style="height:50px;resize:vertical;" name="comment" placeholder="Enter your comment here..."></textarea>
      </div>
    </div>
    <button id="submit" type="submit">Submit</button>
  </form>
</div>
</html>

Your browser information:

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

Link to the challenge:

2

Select the button in the HTML tab that gives you the drop-down and select that you want to format/prettify the HTML (I can’t remember what the option is called, I’m on mobile so I can’t see the button on my phone). At the minute the indenting is all over the place so it’s difficult to see where the error is. You have a closing div somewhere that is in the wrong place: I can see the text area and submit button are outside your form, and that’s because your form wrapper div is closed before those two elements.

Also you don’t need an html tag or a head tag, the content in codepen’s HTML tab is supposed to be what you would put in body, if you want title etc use the settings

4

Thanks it reflects the question a lot better now.

5

You cannot wrap li inside div, bro. Each li element should be direct descendant of ul. But if you want you may definitely put div inside li. Remove the divs around the list of checkboxes and it will work. Hope this helps.

6

The li Divs are interfering with the code. try styling the Li’s directly and remove those divs.