Survey Form - Build a Survey Form

HTML-CSS
1

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

Your code so far

why isn’t the line 48 of the code getting executed?
and why is line 49 showing inline display property?

<!-- 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;}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

The structure of your CSS selectors seems to be wrong. This is the structure.

selector{
    property: value;
}
1 Like
3
  • <select id="dropdown2"> doesn’t have the closing tag
  • <input type=“number” name=“age” id=“number” min=13 max=100 placeholder=20 </label> …'the ‘input’ element is not closed
  • all values for ‘margin’ properties should have units added after the numbers:
margin: 20px; .....this is guidance
4

yeah i have made these but i’m still facing that same issue

5

With all applied mentioned steps to correct the code you will get the following:

image
image1296×870 58.6 KB

6

image
image1895×920 46.7 KB

I am getting this as the result, line 48 isn’t getting executed, “what would you see to improved ?” is not getting printed on the screen. Why?

7
  • Don’t add another code line before the previous request is not solved. You don’t have checkboxes with the text set to the “Back-end Projects” and “Data Visualization” in the firstly posted code.
  • As I said, the ‘select’ element with id set to “dropdown2” doesn’t have the closing </select> tag after the last ‘option’ element.
1 Like
8

ohh okay i fixed that, but why is it coming in as inline? instead of block?

9

You defined ‘label’ to be displayed “block”, and wrapped the input elements in that ‘label’ element. That is why the code is not working in this case. You can create that part of the code as follows:

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

and then, add the css rule:

input[type="checkbox"] {
  margin-left: 25px;
  margin-bottom: 10px;
}

This is guidance. It can be solved different ways…

1 Like
10

Alright thanks, but isnt checkbox block by default?

11
12

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