Build a Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I’m stuck at a test result saying (Your #dropdown should have at least two selectable (not disabled) option elements.). I used the label for element rather than the option one and got the same result. I don’t disable the options and can’t understand why they may be disabled. Please help. Thanks.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Survey Form</title>
  </head>

  <body>
    <h1 id="title">Survey Form</h1>
    <p id="description">This is a form for you to express your opinion</p>
    <form id="survey-form"/>
<input required id="name" type="text" placeholder="Ex: Ha Ab Hin"/>
<label for="name" id="name-label">Your Full Name</label>
<input required id="email" type="email" placeholder="Ex: hah@email.com"/>
<label for="email" id="email-label">Your email Address</label>
<input id="number" type="number" min="10" max="100" placeholder="Ex: 60"/>
<label for="number" id="number-label">The number shouldn't be less than 10 or more than 100</label>
<select id="dropdown">
  <input type="radio" value="yes" name="option"/>
  <option value="yes">Yes</option>
  <input type="radio" value="no" name="option"/>  
<option value="no">No</option>
  </select>
  <select>
    <input type="checkbox" value="yes"/>
    <label for="yes">Yes</label>
    <input type="checkbox" value="yes" value="no"/>
    <label for="no">No
      </lebel>
      <input type="checkbox" value="don't know"/>
      <label for="don't know">Don't Know
        </label>
    <textarea id="comments" name="comments">Comments</textarea>
   <button id="submit">Submit
          </button> 
    </select>
    </form>
  </body>
</html>

Your browser information:

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

Challenge Information:

Build a Survey Form - Build a Survey Form

2

what goes inside a select element?

you may want to use an HTML validator Ready to check - Nu Html Checker

3

Hi buddy, In this code section, can you tell us in which part of code you’re facing problem ??

When you will tell us then we will be able to see that too..

Hope You Understand.

4

I see mistakes that I overlooked and thus I need to edit that or to delete it and put another post. I am sorry.

5

Tell us what’s happening:

I’m stuck at step 13. I changed many times based on my srearch results but have always got the result saying:
Your #dropdown should have at least two selectable (not disabled) option elements.
In the preview my options are selectable. Thus, I don’t know where the mistake is. Please help. My latest code is:

…

…

Thank you in advance.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Survey Form</title>
  </head>

  <body>
    <h1 id="title">Survey Form</h1>
    <p id="description">This form is for you to express your opinion</p>

    <form id=
  "survey-form">
  <label for="name" id="name-label">Your name</label>
  <input required id="name" type="text" placeholder="EX: Ha Hin"/>

  <label for="email" id="email-label">Your email</label>
  <input required id="email" type="email" placeholder="EX: example@email.com"/>

  <label for="number" id="number-label">Number</label>
<input id="number" rype="number" type="number" min="10" max="60" placeholder="from 10 to 60"/>

<select id="dropdown">
  <input type="radio" name="option" value="yes">yes
  <input type="radio" name="option" value="no">No
  <input type="radio" name="option" value="don't-know">Don't know
  </select>

  <select>
  <label>  <input type="checkbox" value="option1"> 
  option1 </lable>

  <label>
    <input type="checkbox" value="option2"> option2
    </label>

    <label>
      <input type="checkbox" value="option3">option3
      </label>

        <textarea name="comments">Put your comments here</textarea>
      <button id="submit">Submit</button>    
      </form>
  </body>
</html>

Your browser information:

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

Challenge Information:

Build a Survey Form - Build a Survey Form

6

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.

7

a select element does not take input elements, it needs a different kind of element

8

There are no Input tags in that Select element, Reread Step 12

9

Tell us what’s happening:

I posted before about the step 12 that is related to the radio button elements. I got a reply that there was not closing tag for the input. Here I tried to put a closing tag but the test result didn’t change saying that I should have at least two selectable (not disabled) options. May I know where my mistake this time is?
Much thanks in advance.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Survey Form</title>
  </head>

  <body>
     <body>
  <h1 id="title">Survey Form</h1>
  <p id="description">This form is for you to express your opinion</p>


  <form id=
 "survey-form">
 <label for="name" id="name-label">Your name</label>
 <input required id="name" type="text" placeholder="EX: Ha Hin"/>


 <label for="email" id="email-label">Your email</label>
 <input required id="email" type="email" placeholder="EX: example@email.com"/>


 <label for="number" id="number-label">Number</label>
<input id="number" rype="number" type="number" min="10" max="60" placeholder="from 10 to 60"/>


<select id="dropdown">
 <label><input type="radio" name="option" value="yes">yes</label>
<label><input type="radio" name="option" value="no">No</label>
<label><input type="radio" name="option" value="don't-know">Don't know</label>
 </select>


 <select>
 <label>  <input type="checkbox" value="option1">
 option1 </lable>


 <label>
  <input type="checkbox" value="option2"> option2
  </label>


  <label>
   <input type="checkbox" value="option3">option3
   </label>


    <textarea name="comments">Put your comments here</textarea>
   <button id="submit">Submit</button>   
   </form>
  </body>
</html>

Your browser information:

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

Challenge Information:

Build a Survey Form - Build a Survey Form

10

Rereading the replyes I see this post as irrelevant. I am sorry. I have to go back to my code.

11

select needs a specific element for its items, not an input

12

Thank you. Using the recommended HTML validator I could correct some mistakes. Yet, there is still something I can’t understand. The code became as follows:

…

<select id="dropdown">
  <input id="yes" type="radio" value="yes" name="radio">
  <label for="yes">Yes</label>
  <input type="radio" id="no" value="no" name="radio">  
<label for="no">No</label>
  </select>

…
What I don’t understand is the told errors which are related to the select element. The errors read:
1- Input start tag with select open.
2- Stray end tag select.

May I know how the select start tag is open and how its end tag is stray? Did I get a correct meaning of the told errors?

Many thanks in advance.

Note: When I posted the code after change didn’t appear. Thus, my reply may not be clear. However, the start and end tags of the select element remained as they were.

Thanks

13

you need to use backticks not dots to format your code

I fixed your post for you

You still can’t use input and label inside select, you keep doing that, it is invalid, remove them, use the right element

14

Hi sir can you share your code

15

When I built my first survey form, I realized how important structure and accessibility are. Using semantic HTML for labels and inputs makes it easier for users and screen readers. CSS then helps with readability and flow. Keeping forms simple, mobile-friendly, and validating input on both client and server side ensures better responses. A clean design always encourages higher completion rates.

17

You have a select element here but you are not using it correctly. You also have a stray select tag directly after the closing select tag.

The select element should use option elements to create a dropdown menu, not radio buttons or other input and label elements. If you need radio buttons, they should be elsewhere, not inside a select element.

MORE INFO: