Responsive Web Design Projects - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I have a HTML form and I’m getting several errors. Can you help me fix them? Here are the errors:

  1. The #dropdown element should be a descendant of the #survey-form element.

  2. I should have at least two radio buttons that are descendants of the #survey-form element.

  3. I should have at least two input elements with a type of checkbox that are descendants of the #survey-form element.

  4. All of my checkbox inputs inside the #survey-form element should have a value attribute and value.

  5. I should have at least one textarea element that is a descendant of the #survey-form element.

  6. The #submit element should be a descendant of the #survey-form element.

Can you please help me fix these errors?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Survey Form</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <h1 id="title">Survey Form</h1>
      <p id="description">Thank you for taking the time to fill out the form</p>
<fieldset>
    <form method="post" id="survey-form">
      <label id="name-label">Name
        <input type="text" id="name" required placeholder="Enter your name
 "></input>
        </label>

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

        <label id="number-label">Age
        <input type="number" id="number" min="12" max="99" placeholder="Age"></input>
        </label>
        </fieldset>
<fieldset>
        <lable for="reason">Which option best describes your current role?

<select id="reason" name="reason">
  <option value="">Select current role</option>
  <option value="1">Student</option>
  <option value="2">Full Time Job</option>
  <option value="3">Part Time Job</option>
</select>

</label>
</fieldset>
<fieldset>
 <p> What is your favorite feature of freeCodeCamp?</p>
   <label for="one">
<input type="radio" name="one" class="inline" value="Definitely">Definitely</input>
</label>
<label for="one">
<input  type="radio" name="one" class="inline" value="Definitely">Maybe</input>
</label>
<label for="one">
<input type="radio" name="one" class="inline" value="Definitely">Not sure</input>
<label>
</fieldset>
<fieldset>What is your favorite feature of freeCodeCamp?
  <label for="dropdown">
  <select id="dropdown" >
    <option value="">Select an option</option>
    <option value="1">Project</option>
    <option value="2">Community</option>
    <option value="3">Open Source</option>
  </select>
  </label>
  </fieldset>
  <fieldset>
    <input value="projects" type="checkbox">Front-end Projects</input>
    <input value="projects" type="checkbox">Back-end Projects
</input>
    <input value="projects" type="checkbox">Data Visualization</input>
    <input value="projects" type="checkbox">Challenges</input>
    <input value="projects" type="checkbox">Open Source Community</input>
    <input value="projects" type="checkbox">Videos</input>
  </fieldset>
<fieldset>
  <legend>Comments and Suggestions:</legend>
  <label>
    Any comments or suggestions?
    <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
  </label>
</fieldset>
  <label>
    <input id="submit" type="submit" value="Submit"></input>
  </label>
    </form>
  </body>
</html> 

/* file: styles.css */
body {
margin:0 auto;  background-color:#524AA8;
  color:white;
}

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

Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Survey Form

Link to the challenge:

2

Please, check your html code first and then, we will be able to help and to point out the issues:

3

I Solved the problem THANKS! For Your Help :slight_smile:

1 Like