Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

It shows two errors,
Your #name should require input.
Your #email should require input.
i don’t understand what input they are mentioning.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css"></link>
  <title> Online English coaching registration form</title>
  </head>
  <body>
    <div class="container">
  <h1 id="title">Online English coaching Registration form</h1>
  <p id="description"> Enter your details here</p>
  <form id="survey-form">
    <filedset>
      <label id="name-label">First name:<input id="name" type="text" placeholder="enter your name" required</label>
      <label id="name-label">Last name:<input id="name" type="text" placeholder="enter your name" required</label>
      <label id="email-label">E-mail:<input id="email" type="email" placeholder="enter your email" required</label>
      <label id="number-label">Age:<input id="number" type="number" placeholder="enter your age" min=8 max=100 required</label>
    </fieldset>
    <fieldset>
       <legend>Can you attend online Classes ?</legend>
    <label for="yes"><input class="inline" id="yes" value="yes" type="radio" name="options">Yes</label>
    <label for="no"><input class="inline" id="no" value="no" type="radio" name="options">No</label>
    
    </fieldset>
    <fieldset>
      <legend>what is your level of English ?</legend>
      <label for="level"><input class="inline" id="level" value="Beginner-A1" type="checkbox">Beginner-A1</label>
      
      <label for="level"><input class="inline" id="level" value="Elementary-A2" type="checkbox">Elementary-A2</label>

      <label for="level"><input class="inline" id="level" value="Intermediate-B1" type="checkbox">Intermediate-B1</label>

      <label for="level"><input class="inline" id="level" value="Upper-intermediate-B2" type="checkbox">Upper-intermediate-B2</label>

      <label for="level"><input class="inline" id="level" value="Advanced-C1" type="checkbox">Advanced-C1</label>

    </fieldset>
    <label>How did you hear about us ?
      <select id="dropdown">
        <option value="">(select one)</option>
        <option value="1">Instagram</option>
        <option value="2">Facebook</option>
        <option value="3">Youtube</option>
        <option value="4">Other</option>
    </label>
    <fieldset>

      
      <label>Any comments or Suggestions ?<textarea id="comments" rows="4" cols="40" placeholder="enter your comments here..."></textarea></label>
    </fieldset>
    <input class="submit" type="submit" id="submit" value="Submit">
    </div>
  </form>
</body>
  </html>
  

/* file: styles.css */
body{
  background-image: url("https://img.freepik.com/free-photo/brightly-lit-dining-unfocused_1203-770.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
  color: azure;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;



}  
body{
  display: block;
}
h1, p{
  margin: 1.5em auto;
  text-align: center;
}
form{
  width: 60vw;
  max-width: 500px;
  min-width: 200px;
  margin: 0 auto;
  padding-bottom: 2em;
}
.container{
  width: 80%;
  background-color: rgb(0, 0, 0, 0.6);
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}
fieldset{
  border: none;
  padding: 2rem 1;
}
fieldset:last-of-type{
  border-bottom: none;
}
label{
  display: block;
  margin: 0.5rem 0;

}
input, 
textarea, 
select{
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 1.7em;
}
input, textarea {
  background-color: #ffff;
  border-color: #ffff;
  color: black;
}
.inline{
  width: unset;
  margin: 0 0.5rem 0;
  vertical-align: middle;
}
.inline{
  display: inline;
}
.submit{
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: rgb(169, 169, 169);
  border-color: white;
  min-width: 100px;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

there is something missing in your input element. If you fix the tag, the test should pass

3

It passed ,thanks for finding this out.