Survey Form - Build a Survey Form

HTML-CSS
1

so why is checkbox exhibiting inline display properties? and when i change its display properties to block, the checkbox and the text come in 2 different lines.
also why is the submit button and refresh button not getting centralized?

<!-- 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> </select> </label>
      
     
<label> What would you like to see improved?</label> 
      <input type="checkbox" id="imp1" value="Front-end Projects">Front-end Projects
      <input type="checkbox" id="imp2" value="Back-end Projects">Back-end Projects 
      <input type="checkbox" id="imp3" value="Data Visualizations">Data Visualizations
      <input type="checkbox" id="imp4" value="Challenges">Challenges
      <input type="checkbox" id="imp5" value="Open Source Community">Open Source Community
      <input type="checkbox" id="imp6" value="Gitter Help Rooms">Gitter Help Rooms
      <input type="checkbox" id="imp7" value="Videos">Videos
      <input type="checkbox" id="imp8" value="City Meetups">City Meetups
      <input type="checkbox" id="imp9" value="Wiki">Wiki
      <input type="checkbox" id="imp10" value="Forum">Forum
      <input type="checkbox" id="imp11" value="Additional Courses">Additional Courses 
      </fieldset>

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

<input type="button" id="submit" value="Submit">
<input type="button" id="refesh" value="Refresh">
    </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: 8px;
margin-bottom: 10px;
}

input[type="button"]{margin: auto;
}

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

Because by default it is an inline element.

That’s what setting an element to display: block does, it turns it into a block level element, which means it will be placed on a line of its own.

Because buttons are inline element by default and thus side auto margins will not center them.

1 Like
3

so how do i resolve this? and i haven’t faced any of these issues anytime before, why would that be? it has always shown block display before for me

4

also for this i googled it, i got the solution as use text-align:center and margin-auto: 0 auto but neither of them worked, why would that be?

5

Have you tried putting them in a div then centralizing that div?

You can do the same thing here. Put each checkbox with their label on a div before setting their display to block.

6

Wrap the label and input in a div, which is a block level element and thus will treat each label/div as a single block.

7

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