Survey Form - Submit not working

HTML-CSS
1

Tell us what’s happening:

The error i get is [ Your #submit should have a type of submit. ], but I don’t get it my button does have a type of submit.

Your code so far

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <link href="styles.css" rel="stylesheet">
  <title>Survey Form</title>
</head>

<body>
  <h1 id="title">Zion's Survey Form</h1>
  <p id="description">What kind of a Minecrafter are You</p>
  <div class="form-body">
    <img src="https://www.freeiconspng.com/thumbs/minecraft-png-icon/minecraft-icon-0.png">
   <form id="survey-form">
    <fieldset class="page-top">
     <label id="name-label" for="name"><p>Enter Your Name Please:</p>
       <input required id="name" type="text" placeholder="Jens Peder Bergensten" />
     </label>
     
     <label id="email-label" for="email"><p>Enter Your Email Please:</p>
       <input required id="email" type="email" placeholder="example@email.com" />
     </label>
     
     <label id="number-label" for="number"><p>Enter Your Age(in years) Please:</p>
       <input id="number" type="number" min="13" max="120" placeholder="23" />
     </label>
    </fieldset>
    
   <fieldset>
     <legend>Which Version Do You Prefer:</legend>
     <img src="https://cdn.modrinth.com/data/zpLMwo3B/0ad11f199b9b60d26be4946529978ff3f41180a0.png">
     <label for="dropdown">
       <select id="dropdown" name="favorite-gamestyle">
         
         <option value="">[Pick One]</option>
         <option value="Java">Java Edition</option>
         <option value="Bedrock">Bedrock Edition</option>
      </select>
     </label>
   </fieldset>

   <fieldset class="radio-body">
     <legend>Favorite Minigame:</legend>
     <img src="https://th.bing.com/th/id/R.77e446ae25e6ced855c46a0b9500abe1?rik=jDa%2fyv8%2bunQo4A&riu=http%3a%2f%2fwww.stickpng.com%2fassets%2fimages%2f580b57fcd9996e24bc43c301.png&ehk=NSqjuyU0vYXVTiJ5k30ob%2f5%2bzrnL4D%2f8DR0O7oxryKQ%3d&risl=&pid=ImgRaw&r=0">

     <label class="radio-buttons"> 
       <input type="Radio" value="PvP" name="Favorite-minigame" /> PvP
     </label>

     <label class="radio-buttons"> 
       <input type="Radio" value="Parkour" name="Favorite-minigame"> Parkour
     </label>

     <label class="radio-buttons"> 
       <input id="submit" type="Radio" value="Building" name="Favorite-minigame" /> Building
     </label>

     <label class="radio-buttons"> 
       <input type="Radio" value="Redstone" name="Favorite-minigame" /> Redstone
     </label>
   </fieldset>

   <fieldset>
     <legend>Favorite Minecraft Personality:</legend>
     <img src="https://i.pinimg.com/originals/71/21/30/712130935037791327290d41e2866e0a.jpg">
     <label class="checkbox-buttons">
       <input type="checkbox" name="yt-minecrafter" value="Dream"  class="checkbox-elemnet" /> Dream
     </label>

     <label class="checkbox-buttons">
       <input type="checkbox" name="yt-minecrafter" value="Technoblade" /> Technoblade
     </label>

     <label class="checkbox-buttons">
       <input type="checkbox" name="yt-minecrafter" value="Grian" /> Grian
     </label>

     <label class="checkbox-buttons">
       <input type="checkbox" name="yt-minecrafter" value="FlameFrags" /> FlameFrags
     </label>
   </fieldset>

   <fieldset>
     <legend>Anything Else:</legend>
     <img src="https://minecraft.wiki/images/Splash_Potion_of_the_Turtle_Master_JE3.png?1d9ca">
     <label for="additional-info">
       <textarea id="additional-info" name="additional-info" placeholder="I like Crstal PvP. Bedwars is an awesome minigame..."></textarea>
     </label>
   </fieldset>

   <fieldset>
   </fieldset>
   <button id="submit" type="submit">Submit</button>
  </form>
 </div>

</body>


</html>


body {
  background: url(https://wallpaperaccess.com/full/2984636.png);
  font-family: Consolas;
  padding: 20px;
}

h1, p[id="description"] {
  text-align: center;
}

h1 {
  color: #EEEEEE;
}

p {
  color: #EEEEEE;
  font-size: 1em;
  font-style: italic;
}


.form-body {
  background-color: #171615;
  border: 2px solid #5a6367;
  width: 90%;
  margin: auto;
  min-width: 300px;
  max-width: 675px;
  padding-bottom: 1em;
  padding-top: 1.5em;
}

img {
  width: 3.5em;
  height: 3.5rem;
  display: block;
  margin:0 auto;
}

.page-top {
  border: none;
  width: 87%;
  margin: auto;
}

label{
  display: block;
  margin: 1.2em;
  color: #EEEEEE;
}
input {
  display: block;
  width: 100%;
  height: 2.2em;
  margin: auto;
  color: #C9C7C7;
  background-color: #302E2C;
  border: none;
  font-size: 1em;
}

select{
  display: block;
  width: 100%;
  height: 2.2em;
  color: #C9C7C7;
  background-color: #302E2C;
  border: none;
  font-size: 1em;
}

fieldset {
  border: none;
  border-top: 3px solid #5a6367;
  width: 87%;
  margin: auto;
  padding-top: 1em;
}

legend {
  color: #EEEEEE;
  font-size: 1.1em;
}

figure {
  display: inline-block;

}

.radio-buttons {
  display: inline-block;
  color: #C9C7C7;
  text-align: center;
}

input[type="radio"] {
  width: 18px;
  height: 18px;
}

.checkbox-buttons {
  display: block;
  color: #C9C7C7;
  font-size: 1.2em
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-left: auto;
}

textarea {
  display: block;
  width: 100%;
  height: 5em;
  margin: auto;
  color: #C9C7C7;
  background-color: #302E2C;
  border: none;
  font-size: 1em;
}

button {
  display: block;
  width: 60%;
  height: 2em;
  background-color: #413F3C;
  border: 2px solid #EEEEEE;
  margin: 1em auto;
  font-size: 1.2em;
  color: #EEEEEE;
  font-family: Consolas;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

hello and welcome to fcc forum :slight_smile:

  • button element itself doesnt have any problem, problem lies in other “fieldset” markup above it
  • there is probably some typo before that “button” element, debug this by taking out “fieldset” by “fieldset” and see where it stops giving out that error and fix that

happy coding :slight_smile:

3

what about this one?

1 Like
4

image_2025-08-16_144401957
image_2025-08-16_1444019571599×850 156 KB

Thanks but that isn’t it I removed it and it didn’t work. Here is a image so u can better understand

5

Sir i don’t think it refers to that. plz check my reply to @bappyasif and the image of the problem.

6

Please share your updated code.

7

if you have removed that, please post your updated code

8

He y you were on to something. You told me to fix the submit thing in the radio thing, I ignored it thinking you were wrong, BUT actually when I removed the id of submit from the radio buttons(wrongplace), my submit button below worked.