Survey Form: Build a Survey Form

Hi everyone, I have just completed the survey form, but I am having a hard time figuring out why my CSS is not working I used the code they recommended on the bottom, but nothing seems to be working, here’s my sample of my code right here

<!DOCTYPE html>
<html lang ="en">
  <header>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"
<link rel="stylesheet" href="styles.css">
    <title>Adam's FreeCode Camp Survey</title>
    </header>
    <body>
      <h1 id="title">Adam's Freecode Camp Survey</h1>
      <p id="description" class="established">Thank you all for coming on here on this beautiful day.</p>
      <form id="survey-form" action="">
      <fieldset>
        <label id="name-label">What's your full Name?<input id="name" type="text" placeholder="Full Name?" required /></label>
 <label id="email-label">What's your Email?<input id="email" type="email" placeholder="Email..." required /></label>   
 <label id="number-label">How old are you?<input id="number" type="number" min ="5" max="100" placeholder="Age"/></label>
 <label> How are you today?   
  <select id="dropdown">
  <option value="">Select one</option>
  <option value="1">Fantastic</option>
  <option value="2">Great</option>
  <option value="3">Good</option>
  <option value="4">Meh</option>
  <option value="5">Not well</option>
  <option value="6">Terrible</option>
  </select>
  </label>
  </fieldset>
  <fieldset>
    <label>Do you find freeCodeCamp helpful?</label>
    <label><input type="radio" class="inline" name="attribute" value="1" checked /> Absolutely</label>
    <label><input type="radio" class="inline" name="attribute" value="2" />Somewhat</label>
    <label><input type="radio" class="inline" name="attribute" value="3" />Maybe</label>
    <label><input type="radio" class="inline" name="attribute" value="4" />Not Really</label>
    <label><input type="radio" class="inline" name="attribute" value="5" />It's God Awful</label>
    </fieldset>
    <fieldset> 
    <label> What is your favorite part about freeCodeCamp?
      <select id ="dropdown2">
  <option value="">Select one</option>
  <option value="1">The Challenges</option>
  <option value="2">The Projects</option>
  <option value="3">The Learning</option>
  <option value="4">The Community</option>
  <option value="5">It's Open Source</option>
  <option value="6">The Coding</option>
  </select>
  </label>
  </fieldset>
  <fieldset>
  <label> Do you plan on doing Coding as a career? </label>
  <label><input type="radio" class="inline" name="attribute" value="1" checked /> Definitely</label>
    <label><input type="radio" class="inline" name="attribute" value="2" />Maybe </label>
    <label><input type="radio" class="inline" name="attribute" value="2" />No</label>
    <label><input type="radio" class="inline" name="attribute" value="2" />What's Coding?</label>
    </fieldset>
    <fieldset>
      <label>What would you like to see improved? <small> (checked all that is applied) </small> </label>
<label> <input type="checkbox" class= "inline" value ="Projects"/>Projects</label>
<label> <input type="checkbox" class= "inline" value ="Tutorials"/>Tutorials</label>
<label> <input type="checkbox" class= "inline" value ="Forum"/>Forum</label>
<label> <input type="checkbox" class= "inline" value ="Help Rooms"/>Help Rooms</label>
        </fieldset>
    <fieldset> 
   <label id="number-label">How would you rate this out of 10?<input id="number" type="number" min ="1" max="10"></label>
  </fieldset>
  <fieldset>
    <label> Anything to comment about or suggestions?
      <textarea rows="6" cols="75" placeholder="Enter here..."></textarea>
      </label>
      </fieldset>
      <fieldset>
        <input type ="Submit" value="submit" id="submit" />
        </fieldset>
      </form>
      </body>
      </html>
body {
  background-color: Blue;
}

Hi @landriault.adam1118 !

Welcome to the forum!

I have edited your post to include the challenge link.
When asking questions on the forum, it is important to include the link so we can test it on our ends.

I spot two issues.

The header element is different from the head element.

The header element should be used for introductory content on a page like a navigation.

The head element should be used for information that is not seen by the user like meta tags.

Once you fix that, you forgot to close out your meta tag here

now, things should work as expected

1 Like

Thank you so much @jwilkins.oboe for the help. I tried out your advice, it was a success, you have a good one, again thanks for the help.

1 Like

