Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I can’t seem to pass test 31 with select id set to dropdown. What am I doing wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Guitar Survey</title>
  <link href="styles.css" rel="stylesheet">
    </head>
  <body>
    <h1 id="title">Guitar Survey</h1>
    <p id="description">Complete this survey to enter the competition</p>
    <form id="survey-form">
    <fieldset>
      <label id="name-label" for="name">Name:
        <input required name="name" id="name" type="text" placeholder="enter your name here">
        </label>
      <label id="email-label" for="email">Email:
        <input required name="email" id="email" type="email" placeholder="enter your email here">
        </label>
      <label id="number-label" for="number">Age:
        <input required name="number" type="number" id="number" max="16" min="120" placeholder="age">
        </label>
    </fieldset>
    
    <fieldset>
      <legend>Tell us about your style</legend>
      <label id="left-handed" for="left-handed"><input name="right-left" class="inline" id="left-handed" type="radio"  value="left-handed" required checked>Left-Handed</label>
      <label id="right-handed" for="right-handed"><input class="inline" id="right-handed" type="radio" name="right-left" value="right-handed" required >Right-Handed</label>
      <label for="dropdown" id="dropdown"> What type of guitar do you prefer?</label>
        <select name="dropdown" id="dropdown">
          <option value="">select one</option>
          <option value="1">Acoustic</option>
          <option value="2">Single Cut</option>
          <option value="3">SG</option>
          <option value="4">T-Type</option>
          <option value="5">S-Type</option>
          </select>
        
<label>What genres of music do you enjoy?</label>
  <input class="inline"  value="rock" name="genre" id="rock" type="checkbox"><label for="rock">Rock</label>
  <input class="inline" value="pop" name="genre" id="pop" type="checkbox"><label for="pop">Pop</label>
  <input class="inline" value="country" name="genre" id="country" type="checkbox"><label for="country">Country</label>
  <input class="inline" value="jazz" name="genre" id="jazz" type="checkbox"><label for="jazz">Jazz</label>
  <input class="inline" value="classical" name="genre" id="classical" type="checkbox"><label for="classical">Classical</label>
</label>
    </fieldset>
    <fieldset>
      <legend>Tell us why you should win this guitar</legend>
      <textarea id="reason" rows="3" cols="30" placeholder="I should win this guitar because"></textarea>

    
    </fieldset>
    <button id="submit" type="submit">Submit</submit>
    </form>
    </body>
  
  </html>

/* file: styles.css */
body {width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;}

  h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 100vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;}

  fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;}

  fieldset:last-of-type {
  border-bottom: none;
}

  label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

.inline{
  display: inline; 
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

the test assumes that your html is valid, which means you should only have unique ids defined. It comes to read this label and sees that you have its id set to dropdown so the test fails.
Remove this id and make sure you have only unique ids from now on.

1 Like
3

Thank you. Makes sense of course.

1 Like