Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

Hey guys I have been stuck on this for about an hour now and i cant seem to find answers or solutions on google. This is my code for the survey sheet. The problem starts towards the end of the code in the last section with the class=“recommend”. For whatever reason i cant get the console to print out “Would you recommend freeCodeCamp to a frind?”. I even tried to delete the whole thing as start new with a

element but still the text wont display. Obviously theres something wrong with my code. Can anyone help me? Thank you :slight_smile:

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">
    <title>Survey Form</title>
  </head>
  <body>
  <div class="form">
    <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">

<section class="name">
      <label id="name-label" for="name"> Name<input placeholder="Enter your name" required type="text" id="name"></label>
</section>

<section class="email">
      <label id="email-label" for="email">Email<input placeholder="Enter your Email" required type="email" id="email"></label>
</section>

<section class="age">
      <label id="number-label" for="number"> Age (optional)<input placeholder="Age" id="number" type="number" min="13" max="120">
</section>

<section class="role">
      <label for="dropdown">Which option best describes your current role?
        <select id="dropdown">
          <option value="">Select current role</option>
          <option value="1">Student</option>
          <option value="2">Full time job</option>
          <option value="3">Full time learner</option>
          <option value="4">Prefer not to say</option>
          <option vlaue="5">Other</option>
          </label>
</section>


<section>
  <label class="recommend">Would you recommend freeCodeCamp to a friend?<input id="radio" checked name="referrer" value="Definetly" type="radio">Definetly</label>
        <label for="radio">
        <input id="radio" name="referrer" value="Maybe" type="radio">Maybe</label>
        <label>
        <input id="radio" name="referrer" value="Not Sure" type="radio">Not Sure</label>
        </label>
</section>

        


        <label>What is your favorite feature of freeCodeCamp?</label>
          <select>
            <option>Challenges</option>
            <option>Projects</option>
            <option>Community</option>
            <option>Opensource</option>
            
      
    
    
    </form>
</div>
  </body>
</html>


/* file: styles.css */
h1, p {
  text-align: center;
}

p {
  margin-top: -10;
  margin-bottom: 40;
}




.form {
  margin-top: 120;
  margin-left: 80;
  margin-right: 80;
  font-family: sans-serif;
}

.name label {
  display: flex;
  flex-direction: column;
  height: 50px;
  text-align: left;
}

.email label {
  display: flex;
  flex-direction: column;
  height: 50px;
}

.age label {
  display: flex;
  flex-direction: column;
  height: 50px;
}

.role label {
  display: flex;
  flex-direction: column;
  height: 50px;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

I recommend you run your HTML through a validator and fix all the errors.

Also, remember that any element that can have content inside of it needs to have both an opening and closing tag.

1 Like
4

Remember that all content needs to have an opening and closing tag, look at your “section” block, and look at your label opening and closing tags, use that as a reference to help you remember how to correctly use them.

5

Welcome to the forum

Both of your select elements are missing their closing tags.

Happy coding

2 Likes
6

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