Survey Form - Build a Survey Form

HTML-CSS
1

Hi when I run the test it says:
You should have a select field with an id of dropdown.

But isn’t that what i did? How come it doesn’t pass
Here’s what i wrote:

<!DOCTYPE html>

<html>

  <head>
    <title>Survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    
<br>

<h1 id="title" style="font-size: 35px">EXAMPLE SOMEACADEMY</h1>


<p id="description"><b>Thank you for your interest. Please register your information and let us know what subjects you would like to participate in. </b></p>

<form id="survey-form">

  <div class="input-headings">

<label for="name" id="name-label">Name: </label>
<input id="name" type="text" name="name" placeholder="Your name" class="form-inputs" required></input>

<br>

<label for="email" id="email-label">Email:</label>
<input id="email" type="email" name="email" placeholder="Yourmail@gmail.com" class="form-inputs" required></input>

<br>

<label for="number" id="number-label">Age:</label>
<input id="number" type="number" min="18" max="110" placeholder="18" class="form-inputs" required></input>

<br>

<label for="phone-number" id="phone-number">Phone number:</label>
<input id="phone-number" type="number" class="form-inputs" minlength="8" maxlength="12" placeholder="0012345678" required></input>

<br>

<!--step 12, eget første forsøg

Come back to it: Hvori ligger forskellen?

<select id="dropdown">
  <option value="">(select one)</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select> -->


<!--step 12-->
<label for="dropdown" id="dropdown">Choose your main subject</label>

<!--OBS, den siger den ikke opfylder dette: You should have a select field with an id of dropdown.-->

<select id="dropdown" class="form-inputs">

  <option value="Foundational Essence Understanding">Foundational Essence Understanding</option>
  
  <option value="Path 2.0">Path 2.0</option>
 
<option value="construction">Construction with essence and path</option>
  
</select>

<br>

<!--step 13-->
<label for="gender" id="gender"><b>Gender: </b></label>

<br>

<input id="male" type="radio" name="gender" value="male">
<label for="gender">Male</label>

<input id="female" type="radio" name="gender" value="female">
<label for="gender">Female</label>

<input id="other" type="radio" name="gender" value="other">
<label for="gender">Other</label>



<br> 
<br>

<!--checkboxes step 14. Først laver vi et label, som alle checkbox-markaterne skal referere til så den ved at de er en del af det samme i guess, så den ved at når man markere noget er det et svar på clickhere-sektionen. De forskellige svar skal have forskellige values. Når det kommer til de forskellige svar: så laver vi først nogle forskellige svar, derefter lavel til svarene der kan registreres. -->

<label for="clickhere"> <b> Additional courses you would like to enroll (please check our website for dates provided for each course) </b>
  </label>

<br>

<input id="checkbox" type="checkbox" name="courses" 
value="Economics">

<label for="checkbox">Economics</label>

<br>

<input id="checkbox" type="checkbox" name="courses" value="Communication">
<label for="checkbox">Communication</label>

<br>

<input id="checkbox" type="checkbox" name="courses" value="number-and-projectmatching">
<label for="checkbox">Number and projectmatching</label>

<br>
<br>

<!--step 15. oprindeligt havde jeg lavet den som lavel FOR, men i hans eksempel er label id nok. hvordan kan det være?-->

<label id="textarea"> <b> Any additional comments? </br></label>

<br>

<textarea id="textarea" name="instructions" rows="5" cols="40">

</textarea>

<br>
<br>

<input class="submit-button" type="submit" value="Submit" id="submit"/>

<br> 
<br>
</div>
</form>


  </body>
  

  <footer>

    <p>
        
    <small>Copyright © 2022 Example something academy. All Rights Reserved</p>
    
    <p>
        <a href="mailto:someacademy@example.com" style="color:rgb(255, 255, 255)">someacademy@example.com</a></p>

    </small>

  </footer>

  </html>

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

