Survey formproject help :)

HTML-CSS
1

hi can someone help me to figure out why my legend element wont appear thank you

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <title>freeCodeCamp Survey Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>   <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the platform</p>
  </div>
  <div>
  <form id="survey-form">

      <label> Name <input id="name" type="text" required/ placeholder="name"> </label>
  </div>
  <div>
       <label> Email <input id="email" type="email" required placeholder="email"/></label>
  </div>
  <div>
  <label> age <input id="number"type="number"optional placeholder="age" min="10" max="100"/> </label>
  </div>
  <div> 
      <label> Which option describe your current role</label> <select id="dropdown" name="role">
    <option value="">(select  current role)</option>
    <option value="">Student</option>  
    <option value="">Full Time Job</option>
    <option value="">Full Time Learner</option>
    <option value="">Prefer Not to Say</option>
    <option value="">Other</option>
    </div>
    <div>
      <br>
      <legend>Would you recommend freeCodeCamp to a friend</legend>
<label><input id="definitely" type="radio"/>Definitely</label>



/* file: styles.css */


  **Your browser information:**

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

Challenge: Build a Survey Form

Link to the challenge:

2

I think you forgot the closing </select> tag.

Also, you should always use a legend within a fieldset.

WebAIM: Creating Accessible Forms

1 Like
3

thank you bbsmooth! Ive been struggling with this for hours lol. :woman_facepalming: can you also help me why the email and age has no space even though I have a <div> tag? thank you very much

4

The div element does not have any padding/margins by default, so wrapping them in a div will not add space. The reason you have some space between Name and Email but not Email and Age is because you don’t have a closing </form> tag and the browser is trying its best to add it for you automatically and it is adding it in the wrong spot. You need to add that closing tag all the way down to the end of your form, after all the input elements and submit button. You also need to get rid of the closing </div> after the first label (or add an opening <div> before the it). Once you make these fixes then you will see that even the Name and Email inputs have now whitespace between them.

Adding whitespace is the job of CSS.

1 Like
5

thanks again @bbsmooth this is such a great help for me. I really appreciate it

6

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