Survey Form - Build a Survey Form

HTML-CSS
1

so why isnt the placeholder value for the suggestions box showing up? (line 55)
and why is that checkbox not getting properly alinged? (line 49)

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>freecodecamp Survey Form</title>
      <link rel="stylesheet" href="styles.css">
    </head>
  <body>
    <h1 id="title">freecodecamp Survey Form</h1>
    <p id="description"> your feedback is valuable! </p>
    <form id="survey-form">
      <fieldset> 
        <label id="name-label">Name: <input type="text" name="name" id="name" required placeholder="abc"> </label>  
        <label id="email-label">Email:<input type="email" name="email" id="email" required placeholder="abc@gmail.com"> </label>
        <label id="number-label">Age(optional): <input type="number" name="age" id="number" min=13 max=100 placeholder=20 </label>
      </fieldset>

      <fieldset>
      <label> Which option best decribes your current role? 
        <select id="dropdown">
          <option value=" "> Select</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>
      </label>
      
      <label> Would you recommend freeCodeCamp to a friend? </label>
        <label> <input type="radio" name="recommendation" value="defo">Definitely  </label>
        <label>
        <input type="radio" name="recommendation" value="maybe" >Maybe  </label>

        <label> <input type="radio" name="recommendation" value="not sure">Not Sure
      </label>

      <label> What is your favorite feature of freeCodeCamp? 
        <select id="dropdown2">
          <option value=" " >select </option>
           <option value="1" >Challenges </option>
            <option value="2" >Projects </option>
             <option value="3" >Community </option>
              <option value="4" >Open Source </option> </label>
      

      <label> What would you like to see improved?
      <input type="checkbox" id="imp1" value="Front-end Projects">Front-end Projects
      </label>

    </fieldset>
      <label> Suggestions </label>
      <textarea id="suggestions" name="suggestions" rows="5" cols="33"
       placeholder="Enter your comment here...">
      </textarea>

    </form>
    
  </body>
  
</html>

/* file: styles.css */
label {display:block;
margin: 10 20 ;
}
h1, p {text-align:center;}
fieldset{ margin: 15;}
textarea{margin: 15;}
input[type="checkbox"] {
margin-left: 25px;
margin-bottom: 10px;
display: block;
}

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: Survey Form - Build a Survey Form

Link to the challenge:

2

link your id to the label. The label should be

3

i dont understand… what?

4

inside your label element open it just introduce for=sugesstion just like the you introduce class to elements

5

alright done, but i am still facing those issues, how do i resolve them?

6

You have a lot going on in a way that I am not sure why you have it that way. So firstly, I will just address the textarea. You need to get rid of all that space that is between the > and there should be no space between those two and then the placeholder should show

Now, I am not sure why but is there a reason you have all of this inside your label element? Also you never close your select element here

<label> What is your favorite feature of freeCodeCamp? 
        <select id="dropdown2">
          <option value=" " >select </option>
           <option value="1" >Challenges </option>
            <option value="2" >Projects </option>
             <option value="3" >Community </option>
              <option value="4" >Open Source </option> </label>

And the reason your checkbox is so far to the right is because of the style you put on it. All that margin-left is going to push it right. If you are trying to get your checkbox and text on the same line then you need you to look at what you are using for display in your style…

7

alright so i closed the select, and i shouldn’t be putting the dropdown code lines in a label? why is that?
and i deleted all the extra space, the placeholder still isn’t showing
the checkbox and the text arent coming in the same line, when i use inline property they get merged with the “what would you like to see improved?” and when i use block, the checkbox and text come in 2 different lines

8

" The <label> HTML element represents a caption for an item in a user interface." A label is just that, a label that represents text for an input or a select element. I dont see any benefit of having all of that inside your label when you can just do. After copying your code into a codepen abd seeing everything I am assuming you do it to have everything on the same line? I dont think theres anything invalid about it, but I would do it in the example below and then use css if you want in to the same line. Anyway, its your code and your choice so I will leave it at that

<label> What is your favorite feature of freeCodeCamp? </label>
<select id="dropdown2">
   <option value=" " >select </option>
   <option value="1" >Challenges </option>
   <option value="2" >Projects </option>
   <option value="3" >Community </option>
   <option value="4" >Open Source </option>
</select>

As I said earlier I put your code into a codepen and made the changes I described the in my previous post and it all works fine. I do have to mention that I took this line

 <label> What would you like to see improved?
      <input type="checkbox" id="imp1" value="Front-end Projects">Front-end Projects
      </label>

and changed it to

<label> What would you like to see improved? </label>
      <input type="checkbox" id="imp1" value="Front-end Projects">Front-end Projects

Then I was able to get rid of the display style altogether. You can see all the changes I made here

1 Like
9

yeah i was typing everything up with label so everything can be in a line, and also so everything could be together. But yeah it does make sense to not use it for this purpose if label is actually meant to represent text, I’ll keep this in mind, thanks, and i followed ur corrections and now the code works.

also since you went through the entire code, are there any other frivolous lines of code? or anywhere i need to make any sort of corrections? pls do tell me, thanks

10

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