Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Any idea why FCC and the web3 tester keep saying that my element is not opened or closed properly? Been trying to figure this out for 4 days.

Your code so far

<!-- file: index.html -->
<!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>
    <header>
        <h1 id="title">Travel Form</h1>
        <p id="description">Please fill out this form with your details.</p>
    </header>
  <div>
    <fieldset><legend>Account Information</legend>
    <form id="survey-form">
        <p><label for="name" id="name-label">Name</label><input id="name" type="text" placeholder="John Smith" required></p>
        <p><label for="email" id="email-label"> Email </label> <input id="email" type="email" placeholder="john.smith@yahoo.com" required></p>
        <p><label for="number" id="number-label"> Number</label><input id="number" min="1" max="120" type="number" placeholder="Number"> </p>


<label for="dropdown">Account Type<select id="dropdown"></label>
   <option value="Personal" id="dropdown">Personal</option>
   <option value="Business" id="dropdown">Business</option> 
    </select>
     </div>
      </fieldset>
 <fieldset>
        <legend>Preferred Travel Method</legend>
        
        <input type="radio" id="driving" name="commute" value="driving">
        <label for="driving">Driving</label>
        
        <input type="radio" id="flying" name="commute" value="flying">
        <label for="flying">Flying</label>
    </fieldset>
 
 <fieldset>
    <legend>Travel Purpose</legend>
    <input type="radio" id="Work" name="travel-purpose" value="Work"><label for="Work">Work</label>

    <input type="radio" id="Adventure" name="travel-purpose" value="Adventure"
    <label for="Adventure">Adventure</label>
 </fieldset>
  
 <fieldset>
     <legend>Select Your Favorite States To Travel To</legend>
    <div>
         <input type="checkbox" id="Oklahoma" name="Oklahoma" value="Oklahoma">
    <label for="Oklahoma">Oklahoma</label>
    </div>
    <div> <input type="checkbox" id="Idaho" name="Idaho" value="Idaho">
    <label for="Idaho"> Idaho</label>
    </div>
    <div>
    <input type="checkbox" id="Montana" name="Montana" value="Montana">
    <label for="Montana">Montana</label>
    </div>
    <div>
    <input type="checkbox" id="Alaska" name="Alaska" value="Alaska">
    <label for="Alaska">Alaska</label>
    </div>
    <div>
    <input type="checkbox" id="Colorado" name="Colorado" value="Colorado">
    <label for="Colorado">Colorado</label>
    </div>
 </fieldset>
<div class="area">
    
    <label> Tell Us Why You Love To Travel!</label>
 <textarea placeholder="Have Fun With It!" name="travel-experience"></textarea>

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

/* file: styles.css */
textarea {
  height: 200px;
  width: 400px;
  margin: center;
  font-size: 16px;
  scrollHeight:0;

 }
 h1  {
   text-align:center;
   
 }
  

.area {
  margin: ;
  text-align: center;
}

legend {
  text-align: center;
  
}

body{
  
  background-image: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bGFuZHNjYXBlJTIwd2FsbHBhcGVyfGVufDB8fDB8fHww");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-color: #1d3c6e; 
  color: white;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hi. Your radio buttons and checkboxes need to be direct children of the survey form element. You had some groupings wrapped in another element such and fieldset / div which meant they were not direct children.

See in particular the div and fieldset that open above your survey form element . See where they close and how it means anything below the corresponding closing element can’t be a direct child of the survey form element.

<div>
    <fieldset><legend>Account Information</legend>
    <form id="survey-form">
3

which element are you being told this about>