Building a Survey Form

HTML-CSS
1

I currently have passed 12/17 tests but it is saying the select field with id=“dropdown”, at least 2 radio buttons, checkboxes, text areas and submit button are not within the form element and I do not understand why that is.

<!DOCTYPE html>
<html lang="en">
 
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="styles.css">
  <title>Streaming Survey</title>
  </head>
      <body>
         <div id="header">
      <h1 id="title">Music Streaming Platform Survey Form</h1>
      <p id="description">All music lovers tell us your favorite streaming platform!</p>
      </div>
      <div id="needed">
      <form id="survey-form">
        <label id="name-label">Name <input id="name" type="text" placeholder="Enter your name" required ></label>
        <br>
        <label id="email-label">Email <input id="email" type="email" placeholder="123silly@mail.com" required ></label>
        <br>
        <label id="number-label">Age (optional) <input id="number" type="number" placeholder="Age" min="13" max="101" ></label>
        </div>
        <div id="dropdown"><br class="break">
        <label >What platform do you use?</label>
        <select id="dropdown">
        <option value="non">select one...</option>
        <option value="spotify">Spotify</option>
        <option value="apple">Apple Music</option>
        <option value="amazon">Amazon Music</option>
        <option value="pandora">Pandora</option>
        <option value="heart">iHeartRadio</option>
        <option value="other">Other...</option>
        </select>
        <br>
        <textarea style= height:20px class="form" placeholder="If you chose other..."></textarea>
        </div>
        <br class="break">
        <div id="indv-select"><label>Would you recommend this platform to others?</label>
        <br>
        <input type="radio" name="recommend" value="yes"><label> Yes</label>
        <br>
        <input type="radio" name="recommend" value="no"><label> No</label><br>
        <input type="radio" name="recommend" value="depends"><label> Depends</label>
        </div>
        <div class="checkboxes" id="checkboxes"><br class="break">
          <label>Why do you like the preferred platform?</label><br>
        <input type="checkbox" name="choice 1" value="interface"> User-friendly interface <br>
        <input type="checkbox" name="choice 2" value="library"> Large song library <br>
        <input type="checkbox" name="choice 3" value="accessibility"> Accessibility <br>
        <input type="checkbox" name="choice 4" value="playlists"> Wide variety of user-generated playlists <br>
        <input type="checkbox" name="choice 5" value="subscription"> Offers different subscription tiers <br>
        <input type="checkbox" name="choice 6" value="other"> Other
          <br class="break"> 
        <textarea style= height:20px class="form" placeholder="If you chose other..."></textarea>
          <br class="break">
        </div>
        <div id="additional-info">
        <p>Please tell us more about why you like this platform!</p>
        <textarea placeholder="I use this platform because..."></textarea>
        </div>
        <br>
        <div id="submit-button">
        <input type="submit" id="submit">
        </div>
      </form>
    </body>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>```
2

You can’t have both a div and a select with the same id. Id’s are supposed to be unique and thus two or more elements cannot share the same id.

2 Likes
3

Ohh okay that makes a lot more sense, thank you so much!

1 Like