Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

i get these four erros, al related to the descendants of the survey-form that i can’t get rid of.

You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form.

  • Failed: You should have at least one textarea element that is a descendant of #survey-form.
  • Failed: All your checkboxes inside #survey-form should have a value attribute and value.
  • Failed: Your #submit should be a descendant of #survey-form.

does anyone know what I’m doing wrong?
to my knowledge all my survey parts are already descendants of the #survey-form. but i am still unable to remove these errors. my entire site works the way it is supposed to

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <title> Dog Survey</title>
    </head>
    <body>
      <fieldset>
        <h1 id='title'>Survey</h1>
        <p id="description" class="description">this is a survey about dogs</p>
      </fieldset>

      <fieldset>
        <form id="survey-form">
          <label id="name-label"> Enter your name 
            <input type="text" id="name" placeholder="John Johnsen" required>
          </label><br>

          <label id="email-label">Enter your Email Adress 
            <input type="email" id="email" required placeholder="John.Johnsen@mail.com">
          </label>

          <label id="number-label">Enter a Number 
            <input type="number" id="number" min="18" max="120" placeholder="34">
          </label>

          
          <label> What's your favorite dog
          <select id="dropdown">
              <option>Select one</option>
              <option value="kooiker"> Kooiker</option>
              <option value="Herdershond"> Herders hond</option>
              <option value="Bordercollie"> Border collie</option>
          </select>
            </label><br>
            <label> I am a Dog owner<input type="radio" name="checkbox" required value="dogowner"></label><br>
            <label> I am NOT a Dog owner<input type="radio" name="checkbox" value="notdogowner" required></label>
          </fieldset>
          <fieldset>  <p class="dogproducts" name="checkbox-label"> What kind of dogproducts do you own</p>
            <label for="dogtoys-label"> Dog toys<input type="checkbox" value="dogtoys"></label>
            <label for="dogfood-label"> Dog food<input type="checkbox" value="dogfood"></label>
            <label> Water<input type="checkbox" value="water"></label>
            <label> leash<input type="checkbox" value="leash"></label>
            <label> Dog bed<input type="checkbox" value="dogbed"></label>
          </fieldset>
          <fieldset>
            <label class="textarea" for="textarea-label"> Do you have anything else to say?</label>
            <textarea id="text-label" name="textarea"> Write anything you want here</textarea>
          </fieldset>
        
        <label>
          <input type="submit" id="submit" for="submit-form">
          </label>
      </form>
    </body>
</html>

/* file: styles.css */

body{
font-family:Calibri;
text-align:center;
background-color: #add8e6;
width:100%;
height:100vh;
font-size:16px;


}

.dogproducts, .textarea{
  font-family: Tahoma;
}

fieldset{
  border:none;
  padding: 2rem 0;
  border-bottom: 3px solid red;
  background-color:yellow;
  width:70vw;
  margin:0 auto;
}

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

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

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

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

textarea{
  width:75%;
  height:140px;

}

input, textarea {
  background-color: white;
  border: 1px solid #0a0a23;
  color: #ffffff;
  
}
 input[type=Submit]{
   background-color:#add8e6;
   color:black;
   font-family:Tahoma;
   border:2px solid black;
   width:60%;
   font-size:16px;

 }

 .description{
   font-size:25px;
   font-family:Tahoma;
 }
 h1{
   font-size:40px;
   font-family:Tahoma;
 }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

check how you are nesting elements into each other. I think the #survey-form element contains less than you think

3

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