Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I want the checkboxes for “What do you want to see improved” labels inline but the options stacked on top of each other and I can’t remember how to do that. I also think my code in CSS is complicated and I’m missing an easy way to target more things and make it more concise

Also just to be clear I didn’t write the css in the html part, this is just to show what i have

### Your code so far

      <label id="improvements" for="improvements"> What would you like to see improved?</label>
        <input class="inline" type="checkbox" value="Front-end-Projects">Front-end Projects</input>
        <input class="inline" type="checkbox" value="Back-end-Projects">Back-end Projects</input>
        <input class="inline" type="checkbox" value="Data-Visualization">Data Visualization</input>
        <input class="inline" type="checkbox" value="Challenges">Challenges</input>
        <input class="inline" type="checkbox" value="Open-Source-Communtiy">Open Source Community</input>
        <input class="inline" type="checkbox" value="Gitter-help-rooms">Gitter help rooms</input>
        <input class="inline" type="checkbox" value="Videos">Videos</input>
        <input class="inline" type="checkbox" value="City-Meetups">City Meetups</input>
        <input class="inline" type="checkbox" value="Wiki">Wiki</input>
        <input class="inline" type="checkbox" value="Forum">Forum</input>
        <input class="inline" type="checkbox" value="Additional-Courses">Additional Courses</input>
      </div>

h1, p {
  text-align: center;
}
label {
display: block;
}
input {
  display: block
}
.inline {
  display: inline;
}
#improvements {
  display: block;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hello @Madik9!

Please tell us, is this the complete code for both html and css?

Thanks! :sun_with_face:

1 Like
3

Hi! No it’s not but I can go back and add all of it if it’ll help

2 Likes
4

yes that would be better

1 Like
5

Okay here’s the full HTML and CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, inital -scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>

<body>

  <div class="container">
    <header>
     <h1 id="title">freeCodeCamp Survey Form</h1>
     <p id="description"><em>Thank you for taking the time to help us improve the platform</em></p>
    </header>
    <form id="survey-form">
      <div class="form-group">
      <label for="Name" id="name-label">Name: <input type="text" id="name" required placeholder="Mary Sue"></label></div>

      <div class="form-group">
      <label for="Email" id="email-label">Email: <input id="email" type="email" required placeholder="myemail@emailaddress.com"></label>
      </div>

      <div class="form-group">
      <label for="Age" id="number-label">Age: <input type="number" min="13" max="99" id="number" required placeholder="27"></label>
      </div>

      <div class="form-group">
      <label id="current-role" for="current-role">Which option best describes your current role?</label>
      <select type="dropdown" for="current-role" id="dropdown">
        <option disabled selected 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>
        </select>
      </div>

      <div class="form-group">
      <label id="recommended" for="recommended">Would you recommend freeCodeCamp to a friend?</label>
        <label><input class="inline" type="radio" for="recommend" name="recommend" value="Definitely">Definitely</label>
        <label><input class="inline" type="radio" for="recommend" name="recommend" value="Maybe">Maybe</label>
        <label><input class="inline" type="radio" for="recommend" name="recommend" value="Not sure">Not sure</label>
      </div>

      <div class="form-group">
      <label id="favorite-part" for="favorite-part">What is your favorite part of freeCodeCamp?</label>
      <select type="dropdown" for="favorite-part">
        <option disabled selected value>Select an option</option>
        <option value="Challenges">Challenges</option>
        <option value="Projects">Projects</option>
        <option value="Community">Community</option>
        <option value="Open Source">Open Source</option>
      </select>
      </div>

      <div class="form-group">
      <label id="improvements" for="improvements"> What would you like to see improved?</label>
        <input class="inline" type="checkbox" value="Front-end-Projects">Front-end Projects</input>
        <input class="inline" type="checkbox" value="Back-end-Projects">Back-end Projects</input>
        <input class="inline" type="checkbox" value="Data-Visualization">Data Visualization</input>
        <input class="inline" type="checkbox" value="Challenges">Challenges</input>
        <input class="inline" type="checkbox" value="Open-Source-Communtiy">Open Source Community</input>
        <input class="inline" type="checkbox" value="Gitter-help-rooms">Gitter help rooms</input>
        <input class="inline" type="checkbox" value="Videos">Videos</input>
        <input class="inline" type="checkbox" value="City-Meetups">City Meetups</input>
        <input class="inline" type="checkbox" value="Wiki">Wiki</input>
        <input class="inline" type="checkbox" value="Forum">Forum</input>
        <input class="inline" type="checkbox" value="Additional-Courses">Additional Courses</input>
      </div>

      <div class="form-group">
        <label for="additional-comments" id="additional-comments">Any comments or suggestions? </label>
        <textarea id="additional-comments" placeholder="Enter your comments here..." cols="32" rows="10"></textarea>
      </div>
      <div class="form-group">
       <input type="submit" id="submit">
      </div>
  </form>
</body>
</div>
</html>

h1, p {
  text-align: center;
}
label {
display: block;
}
input {
  display: block
}
.inline {
  display: inline;
}
#improvements {
  display: block;
}
7

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