Survey Form - Build a Survey Form

Tell us what’s happening:

Still telling me the radio groups need at least 2 options, I have more than 2 in each group.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Dog Survey</title>
    <link rel="stylesheet" href="styles.css">
    <style>
    </style>
  </head>
  <body>
    <h1 title="dogSurvey" id="title"> Dog Survey
    </h1>
    <p id="description">We love dog stories. Fill out this survey and maybe your story will be featured in our upcoming "Silly Pet Section."</p>
    <form id="survey-form">  
  <fieldset>
    <label for="name" id="name-label">Enter Your Name: <input id="name" name="name-label" type="text" required placeholder="Name" /></label>
    <br>
    <br>
        <label for="email" id="email-label">Enter Your Email: <input id="email" name="email-label" type="email" required placeholder="Email"/></label>
        <br>
        <br>
    <label for="number" id="number-label">Enter Your Phone Number: <input id="number" name="number-label" type="number" min="10" max="10" placeholder= "Number" ></input></label>
 </fieldset>
 
 <fieldset>
    <label>How many dogs do you have?
      <select id="dropdown"> 
      <option value="">(select one)</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three or More</option>
      </select></label>
 </fieldset>

 <fieldset>
      <label> What does your dog eat?
        <br> 
        <input type="radio" name="opt1" value="opt1"> Dry Food </input></label>
      <br>
    <label><input type="radio" name="opt2" value="opt2"> Wet food</input></label>
    <br>  <label><input type="radio" name="opt3" value="opt3"> Both Dry and Wet Food</input></label>
      <br>
      <label><input type="radio" name="opt4" value="opt4"> Other</input></label>
      </fieldset>
  
<fieldset>
<label>What size is your dog? (For multiple dogs, check all that apply)
  <br>
  <input type="checkbox" value="0"> Mini/ X-Small
  </input>
  <input type="checkbox" value="1"> Small
  </input>
  <input type="checkbox" value="2"> Medium
  </input>
  <input type="checkbox" value="3"> Large
  </input>
  <input type="checkbox" value="4"> Giant/ X-Large
  </input>
</label>
</fieldset>

<fieldset><label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
</fieldset>

<textarea id="bio" name="bio" rows="4" cols="30" placeholder="Tell us about a funny dog moment..."></textarea>

<fieldset>
      <label> Is this story about your dog? 
        <br>
        <input type="radio" name="opt5" value="opt5"> Yes </input></label>
        <br>
      <label><input type="radio" name="opt6" value="opt6"> No</input></label>
      <br>
      <label><input type="radio" name="opt7" value="opt7"> Involves your dog and someone else's</input></label>
     
      </fieldset>

  <input type="submit" id="submit">
  </input>

    </form>
  </body>
  </html>

/* file: styles.css */
/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: antiquewhite;
  font-size: 16px;
}
h1{
  text-align:center;
  padding: 20px auto;
  background-color: rgba(102, 48, 151, .59);
}
.description{
  text-align:left;
}
#survey-form{
  color: rgba(102, 48, 151, .9);
  font-family: Georgia;
  text-align: left;
  margin: 5px auto;
}
#email-label{
  color: rgb(102, 48, 151);
  margin-bottom:10px;
}
br{
  padding:5px auto;
}
fieldset{
  border:5px solid;
  margin:5px;
}
textarea{
  margin:5px;
  padding: 5px auto;
  border:5px solid;
  border-color: rgb(102, 48, 151);
  background-color: rgba(189, 183, 202, .5);
}
.radio{
  color: rgb(102, 48, 151);
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

From what I can see you have radio’s, but they aren’t set to be individual, you can select multiple radios for both questions. Which makes them circular checkboxes, try adding in name=“food-type” to have them be pick one, rather than multiple.

1 Like

Thank you for your suggestion. It worked when I added ids

1 Like