Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
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?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lan="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 name="dogtoys-label"> Dog toys<input type="checkbox" value="dogtoys"></label>
            <label name="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" name="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" placeholder="Click here if you are finished" id="submit">
          </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

<html lan="en">

  • should be lang above

as well the id attribute does not belong in the label (I think you probably want to use the for attribute instead?)

also the placeholder attribute does not belong in submit button.

Try fixing these and see if that helps at all. If not please post the updated code for another look.

3

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