Survey Form - Build a Survey Form

I cannot proceed with my code because the results are not being displayed. I had set the height of the body to 100vh, but when i increase the height to 200vh, nothing is being displayed:

Describe your issue in detail here.

**



**

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    <form id="survey-form" action="submit.php" method="post">
      <label for="name" id="name-label">Name:</label>
      <input class="width" type="text" id="name" name="name" placeholder="Enter your name" required>
       <label for="email" id="email-label">Email:</label>
    <input class="width" type="email" id="email" name="email" placeholder="Enter your email" required>

    <label for="number" id="number-label">Age (optional):</label>
    <input class="width" type="number" id="number" name="number" placeholder="Age" min="1" max="100" required>
    <label for="dropdown">Which option best describes your current role?</label>
    <select id="dropdown" name="dropdown">
      <option value="option1" placeholder="Select an option">Select an option</option>
      <option value="option2">Student</option>
      <option value="option3">Full Time Job</option>
      <option value="option4">Full Time Learner</option>
      <option value="option5">Prefer not to say</option>
      <option value="option6">Other</option>
    </select>
    <label>Would you recommend freeCodeCamp to a friend?</label>
  
    <label><input type="radio" name="radio-group" value="radio1">Definately
      </label>
      <label><input type="radio" name="radio-group" value="radio1">Maybe
      </label>
      <label><input type="radio" name="radio-group" value="radio1">Not Sure
      </label>
      <label for="dropdown">What is your favorite feature of freeCodeCamp?</label>
    <select id="dropdown" name="dropdown">
       <option value="option1" placeholder="Select an option">Select an option</option>
       <option value="option2">Challenges</option>
       <option value="option3">Projects</option>
       <option value="option4">Community</option>
       <option value="option5">Open Source</option>
       </label>


      
    

    </form>
  </body>
</html>
/* file: styles.css */
body {
width:100%;
height:200vh;
margin:0;
background-color:#1b1b32;
color:#f5f6f7;
}
h1,p{
  text-align:center;
  margin-left:10px
}
.width{ width:280px}

label, select

{display:block;
margin:0.5rem 0;
margin-left:10px;
width:280px
}

input {
  margin-left:10px; 
  ;
  }


Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

Hi there and welcome to our community!

I’m not sure I understand exactly what the issue is.
If you increase the height of the body to 200vh, all that happens is that you will be able to scroll down past the page content and see a whole page of nothing below it.
What are you actually trying to achieve with this code?

1 Like

If you click on the select an option button and your height is set to 100vh then it will drop up instead of down.

The issue is when I enter another line code after the select option, the results are not displayed

Oh I see what your issue is now… you haven’t added a closing tag for your select element.

1 Like

it’s working now, thanks for your assistance.

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