Learn HTML by building a survey form

HTML-CSS
1

Hi I’m stuck on one thing in my HTML code. When I run the tests it seems that every aspect needs to be descendents of #survey-form. But I can’t work out why it won’t work as I thought I have already done so.

<doctype HTML!> 
  <head> 
    <link rel="stylesheet" href="styles.css"/> 
  </head>
<html lang="en">
  
  <meta charset="utf-8">
  <header class="header"><title> Survey Form </title></header>
<body>
<div class="container">

  <h1 id="title" class="text-center"> FreeCodeCamp Survey Form </h1> 
  <p id="description" class="description-text-center"> Thankyou for taking the time to help us improve this platorm </p> 
</div> 

<div class="survey-form">
<form id="survey-form"> 
    <fieldset>
<label for="name" id="name-label">Name</label> <input 
id="name" 
name="name" 
type="text"
class="form-control"
placeholder="Enter your name"
required />
</div>

<div class="survey-form">
<label for="email" id="email-label">Enter your email</label> <input 
id="email" 
name="email" 
type="email" 
class="form-control"
placeholder="Enter your email"
required/>
</div>

<div class="form-group">
<label for="number" id="number-label"> Enter your age (optional)</label> <input id="number" 
name="age" 
type="number" 
min="16" 
max="99"
class="form-control"
placeholder="age"
required
</div>

<div class="form-group">
<p>Which option best describes your current role?</p>
<select id="dropdown" name="role" class="form-group">
<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 value="5">other</option>
  </select>
  </div>

<div class="form-group">
  <p> Would you reccommend FreeCodeCamp to a friend? </p> 
<label> 
  <input
  type="radio" 
  name="reccomendation" 
  value="definitely"
  class="input-radio"
  checked /> Definitely </label>

  <label><input  
  type="radio" 
  name="reccomendation" 
  class="input-radio"
  value="maybe"
  " /> Maybe </label>

  <label><input 
  type="radio" 
  name="reccomendation" 
  class="input-radio" 
  value="unsure"/> Unsure </label>
  </div>

  <div class="form-group">
  <p> What is your favourite feature of FreeCodeCamp? </p>
  <select id="dropdown" name="fav-feature" class="form-group"> 
<option value="">Select an option</option>
<option value="1">Challenges</option>
<option value "2">Projects</option>
<option value="3">Community<option>
  <option value="4">Open source</option> </select>
  </div>
  
  <div class="form-group">
  <p>What would you like to see improved?</p> 
  <label><input  
  type="checkbox" 
  name="improvements" 
  class="input-checkbox"
  value="front-end"
  " /> Front-end projects </label>
  <label><input  
  type="checkbox" 
  name="improvements" 
  class="input-checkbox"
  value="back-end"
  " /> Back-end Projects  </label>
  <label><input  
  type="checkbox" 
  name="improvements" 
  class="input-checkbox"
  value="Data-vis"
  " /> Data Visualization </label>
  <label><input  
  type="checkbox" 
  name="improvements" 
  class="input-checkbox"
  value="challenges"
  " /> Challenges </label>
  <label><input  
  type="checkbox" 
  name="reccomendation" 
  class="input-checkbox"
  value="open-source"
  " /> Open source </label>
  <label><input  
  type="checkbox" 
  name="reccomendation" 
  class="input-checkbox"
  value="gitter"
  " /> Gitter help rooms </label>
  <label><input  
  type="checkbox" 
  name="reccomendation" 
  class="input-radio"
  value="videos"
  " /> Videos </label>
  <label><input  
  type="checkbox" 
  name="reccomendation" 
  class="input-radio"
  value="city-meetups"
  " /> City meetups </label>
  <label><input  
  type="checkbox" 
  name="reccomendation" 
  class="input-radio"
  value="wiki"
  " /> Wiki </label>
  <label><input  
  type="checkbox" 
  name="reccomendation" 
  class="input-radio"
  value="forum"
  " /> Forum </label>
  <label><input  
  type="checkbox" 
  name="reccomendation" 
  class="input-radio"
  value="additional-courses"
  " /> Additional Courses </label>
    </div>
    
    <div class="form-group"> 
    <p> Do you have any further comments or suggestions?</p>
    <textarea id="comments" name="comments" cols="40" rows="5" placeholder="enter your comments here..."> </textarea> 
    </div>
<div class="form-group">
    <button id="submit" name="submit" type="submit">Submit</button>
    </div>
    </form>
    </fieldset> 
    </body>
</html>
2

Welcome to the forum!

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Also in future, please use the ‘ask for help’ button, it should appear if you fail the tests a few times. This will create a forum post with your formatted code, lesson link and browser infomation.

3

If every aspect needs to be a descendant of #survey-form, why is this closing fieldset tag outside of it?

4

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