just be sure that the comment don’t affect your code, I copy pasted it, uncoment the select field and it works nice

3

Thank you. I tried removing all comments but it still won’t work. hmm

4 
<!DOCTYPE html>

<html>

  <head>
    <title>Survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    
<br>

<h1 id="title" style="font-size: 35px">EXAMPLE SOMEACADEMY</h1>


<p id="description"><b>Thank you for your interest. Please register your information and let us know what subjects you would like to participate in. </b></p>

<form id="survey-form">

  <div class="input-headings">

<label for="name" id="name-label">Name: </label>
<input id="name" type="text" name="name" placeholder="Your name" class="form-inputs" required></input>

<br>

<label for="email" id="email-label">Email:</label>
<input id="email" type="email" name="email" placeholder="Yourmail@gmail.com" class="form-inputs" required></input>

<br>

<label for="number" id="number-label">Age:</label>
<input id="number" type="number" min="18" max="110" placeholder="18" class="form-inputs" required></input>

<br>

<label for="phone-number" id="phone-number">Phone number:</label>
<input id="phone-number" type="number" class="form-inputs" minlength="8" maxlength="12" placeholder="0012345678" required></input>

<br>

<!--step 12, eget første forsøg

Come back to it: Hvori ligger forskellen? -->

<select id="dropdown">
  <option value="">(select one)</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select> 


<!--step 12-->
<label for="dropdown" id="dropdown">Choose your main subject</label>

<!--OBS, den siger den ikke opfylder dette: You should have a select field with an id of dropdown.-->

<select id="dropdown" class="form-inputs">

  <option value="Foundational Essence Understanding">Foundational Essence Understanding</option>
  
  <option value="Path 2.0">Path 2.0</option>
 
<option value="construction">Construction with essence and path</option>
  
</select>

<br>

<!--step 13-->
<label for="gender" id="gender"><b>Gender: </b></label>

<br>

<input id="male" type="radio" name="gender" value="male">
<label for="gender">Male</label>

<input id="female" type="radio" name="gender" value="female">
<label for="gender">Female</label>

<input id="other" type="radio" name="gender" value="other">
<label for="gender">Other</label>



<br> 
<br>

<!--checkboxes step 14. Først laver vi et label, som alle checkbox-markaterne skal referere til så den ved at de er en del af det samme i guess, så den ved at når man markere noget er det et svar på clickhere-sektionen. De forskellige svar skal have forskellige values. Når det kommer til de forskellige svar: så laver vi først nogle forskellige svar, derefter lavel til svarene der kan registreres. -->

<label for="clickhere"> <b> Additional courses you would like to enroll (please check our website for dates provided for each course) </b>
  </label>

<br>

<input id="checkbox" type="checkbox" name="courses" 
value="Economics">

<label for="checkbox">Economics</label>

<br>

<input id="checkbox" type="checkbox" name="courses" value="Communication">
<label for="checkbox">Communication</label>

<br>

<input id="checkbox" type="checkbox" name="courses" value="number-and-projectmatching">
<label for="checkbox">Number and projectmatching</label>

<br>
<br>

<!--step 15. oprindeligt havde jeg lavet den som lavel FOR, men i hans eksempel er label id nok. hvordan kan det være?-->

<label id="textarea"> <b> Any additional comments? </br></label>

<br>

<textarea id="textarea" name="instructions" rows="5" cols="40">

</textarea>

<br>
<br>

<input class="submit-button" type="submit" value="Submit" id="submit"/>

<br> 
<br>
</div>
</form>


  </body>
  

  <footer>

    <p>
        
    <small>Copyright © 2022 Example something academy. All Rights Reserved</p>
    
    <p>
        <a href="mailto:someacademy@example.com" style="color:rgb(255, 255, 255)">someacademy@example.com</a></p>

    </small>

  </footer>

  </html>

Your code worked just fine for me as well after removing the comment. Try copying the entire html, refresh page and paste it again and see if there are any changes.

5

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