There are a few corrections and improvements needed in your HTML code:

  1. The <header> tag is not closed properly. It should be </header>.
  2. The <meta> tags are missing their closing > and </meta> tags.
  3. The closing </form> tag is missing the /.
  4. There are duplicate id attributes (id="number-label" and id="number") and name attributes (name="attribute") in different elements. Each id and name attribute should be unique within the document.
  5. The <select> element for “Do you plan on doing Coding as a career?” has duplicate value="2". The values should be unique.
  6. In the “What would you like to see improved?” fieldset, the value attributes for checkboxes should correspond to different values. They are all currently set to string values, which might cause confusion when processing the form.
  7. There’s a duplicate id attribute for the second dropdown (id="dropdown"). It should have a unique id.
  8. The <label> for “How would you rate this out of 10?” has a duplicate id attribute (id="number-label"). It should be unique.

Here’s the corrected HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Adam's FreeCode Camp Survey</title>
</head>
<body>
  <h1 id="title">Adam's Freecode Camp Survey</h1>
  <p id="description" class="established">Thank you all for coming on here on this beautiful day.</p>
  <form id="survey-form" action="">
    <fieldset>
      <label id="name-label">What's your full Name?<input id="name" type="text" placeholder="Full Name?" required /></label>
      <label id="email-label">What's your Email?<input id="email" type="email" placeholder="Email..." required /></label>   
      <label id="number-label">How old are you?<input id="age" type="number" min="5" max="100" placeholder="Age"/></label>
      <label> How are you today?   
        <select id="mood">
          <option value="">Select one</option>
          <option value="Fantastic">Fantastic</option>
          <option value="Great">Great</option>
          <option value="Good">Good</option>
          <option value="Meh">Meh</option>
          <option value="Not well">Not well</option>
          <option value="Terrible">Terrible</option>
        </select>
      </label>
    </fieldset>
    <fieldset>
      <label>Do you find freeCodeCamp helpful?</label>
      <label><input type="radio" class="inline" name="helpful" value="Absolutely" checked /> Absolutely</label>
      <label><input type="radio" class="inline" name="helpful" value="Somewhat" /> Somewhat</label>
      <label><input type="radio" class="inline" name="helpful" value="Maybe" /> Maybe</label>
      <label><input type="radio" class="inline" name="helpful" value="Not Really" /> Not Really</label>
      <label><input type="radio" class="inline" name="helpful" value="It's God Awful" /> It's God Awful</label>
    </fieldset>
    <fieldset> 
      <label>What is your favorite part about freeCodeCamp?
        <select id="favorite-part">
          <option value="">Select one</option>
          <option value="The Challenges">The Challenges</option>
          <option value="The Projects">The Projects</option>
          <option value="The Learning">The Learning</option>
          <option value="The Community">The Community</option>
          <option value="It's Open Source">It's Open Source</option>
          <option value="The Coding">The Coding</option>
        </select>
      </label>
    </fieldset>
    <fieldset>
      <label>Do you plan on doing Coding as a career?</label>
      <label><input type="radio" class="inline" name="career" value="Definitely" checked /> Definitely</label>
      <label><input type="radio" class="inline" name="career" value="Maybe" /> Maybe</label>
      <label><input type="radio" class="inline" name="career" value="No" /> No</label>
      <label><input type="radio" class="inline" name="career" value="What's Coding?" /> What's Coding?</label>
    </fieldset>
    <fieldset>
      <label>What would you like to see improved? <small>(Check all that apply)</small></label>
      <label><input type="checkbox" class="inline" value="Projects" /> Projects</label>
      <label><input type="checkbox" class="inline" value="Tutorials" /> Tutorials</label>
      <label><input type="checkbox" class="inline" value="Forum" /> Forum</label>
      <label><input type="checkbox" class="inline" value="Help Rooms" /> Help Rooms</label>
    </fieldset>
    <fieldset> 
      <label id="rating-label">How would you rate this out of 10?<input id="rating" type="number" min="1" max="10"></label>
    </fieldset>
    <fieldset>
      <label>Anything to comment about or suggestions?</label>
      <textarea id="comments" rows="6" cols="75" placeholder="Enter here..."></textarea>
    </fieldset>
    <fieldset>
      <input type="submit" value="Submit" id="submit" />
    </fieldset>
  </form>
</body>
</html>

These corrections address the issues and make the HTML code more structured and error-free.