Survey Form - Build a Survey Form

Tell us what’s happening:
Describe your issue in detail here.
Hello, I am working on my Building a Survey Form. Below my “What is your current English level?” I have another dropdown question in my code reason “why do you want to learn English”, but it is not showing in my preview.
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>English Language Learning Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">English Language Learning Form</h1>
    <p id="description"><i>This form helps us personalize your lessons.</i></p>
  <form method="post" id="survey-form">
    <feildset>
      <label 
        for="name">Name<input id="name-label" name="name" type="text" required></label>
      <label
        for="email">Email <input id="email-label" name="email" type="email"></label>
      <label
        for="age">Age <input id="age=label" name="age" type="number" min="4" max="99" ></label>
       <label
        for="occupation">Occupation <input id="occupation=label" name="occupation" type="text"></label>
    </feildset>
    <fieldset>
      <label
        for="level"> What is your current English level? <select id="dropdown-level" name="level">
          <option value="">(select one)</option>
          <option value="1">No knowledge</option>
          <option value="2">Beginner</option>
          <option value="3">Intermediate</option>
          <option value="4">Advanced</option>
      </label>
      <label for="reason">Why do you want to learn English? <select id="dropdown-reason" name="reason">
        <option value="">(select one)</option>
          <option value="1">Conversation</option>
          <option value="2">Business</option>
          <option value="3">Both</option>
          </label>
      <label
        for="interests">What are your interests? <em>Provide 3<input id="interests-label" name="interests" type="text" required></label>
    </fieldset>
      <input type="submit" value="Submit"/>
    </form>
  </body>
</html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  padding: 1rem; 
background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

h1 {
  margin: 0.5em auto;
  text-align: center;
  color: #A2D9CE;
  text-shadow: 1px 1px white;
}

p {margin: 0.5em auto;
  text-align: center;
  color:#D0ECE7
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

label {
  display: block;
  margin: 0.5rem 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

You forgot to wrap the option elements in select element:

 <label for="level"> What is your current English level?</label> <select id="level" name="level"> 
    
          <option value="">(select one)</option>
          <option value="1">No knowledge</option>
          <option value="2">Beginner</option>
          <option value="3">Intermediate</option>
          <option value="4">Advanced</option>
        </select>

label’s for attribute and select’s id should have the same value.

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