Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I don’t understand why these two steps:
42. You should have an input or button element with an id of submit. 43. Your #submit should have a type of submit.
Are not passed even though I believe I have done the correct thing correctly id it. Please help me understand.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Coco's Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">Coco's Survey</h1>
    <p id="description">This is a survey about how much you love Coco</p>
    <form id="survey-form">
      <fieldset>
        <label id="name-label" for="name">Enter your name
          <input id="name" type="text" required placeholder="John Doe" />
        </label>

        <label for="email-label" id="email-label">Enter Your Email:
          <input id="email" name="email" type="email" required placeholder="johndoe@email.com" />
        </label> 

        <label for="number">Enter how much you love Coco out of 10
          <input id="number" type="number" name="number" min="0" max="10" placeholder="10" />
        </label>

        <label id="number-label" for="number">Enter how beautiful Coco is out of 10
          <input id="number-label" type="number" name="number" min="0" max="10" placeholder="10" />
        </label>

        <label for="dropdown">Why is Coco the best?
          <select id="dropdown" name="dropdown">
            <option value="">(select one)</option>
            <option value="1">She's the biggest bird in the world</option>
            <option value="2">She is epitome of all animals</option>
            <option value="3">She is a menace</option>
            <option value="4">All of the above</option>
          </select>
        </label>

        <label for="submit">Provide praise for Coco
          <textarea id="submit" name="submit" rows="3" cols="30" placeholder="She is the best thing to happen to the world..."></textarea>
        </label>

        <legend>Trivia: Is Coco male or female?</legend>
        <label>
          <input type="radio" name="cocoGender" value="male" required> Male
        </label>
        <label>
          <input type="radio" name="cocoGender" value="female"> Female
        </label>

        <legend>What best describes Coco?</legend>
        <label>
          <input type="radio" name="cocoDescription" value="unknown" required> Unknown
        </label>
        <label>
          <input type="radio" name="cocoDescription" value="menace"> Menace
        </label>

        <label>
          <input class="inline" id="adore-coco" type="checkbox" required name="adore-coco" value="adore-coco" /> I adore Coco
        </label>

        <label>
          <input class="inline" id="live-for-coco" type="checkbox" required name="live-for-coco" value="live-for-coco" /> I live for Coco
        </label>
      
<input id="submit" type="submit" value="Submit">


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


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

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

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

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

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: #068005;
  border: 1px solid #068005;
  color: #ffffff;
}

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

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #068005;
  border-color: white;
  min-width: 300px;
}

input[type="file"] {
  padding: 1px 2px;
}

.inline{
  display: inline; 
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

Hi and welcome to the forum!
The reason those two steps are not passing is because you already have an element with id ="submit". It’s your textarea with that id. So when the system finds the #submit element, there seems to be no type attribute to that element and it’s also not an input element.
I suggest changing the id of your textarea to something else.
Good luck!

1 Like
3

Thank you so much! That worked! Thank you so so much

2 Likes
4

No problem. Good luck with the project!

1 Like