Survey Form Project Major issue

Multiple fields not being accepted by the revision

I made sure everything is according to the instructions however I am receiving multiple errors such as:

  • You should have an input element with an id of name.

  • Failed:Your #name should have a type of text.

  • Failed:Your #name should require input.

  • Failed:Your #name should be a descendant of #survey-form.

  • Failed:You should have an input element with an id of email.

  • Failed:Your #email should have a type of email.

  • Failed:Your #email should require input.

  • Failed:Your #email should be a descendant of #survey-form.

  • Failed:You should have an input element with an id of number.

  • Failed:Your #number should be a descendant of #survey-form.

  • Failed:Your #number should have a type of number.

  • Failed:Your #number should have a min attribute with a numeric value.

  • Failed:Your #number should have a max attribute with a numeric value.

  • Your #name should have a placeholder attribute and value.

  • Failed:Your #email should have a placeholder attribute and value.

  • Failed:Your #number should have a placeholder attribute and value.

  • Failed:You should have an input or button element with an id of submit.

  • Failed:Your #submit should have a type of submit.

  • Failed:Your #submit should be a descendant of #survey-form.

I think all of those are good, I checked the HTML completely, has anybody had this problem before?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='styles.css'>
    <title>Survey Form</title>
  </head>
  <body>
    <h1 id='title'>Gabriel Survey</h1>
    <p id='description'>Please fill out this survey </p>
    <div>
    <form id ='survey-form'>
      <fieldset>
      <label id='name-label'>What's your name? <input type='text' name='name' placeholder='Enter your name' required/></label>
      <label id='email-label'>What's your email? <input type='email' name='email' placeholder='Enter your email' required></label>
      <label id='number-label'>What's your favorite number? <input type='number' name='number' placeholder='Enter your number' min='1' max='300'></label>
      </fieldset>
      <label for='dropdown'> What's your favorite value?
        <select id='dropdown'>
          <option value='1'> Value 1</option>
          <Option value='2'> Value 2</option>
        </select>
      </label>
      <fieldset>
      <p>What do you preffer?</p>
      <label>HTML<input type='radio' name='test' value='html'></label>
      <label>CSS<input type='radio' name='test' value='css'></label>
      </fieldset>
      <label>Check if you like Pizza<input type='checkbox' value='pizza'></label>
      <label>Check if you like Burgers<input type='checkbox' value='burger'></label>
      <fieldset>
      <label><textarea placeholder='Text Area'></textarea></label>
      </fieldset>
      <label><input type='submit' value='Submit'></label>
    </form>
    </div>
  </body>  
</html>
/* file: styles.css */


label{
  display:block;
  padding:5px;
  
  
  
}

h1,p,label{
  text-align:center;
}

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


fieldset{
  background-color: #FAEBD7;
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
background-color: F0FFFF;
  font-family: Tahoma;
  font-size: 16px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.67

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Hi there! Welcome to the community.

Looks like the issue is due to there being no id attribute for your input tags. While HTML technically allows you to omit the id when wrapping the input in the label, the tests are requiring the id attribute to check for the correct code.

Thank you! God bless

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