Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
"You should have a select field with an id of dropdown " is not being completed despite my code having an id of ‘dropdown’ for the select field?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
  </head>

  <body>
    <h1 id="title">Survey Form</h1>
    <p id="description">This is the description</p>
      <form id="survey-form">
        <div class="form-group">
          <label id="name-label">Name*</label>
          <input required id="name" name="name" type="text" placeholder="John McDiggins">
        </div>
        <div class="form-group">
          <label id="email-label">Email*</label>
          <input required id="email" name="email" type="email" placeholder="johnmcdig69@sus.com">
        </div>
        <div class="form-group">
          <label id="number-label">Age of you</label>
          <input id="number" type="number" name="age" min="18" max="100" placeholder="69">
        </div>
        <div class="form-group">
          <Label id="dropdown">How did you find this?</label>
          <select id="dropdown">
            <option value="">Select one</option>
            <option value="1">Social Media</option>
            <option value="2">Other</option>
          </select>
        </div>
        <div class="form-group">
          <p>Which do you like most?</p>
          <label for="cats"><input id="cats" type="radio" name="CatsOrDogs" class="inline" value="1" /> Cats</label>
          <label for="dogs"><input id="dogs" type="radio" name="CatsOrDogs" class="inline" value="2" /> Dogs</label>
        </div>
        <div class="form-group">
          <p>What type do you like?</p>
          <label id="big"><input id="big" type="checkbox" name="big" value="1">Big</lable>
          <label id="small"><input id="small" type="checkbox" name="small" value="2">Small</label>
          <label id="fluffy"><input id="fluffy" type="checkbox" name="fluffy" value="3">Fluffy</lable>
          <label id="hairless"><input id="hairless" type="checkbox" name="hairless" value="4">Hairless</lable>
        </div>
        <div class="form-group">
          <label for="additional">Additional Comments
            <textarea id="additional" name="additional" rows="3" cols="30" placeholder="Add any additional comments here"></textarea>
          </label>
        </div>
        <input class="submit" id="submit" type="submit" value="Submit" />
      </form>
  </body>
</html>

/* file: styles.css */
body {
  background-color: #484A70;
  color: #DFE0ED;
  font-family: Tahoma;
  font-size: 16px;
  text-align: center;
  padding: 2em;
}

p {
  font-size: 18px;
}

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

.form-group {
  padding: 2.5px;
  margin: 5px 5px;
}

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

.submit {
  color: #E6E2E7;
  background-color: #373957;
  border: none;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

You have two duplicate id fields here.
You should have only the one they asked for defined on the select.

1 Like
3

Oh, awesome! Thank you!

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.