Build a Survey Form challenge

HTML-CSS
1

Tell us what’s happening:
I followed the challenge user stories but not sure where im missing ,5 out of 17 tests are failing.
Please help me identify the mistakes.
link to my survey form: https://codepen.io/sushmasri/pen/jJGQob

Your code so far

Survey Form

Let us know your expectations further

Name: 
<div>
  <label for="email">Email: </label>
  <input type="email" id="email-label" placeholder="Enter your email" required>
</div>

  <div>
    <label for="number"> Age:</label> <input type="text" id="number-label" placeholder="Enter your age" required min="18" max="60" title="enter numeric values between 18 and 60" pattern="\d+"> 
  </div>

    <div>
      <label for="dropdown"> Your current role in the organisation:</label>
      <input type="text" list="l1" id="dropdown">
      <datalist id="l1">
        <option>Student</option>
        <option>Developer</option>
        <option>Tester</option>
        <option>support</option>
        <option>Manager</option>
        <option>Senior Manager</option>
      </datalist>
    </div>

    <div>
      <label for="radio-label"> Gender:  </label>
     <input type="radio" name="gender" id="male" required>
       
      <label class="radio" for="male">Male</label>
      
    <input type="radio" name="gender" id="female" required>
      <label class="radio" for="female">Female</label>
      </div>

    <div>
      <label for="radio-label2">Are you satisfied with our services?</label>
      <input type="radio"
             id="radio-label2" name="feedback" required>
      <label for="satisfied"> Satisfied</label>
      <br>
      <input type="radio" name="feedback"  required >
      <label for="not-statisfied" > Not Satisfied</label>
    <br>
       <input type="radio" name="feedback"
        required>
      <label for="not-sure"> Not Sure</label>
    </div>
    
<div>
  <label for="checkbox"> What did you like in the session?</label>
  <input type="checkbox" value="training" required title="select a value"> 
  <label for="training"> training </label>
  <br>
  <input type="checkbox" value="hands-on">
  <label for="hands-on"> hands-on</label>
    </div>
<br>
    <div>
      <label for="final-feedback">Please provide the suggestions:</label>
        <input type="textarea" rows="10">
    </div>
 <div>       
 <button type="Submit" id="button">Submit
   </button>
 </div>     
</form>
    </center>  
      </body>
 
</main>

main{
background-color: cyan;
border-radius: 30px;
}
div{
vertical-align: middle;
padding: 10px;
margin: 10px;

}

body{
margin: 50px 70px;
}
Your browser information:

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

Link to the challenge:

2

Lets see. I’ll lists the tests that did not pass. Consider abandoning the use of the < center > element in HTML. I believe it is obsolete.

  1. Inside the form element, I am required to enter my name in a field with id=“name”. If I do not enter a name I will see an HTML5 validation error.

Your code:
< input type=“text” id=“name-label” placeholder=“Enter your name” required>
Should be:
< input type=“text” id=“name” placeholder=“Enter your name” required>

  1. Inside the form element, I am required to enter an email in a field with id=“email”. If I do not enter an email I will see an HTML5 validation error.

Your code:
< input type=“email” id=“email-label” placeholder=“Enter your email” required>
Should be:
< input type=“email” id=“email” placeholder=“Enter your email” required>

By the way, for the < label > element to work. The for attribute needs to correspond with the input id. For example,
< label for=“mobile”>Mobile No.:< /label>
< input type=“text” id="mobile>

  1. If I enter an email that is not formatted correctly, I will see an HTML5 validation error.

Your code:
< input type=“email” id=“email-label” placeholder=“Enter your email” required>

Should be:
< input type=“email” name=“email” id=“email” placeholder="name@email.com" pattern="[a-z0-9._%±]+@[a-z0-9.-]+.[a-z]{2,}$" required>

To understand how the value for the pattern attribute works, go here:
https://www.w3schools.com/tags/att_input_pattern.asp

Hope this helps! All the best.

3

thanks a lot. I felt it simpler with your inputs. :smiley:

4

Great suggestions and we hope for the best.