Survey Form - Build a Survey Form

HTML-CSS
1

Hi, I am absolutely struggling to get the checkbox values in the same line as the checkbox whilst also having different checkboxes and their respective values on the same line.

The css i have so far for this porblem:
.block{
display: block}

.padding{padding-bottom:px}

.left,.right{display:inline}

Thank you!

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head><link rel="stylesheet" href="styles.css"><head>
  <h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description" class="description">Thank you for taking the time to help us improve the platform</p>
<body>
  <form id="survey-form">
  <!-- first field -->
  <fieldset>
    <label class="block" for="name" id="name-label" >Name<input class="block" id = "name" type="text" required placeholder="Enter your name"><label>
    <label class="block" for="email" id="email-label" >Email<input class="block"id= "email" type= "text" type="email" 
required placeholder="Enter your email"><label>
    <label class="block" for="age" id="age-label" >Age(optional)<input class="block" id="age" type="number" placeholder="Enter your age" ><label>    
</fieldset>
<!-- second field-->
<fieldset>
  <label class="block">Which option best describes your current role?<select class="block" id="dropdown">
    <option value ="">Select current role</option>
    <option value ="student">Student</option>
    <option value ="full-time-job">Full Time Job</option>
    <option value ="full-time-learner">Full Time Learner</option>
    <option value ="prefer-not-to-say">Prefer not to say</option>
    <option value ="other">Other</option>
  </label>
</fieldset>
<!--Third field -->
<fieldset>
  <label class="block" ><input type="radio" id="definitely" name="recommendation" >Definitely</label>
<label class="block" ><input type="radio" id="maybe" name="recommendation" >Maybe</label>
  <label class="block"><input type="radio" id="not-sure" name="recommendation" >Not sure</label>
 </fieldset>
 <!--Fourth fieldset-->
 <fieldset>
    <p class="checkbox-title">What would you like to see improved. Check all that apply</p>
 
   <input value="front-end-projects" id="front-end-projects"  type="checkbox" ><label for="front-end-projects" >Front End Projects </label>

   <input id="back-end-projects"
 value="back-end-projects"type="checkbox"
><label class="right" for="back-end-projects">Back End Projects </label>

   <input value="data-visualisation" type="checkbox"><label  for="data-visualisation">Data visualisation </label>
  

   <input id="challenges" value="challenges" type="checkbox"
class"padding"><label for="challenges">Challenges </label>

   <input id="open-source-community" value="open-source-community" type="checkbox"><label for="open-source-community">Open Source Community </label>

<input id="glitter-help-rooms" value="glitter-help-rooms" type="checkbox"><label for="glitter-help-rooms">Glitter help rooms </label>

<input id="videos" value="videos" type="checkbox"><label for="videos">Videos</label>

<input id="city-meetups" value="city-meetups" type="checkbox"><label for="city-meetups">City meetups </label>

<label for="wiki">Wiki<input id="wiki" value="wiki" type="checkbox"></label>

<input id="forum" value="forum" type="checkbox"><label for="forum">Forum </label>

<input id="additional-courses" value="additional-courses" type="checkbox"><label for="additional-courses">Additional courses </label>
</fieldset>
<!--Fifth fieldset-->
<fieldset>
 <label for="bio">Any comments or suggestions
          <textarea id="comments-and-suggestions" name="comments-and-suggestions" rows="4" cols="40" placeholder="Enter your comment here..."></textarea>
        </label>
 <input type="submit" value="Submit" />
</fieldset>
</form>
</body>

</body>
</html>

/* file: styles.css */
body{ background-image: url(https://st4.depositphotos.com/10839834/21083/v/450/depositphotos_210836720-stock-illustration-streaming-binary-code-background-cyber.jpg);
background-repeat: no-repeat;
background-size: cover;
color:white;
font-family: sans-serif;
font-size: 25px
}

h1{font-size: 30px;}

.description{
font-size: 22px;
}

h1, .description{
font-family: palatino;
text-align: center;
margin: 0 auto;
}


form{background-color:rgba(55, 10, 97,0.8);
max-width: 450px;
min-width: 300px;
margin: 0 auto
}
.block{
display: block}

.padding{padding-bottom:px}


.left,.right{display:inline}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

I think you would make it a lot easier on yourself if you wrapped each label/input pair in a div. There is nothing wrong with using divs to help with styling. That’s exactly what they are for.

3

I just added the

and my problem was instantly solved, thank you so much.

4

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