Survey Form issues on #6, #8 and #16

Tell us what’s happening:
Hi,

I’m having some issues on topics #6, #8 and #16. Two of them (#6 and #8) according to the error messages are related to validation problems with HTML5 but I’m already using the “required” attribute on the input tag.

Email field should be HTML5 validated : expected ‘text’ to equal ‘email’

The last one (#16) is showing

Your button’s type attribute should have a value of “submit”

Which is actually set. Please I’ll be thankful if you could provide of some ideas to solve this issue

Your code so far

I wanted to add a link to my full code but since I’m new, think I’m not allowed for that just yet.

 <header>
  <h1 id="title" class="center">Survey Form</h1>
  <p id="description" class="center">This simple survey will allow us to know more about your preferences on front-end development.</p>
</header>

<body>
  <form id="survey-form">
    
    <div id="box-1">
      
      <div id="namediv" data-validate="Please type your name">
        <label for="name" id="name-label">Full name
        </label>
        <input type="text" id="name" placeholder="Enter your name"
         class="colorform sizefont" required>
      </div>
      
      <div id="emaildiv" data-validate="Please type your email">
        <label for="email" id="email-label">Email
        </label>
        <input type="text" id="email"
         placeholder="Enter your email"
         class="colorform sizefont" required>
      </div>
      
      <div id="numberdiv" data-validate="Please type your age">
        <label for="number" id="number-label">Age 
        </label>
        <input type="text" id="number"
         placeholder="Enter your age"
         min="18" max="100"
         class="colorform sizefont" required>
      </div>
        
    </div>
    <div id="box-2"> 
      
      <div id="dropdown">Select the fields that fits 
        your skills
      <select>
        <option value="">Choose an option</option>
        <option value="front-end">Front-End</option>
        <option value="back-end">Back-End</option>
        <option value="full-stack">
          Full-Stack</option>
      </select>
      </div>  
        
      <div id="selector">Select the fields that 
       fits your skills
      <br>
      <label for="select" id="select1">
        <input type="radio" name="select">HTML
      </label>
      <label for="select" id="select2">
        <input type="radio" name="select">CSS
      </label>
      <label for="select" id="select3">
        <input type="radio" name="select">Javascript
      </label>
      </div>
        
      <div id="checkboxes">Are you currently
        searching for a job?<br>
      <label for="box">
       <input type="checkbox" name="box"
        value="Yes" class="space">Yes
      </label>
      <label for="box">
       <input type="checkbox" name="box"
        value="No" class="space">No
      </label>
      </div>
        
      <textarea rows="5" cols="50">
       Please tell us more about yourself 
      </textarea>
      
    </div>
    <div id="submit">
      <button type="submit">Submit</button>
    </div>
      
  </form>
  
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36.

For the first one, you input type is incorrect.

<input type="text" id="email"
         placeholder="Enter your email"
         class="colorform sizefont" required>

The type needs to be email. Otherwise it will not validate correctly.

I missed that, thanks for your help, you are right changing to the proper “types”
solved issues #6 and #8.

But #16 seems to be something different I think.

#16 is <input type=submit> :wink:

Yes, that was the solution! Really thankful for your advises.