Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Hi Guys,
I have completed the form, however, I can’t reduce the distance present between the options in the radio buttons and checkboxes. Also between the H1 and P . Please help.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <title>survey-form</title>
</head>

<body>
  <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>


<fieldset>
  <form id="survey-form">
    <label for="name" id="name-label">Name <input id="name" type="text" name="name" placeholder="Enter your name" required></label>
    <label for="email" id="email-label">Email <input id="email" type="email" name="email" placeholder="Enter your email" required></label>
    <label for="number" id="number-label">Age(optional) <input id="number" type="number" name="age" min="13" max="120" placeholder="Age"></label>


<label for="dropdown">Which option best describes your current role?
  <select id="dropdown">
    <option>Select an option</option>
    <option>Student</option>
    <option>Full Time Job</option>
    <option>Full Time Learner</option>
    <option>Prefer not to say</option>
    <option>Other</option>
  </select>
</label>


<label>Would you recommend freeCodeCamp to a friend?</label>
  <label><input id="definitely" class="inline" type="radio" name="refer" value="definitely"> Definitely</label>
  <label><input id="maybe" class="inline" type="radio" name="refer" value="maybe"> Maybe</label>
  <label><input id="notsure" class="inline" type="radio" name="refer" value="notsure"> Not sure</label>


<label for="dropdown">What is your favorite feature of freeCodeCamp?
      <select id="dropdown">
        <option>Select an option</option>
        <option>Challenges</option>
        <option>Projects</option>
        <option>Community</option>
        <option>Open Source</option>
      </select>
    </label>

<label>What would you like to see improved? (Check all that apply)
  <label><input type="checkbox" name="frontend" value="frontend" class="inline"> Front-end Projects</label>
  <label><input type="checkbox" name="frontend" value="backend" class="inline"> Back-end Projects</label>
  <label><input type="checkbox" name="frontend" value="datavisualization" class="inline"> Data Visualization</label>
  <label><input type="checkbox" name="frontend" value="challenges" class="inline" class="inline"> Challenges</label>
  <label><input type="checkbox" name="frontend" value="opensourcecommunity" class="inline"> Open Source Community</label>
  <label><input type="checkbox" name="frontend" value="gitter" class="inline"> Gitter help rooms</label>
  <label><input type="checkbox" name="frontend" value="videos" class="inline"> Videos</label>
  <label><input type="checkbox" name="frontend" value="citymeetups" class="inline"> City Meetups</label>
  <label><input type="checkbox" name="frontend" value="wiki" class="inline"> Wiki</label>
  <label><input type="checkbox" name="frontend" value="forum" class="inline"> Forum</label>
  <label><input type="checkbox" name="frontend" value="courses" class="inline"> Additional Courses</label>
</label>

<label for="comment">Any comments or suggestions?<textarea id="comment" rows="6" cols="60" placeholder="Enter your comments here..."></textarea></label>


<input id="submit" type="submit" value="Submit">


</fieldset>
</form> 
<body>
</html>

/* file: styles.css */
body{
  width:100%;
  height:100vh;
  margin:0;
  background-color:rgb(0,128,128);;
  color:#ffffff;
  font-family:Tahoma;
  font-size:16px;
}

form{
  width: 60vw;
  max-width:700px;
  min-width:300px;
  margin:0 auto;
  padding:2em;
  background-color:#1b1b32;
  border-radius:1%;
}

fieldset{
  border:none;
  padding:2rem 0;
}

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

label{
  display:block;
  margin: 0.5em 0;
  padding-bottom:1em;
}

#dropdown, input, textarea{
  width:100%;
  margin:10px 0 0 0;
  min-height: 2.5em;
  padding-left:5px;
  font-size:16px;
  border-radius:2%
  border:none;
}

.inline{
  width: unset;
  margin: 0 0.2em 0 0;
  vertical-align:middle;
}

input[type="submit"]{
  background-color:green;
  color:white;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

You styled only input with a type of ‘submit’. You should do this for all inputs with different types (file, checkbox, radio…) in your CSS code.

3

I’m not totally clear on whether you mean vertical spacing or horizontal spacing but if you mean the padding between the text labels for the options then you can interface with that space here:

label {
    display: block;
    margin: 0.5em 0;
    padding-bottom: 1em; <--- here
}

Keep in mind the bottom property won’t apply to the last element, probably won’t matter here but it could be done more specifically.

4

Hi there, I tried changing padding-bottom in the label selector, but then it changes for every other label as well. How can I reduce the space between the checkbox and radio options’ texts is what I wanna know.

5

You could write out a custom class such as :

no-padding {
    padding: 0px;
    property: value; 
}

then you would put this as the class type for anything you don’t want to have padding. You might run into conflicting styles and will need to consider hierarchy if that’s the case.

6

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