Build a Survey Form - Stuck on submit button

My code isn’t being accepted, but I’ve seen others’ code accepted with the same submit button code. What am I missing here? The last two steps I’m missing are (even though they’re in the code already):

It should be noted I haven’t added any CSS yet.

  • You should have an input or button element with an id of submit .
  • Your #submit should have a type of submit .
<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<h1 id="title">Video Game Survey</h1>
<p id="description">How much do you like video games?</p>
<form id="survey-form">
  <label id="name-label">Name<input placeholder="Enter your full name" id="name" required></label>
</form>
<form id="survey-form">
  <label id="email-label">Email<input placeholder="Enter your email address" id="email" type="email"required></label>
</form>
<form id="survey-form">
  <label id="number-label">Age<input placeholder="Enter age" type="number" id="number" min="13" max="120" required></label>
</form>
<form id="survey-form">
  <label id="games-label">What kind of games do you like?<select id="dropdown">
      <option>Choose one</option>
      <option>RPGs</option>
      <option>Action games</option>
      <option>Platformers</option>
      <option>MOBAs</option>
    </select>
  </label>
</form>
<form id="survey-form">
  <p>How often do you play video games?</p>
  <label id="often-label"><input name="how-often" value="never" type="radio" required>Never</label>
  <label id="often-label"><input name="how-often" value="rarely" type="radio" required>Rarely</label>
  <label id="often-label"><input name="how-often" value="sometimes" type="radio" required>Sometimes</label>
  <label id="often-label"><input name="how-often" value="often" type="radio" required>Often</label>
  <label id="often-label"><input name="how-often" value="every-day" type="radio" required>Every day</label>
</form>
<form id="survey-form">
<p>What games have you played?</p>
  <label id="played-label"><input type="checkbox" value="the-elder-scrolls" required>The Elder Scrolls</label>
  <label id="played-label"><input type="checkbox" value="street-fighter" required>Street Fighter</label>
  <label id="played-label"><input type="checkbox" value="mario" required>Mario</label>
  <label id="played-label"><input type="checkbox" value="league-of-legends" required>League of Legends</label>
</form>
<form id="survey-form">
  <p>Why do you love video games?</p>
  <label id="submit"><textarea placeholder="Write your thoughts"></textarea></label>
</form>
<form id="survey-form">
   <button type="submit" id="submit">Submit</button>
   </form>
</html>

Hi there and welcome to our community!

Your issue is that you have many unnecessary form elements, which also have duplicate id attributes. Within a single HTML document, all of your id attributes should always be unique.

You only need one form element, encompassing all of the form content on the page. The submit button will then be able to submit all of the user responses on the page, as it acts upon the single form element.

So start by removing all form elements on your page except for the opening form tag at the top of the page and the closing form tag at the bottom of the page. This will also remove all of the duplicated id="survey-form" attributes.

You have one more duplicate id attribute, which is on the label element above your submit button. I don’t know why you have given that an id="submit" attribute, but you should remove or change that attribute.

Nice! That was definitely the solution. Thank you so much for your help!!

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