Survey Form - Build a Survey Form

HTML-CSS
1

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

Hi. I am currently having an issue trying to get my checkboxes to align with the labels. At the moment the label is positioned below the checkbox and I can’t figure out how to get these to appear side by side in the same line. Any help on this would be appreciated :slight_smile:

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
<title>freeCodeCamp Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1 id="title">freeCodeCamp Survey Form </h1>
  <p id="description">Thank you for taking the time to help us improve the platform</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Name <input id="name" type="text" placeholder="Enter your name" required /></label>
<label id="email-label">Email <input id="email" type="email" placeholder="Enter your email" required />  </label>
<label id="number-label">Age (optional) <input id="number" type="number" min="10" max="99" placeholder="Age" /></label>
<label>Which option best describes your current role? <select id="dropdown">
  <option value="" id="dropdown-content">Select current role</option>
  <option value="1" id="dropdown-content">Student</option>
  <option value="2" id="dropdown-content">Full time job</option>
  <option value="3" id="dropdown-content">Full time learner</option>
  <option value="4" id="dropdown-content">Prefer not to say</option>
  <option value="5" id="dropdown-content">Other</option>
  </select>
</label>
</fieldset>
<fieldset>
<label>Would you recommend freeCodeCamp to a friend?</label>
  <label class="recommend" for="rd1"> Definitely<input checked="checked" type="radio" name="recommendation" id="rd1" value="definitely" class="recommendations" />
  </label><br />
  <label class="recommend" for="rd2"> Maybe
  <input type="radio" name="recommendation" id="rd2" value="maybe" class="recommendations" /></label><br />
  <label class="recommend" for="rd3"> Not Sure<input type="radio" name="recommendation" id="rd3" value="not-sure" class="recommendations" />
  </label><br />
  </fieldset>
  <fieldset>
<label>What is your favourite feature of freeCodeCamp?
  <select id="feature">
    <option value="">Select an option</option>
    <option value="1">Challenges</option>
    <option value="2">Projects</option>
    <option value="3">Community</option>
    <option value="4">Open Source</option>
    </select>
</label>
</fieldset>
<fieldset>
<div class="checkbox">
<label>What would you like to see improved? (Check all that apply)</label>
<input type="checkbox" name="improvements" id="i1">
<label for="i1">Front-end Projects</label>
<input type="checkbox" name="improvements" id="i2">
<label for="i2">Back-end Projects</label>
<input type="checkbox" name="improvements" id="i3">
<label for="i3">Data Visualisation</label>
<input type="checkbox" name="improvements" id="i4">
<label for="i4">Challenges</label>
<input type="checkbox" name="improvements" id="i5">
<label for="i5">Open Source Community</label>
<input type="checkbox" name="improvements" id="i6">
<label for="i6">Gitter Help Rooms</label>
<input type="checkbox" name="improvements" id="i7">
<label for="i7">Videos</label>
<input type="checkbox" name="improvements" id="i8">
<label for="i8">City Meetups</label>
 <input type="checkbox" name="improvements" id="i9">
<label for="i9">Wiki</label>
 <input type="checkbox" name="improvements" id="i10">
<label for="i10">Forum</label>
 <input type="checkbox" name="improvements" id="i11">
<label for="i11">Additional Courses</label>
</div>
</fieldset>
<fieldset>
<label>Any comments or suggestions?
 <textarea name="comments" rows="6" cols="30" placeholder="Enter your comment here..." ></textarea> 
  </label></fieldset> 
<input id="submit" type="submit" value="Submit" />
</form>
</body>
</html>

/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #EBECF0;
color: #000000;
font-family: Tahoma;
font-size: 16px;
}

h1, p {
margin: 1em auto;
text-align: center;
}

form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}

fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #d7d8db;
}

fieldset:last-of-type {
border-bottom: none;
}

label {
display: block;
margin: 0.5rem 0;
}

input:not([type="radio"]), 
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}

.recommendations {
float: left;
padding: 0 1em;
text-align: center;
}

input, textarea {
background-color: #d7d8db;
border: 1px solid #d7d8db;
color: #000000;
}

.checkbox input, .checkbox label {
display: inline-block;
vertical-align: middle;
}

.checkbox label {
margin-right: 20px;
}

input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #d7d8db;
border-color: #d7d8db;
min-width: 300px;
}

input[type="file"] {
padding: 1px 2px;
}


  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

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