Html Question posted in
Some basic documentation can be found here.

Html – freeCodeCamp: Responsive Web Design – Survey Form Certification

I am trying to learn to code as a hobby, to preface all this. HTML and CSS seemed like a fun place to start, because building websites seemed intriguing to me.

I am going through the survey form certification of the responsive web design curriculum, and I cannot get the checkboxes to align to the left side of the form like I want. specifically, I want each checkbox to have its own line, aligned to the left side of the form, not listing one directly after another as it is currently formatted. I have searched online for remedies, and have tried many. However, I am not well-versed in this area, so any help would be appreciated. I will list my code below.

h1,p {
  margin: 5px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

body {
  color: white;
  background-color: rgb(51, 0, 0);
  font-family: 'Poppins', sans-serif;
}

form {
  background-color: rgb(32,0,0);
  width: 80vw;
  margin: 0 auto;
}

label {
  display: block;
}

input  {
  background-color: rgb(160, 160, 160);
}
  
.input-checkbox {
  display: inline-block;
  margin-right: 0.625rem;
  min-height: 1 rem;
  min-width: 1 rem;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: rgb(160, 160, 160);
  border-color: white;
  min-width: 300px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">
  </head>
<h1 id="title">freeCodeCamp Survey Form
</h1>
  <p id="description">Please answer below to help us improve our platform.</p>
  <hr>
  <body>
    <form id="survey-form">
      <label for="name">First and Last Name</label>
        <input id="name" type="text" name="name" placeholder="Enter your Name" required></input>
      <label for="email">Email Address</label>
        <input id="email" type="email" name="email" placeholder="Enter your Email" required></input>
      <label for="age">Age (optional)</label>
        <input id id="number" type="number" min="13" max="120" name="age" placeholder="##"></input>
      <label for="referrer">How did you hear about us?</label>
        <select id="referrer" name="referrer">
          <option value="">(select one)</option>
          <option value="1">Youtube</option>
          <option value="2">TikTok</option>
          <option value="3">Online Forum</option>
          <option value="4">Other</option>
        </select>
      <legend>Select Your Gender:</legend>
        <label for="gender">
          <input id="Male" type="radio" name="gender" class="input-checkbox" checked></input>Male</label>
        <label for="gender">
          <input id="Female" type="radio" name="gender" class="input-checkbox"></input>Female</label>
        <label for="gender">
          <input id="Other" type="radio" name="gender" class="input-checkbox" ></input>Prefer not to disclose</label>
      <legend>What Core Curriculum have you explored on our platform, so far?</legend>
        <label for="projects">
          <input id="web-dev" type="checkbox" name="projects" value="web-dev" class="input-checkbox">Responsive Web Design</input>
          <input id="javascript" type="checkbox" name="projects" value="javascript" class="input-checkbox">Javascript Algorithms and Data Structures</label></input>
          <input id="front-end" type="checkbox" name="projects" value="front-end" class="input-checkbox">Front End Development</input>
          <input id="data-vis" type="checkbox" name="projects" value="data-vis" class="input-checkbox">Data Visualization</input>
          <input id="rel-data" type="checkbox" name="projects" value="rel-data" class="input-checkbox">Relational Databases</input>
          <input id="back-dev" type="checkbox" name="projects" value="back-dev" class="input-checkbox">Back End Development</input>
          <input id="q-a" type="checkbox" name="projects" value="q-a" class="input-checkbox">Quality Assurance</input>
          <input id="python" type="checkbox" name="projects" value="python" class="input-checkbox">Scientific Computing with Python</input>
          <input id="data-an" type="checkbox" name="projects" value="data-an" class="input-checkbox">Data Analysis with Python</input>
          <input id="info-sec" type="checkbox" name="projects" value="info-sec" class="input-checkbox">Information Security</input>
          <input id="machine-learning" type="checkbox" name="projects" value="machine-learning" class="input-checkbox">Machine Learning with Python</input>
          <input id="algebra" type="checkbox" name="projects" value="algebra" class="input-checkbox">College Algebra with Python</input>
        </label>
      <legend>Provide a Bio:</legend>
        <textarea id="bio" rows="3" cols="40" placeholder="I enjoy coding on the weekends..."></textarea>
      <input type="submit" value="Submit"></input>
    </form>
  </body>
</html>

```

I have tried many different CSS formats to remedy this, but haven’t found a solution yet. I took an overseas vacation between the last time I worked on this so I’m a bit fuzzy on all the avenues I took to try and solve this problem.

Tags:

2

Answers


  1. 0

    One way to solve this issue would to just add br tag. The br tag inserts a single line break. So I just added br tag after each label to insert a single line break and also added br in some places to make some space between them. Also I didn’t make any changes to your css.
    here is the code I hope this helps:

    h1,p {
    margin: 5px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
  }
  
  body {
    color: white;
    background-color: rgb(51, 0, 0);
    font-family: 'Poppins', sans-serif;
  }
  
  form {
    background-color: rgb(32,0,0);
    width: 80vw;
    margin: 0 auto;
  }
  
  label {
    display: block;
  }
  
  input  {
    background-color: rgb(160, 160, 160);
  }
    
  .input-checkbox {
    display: inline-block;
    margin-right: 0.625rem;
    min-height: 1 rem;
    min-width: 1 rem;
  }
  
  input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: rgb(160, 160, 160);
    border-color: white;
    min-width: 300px;
  }
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">
  </head>
<h1 id="title">freeCodeCamp Survey Form
</h1>
  <p id="description">Please answer below to help us improve our platform.</p>
  <hr>
  <body>
    <form id="survey-form">
      <label for="name">First and Last Name</label>
        <input id="name" type="text" name="name" placeholder="Enter your Name" required></input>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <label for="email">Email Address</label>
        <input id="email" type="email" name="email" placeholder="Enter your Email" required></input>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <label for="age">Age (optional)</label>
        <input id id="number" type="number" min="13" max="120" name="age" placeholder="##"></input>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <label for="referrer">How did you hear about us?</label>
        <select id="referrer" name="referrer">
          <option value="">(select one)</option>
          <option value="1">Youtube</option>
          <option value="2">TikTok</option>
          <option value="3">Online Forum</option>
          <option value="4">Other</option>
        </select>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <legend>Select Your Gender:</legend>
        <label for="gender">
          <input id="Male" type="radio" name="gender" class="input-checkbox" checked></input>Male</label>
        <label for="gender">
          <input id="Female" type="radio" name="gender" class="input-checkbox"></input>Female</label>
        <label for="gender">
          <input id="Other" type="radio" name="gender" class="input-checkbox" ></input>Prefer not to disclose</label>
          <br> <!-- Added this line so the next labels can be on the second line  -->
          <br> <!--Added another br so I can make some space between this label and other label-->
      <legend>What Core Curriculum have you explored on our platform, so far?</legend>
      <br> <!-- Added this line so the next labels can be on the second line  -->
        <label for="projects">
            <input id="web-dev" type="checkbox" name="projects" value="web-dev" class="input-checkbox">
            <label for="web-dev">Responsive Web Design</label>
            <br>
            
            <input id="javascript" type="checkbox" name="projects" value="javascript" class="input-checkbox">
            <label for="javascript">Javascript Algorithms and Data Structures</label>
            <br>
            
            <input id="front-end" type="checkbox" name="projects" value="front-end" class="input-checkbox">
            <label for="front-end">Front End Development</label>
            <br>
            
            <input id="data-vis" type="checkbox" name="projects" value="data-vis" class="input-checkbox">
            <label for="data-vis">Data Visualization</label>
            <br>
            
            <input id="rel-data" type="checkbox" name="projects" value="rel-data" class="input-checkbox">
            <label for="rel-data">Relational Databases</label>
            <br>
            
            <input id="back-dev" type="checkbox" name="projects" value="back-dev" class="input-checkbox">
            <label for="back-dev">Back End Development</label>
            <br>
            
            <input id="q-a" type="checkbox" name="projects" value="q-a" class="input-checkbox">
            <label for="q-a">Quality Assurance</label>
            <br>
            
            <input id="python" type="checkbox" name="projects" value="python" class="input-checkbox">
            <label for="python">Scientific Computing with Python</label>
            <br>
            
            <input id="data-an" type="checkbox" name="projects" value="data-an" class="input-checkbox">
            <label for="data-an">Data Analysis with Python</label>
            <br>
            
            <input id="info-sec" type="checkbox" name="projects" value="info-sec" class="input-checkbox">
            <label for="info-sec">Information Security</label>
            <br>
            
            <input id="machine-learning" type="checkbox" name="projects" value="machine-learning" class="input-checkbox">
            <label for="machine-learning">Machine Learning with Python</label>
            <br>
            
            <input id="algebra" type="checkbox" name="projects" value="algebra" class="input-checkbox">
            <label for="algebra">College Algebra with Python</label>
            <br>
            
        </label>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <legend>Provide a Bio:</legend>
      <br> 
        <textarea id="bio" rows="3" cols="40" placeholder="I enjoy coding on the weekends..."></textarea>
        <br>
      <input type="submit" value="Submit"></input>
    </form>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    To properly align the checkboxes, set the container .checkbox-group div to display: flex and flex-direction: column. For spacing, add row-gap: 10px or any of you choice and align-items: flex-start to align on the left side .

    h1, p {
  margin: 5px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

body {
  color: white;
  background-color: rgb(51, 0, 0);
  font-family: 'Poppins', sans-serif;
}

form {
  background-color: rgb(32, 0, 0);
  width: 80vw;
  margin: 0 auto;
}

input {
  background-color: rgb(160, 160, 160);
}

.input-checkbox {
  display: inline-block;
  margin-right: 0.625rem;
  min-height: 1rem;
  min-width: 1rem;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  align-items: flex-start;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: rgb(160, 160, 160);
  border-color: white;
  min-width: 300px;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Please answer below to help us improve our platform.</p>
  <hr>
  <form id="survey-form">
    <label for="name">First and Last Name</label>
    <input id="name" type="text" name="name" placeholder="Enter your Name" required></input>
    
    <label for="email">Email Address</label>
    <input id="email" type="email" name="email" placeholder="Enter your Email" required></input>
    
    <label for="age">Age (optional)</label>
    <input id="number" type="number" min="13" max="120" name="age" placeholder="##"></input>
    
    <label for="referrer">How did you hear about us?</label>
    <select id="referrer" name="referrer">
      <option value="">(select one)</option>
      <option value="1">Youtube</option>
      <option value="2">TikTok</option>
      <option value="3">Online Forum</option>
      <option value="4">Other</option>
    </select>
    
    <legend>Select Your Gender:</legend>
    <label for="gender">
      <input id="Male" type="radio" name="gender" class="input-checkbox" checked>Male</input>
    </label>
    <label for="gender">
      <input id="Female" type="radio" name="gender" class="input-checkbox">Female</input>
    </label>
    <label for="gender">
      <input id="Other" type="radio" name="gender" class="input-checkbox">Prefer not to disclose</input>
    </label>
    
    <legend>What Core Curriculum have you explored on our platform, so far?</legend>
    <div class="checkbox-group">
      <label for="web-dev">
        <input id="web-dev" type="checkbox" name="projects" value="web-dev" class="input-checkbox">Responsive Web Design</input>
      </label>
      <label for="javascript">
        <input id="javascript" type="checkbox" name="projects" value="javascript" class="input-checkbox">Javascript Algorithms and Data Structures</input>
      </label>
      <label for="front-end">
        <input id="front-end" type="checkbox" name="projects" value="front-end" class="input-checkbox">Front End Development</input>
      </label>
      <label for="data-vis">
        <input id="data-vis" type="checkbox" name="projects" value="data-vis" class="input-checkbox">Data Visualization</input>
      </label>
      <label for="rel-data">
        <input id="rel-data" type="checkbox" name="projects" value="rel-data" class="input-checkbox">Relational Databases</input>
      </label>
      <label for="back-dev">
        <input id="back-dev" type="checkbox" name="projects" value="back-dev" class="input-checkbox">Back End Development</input>
      </label>
      <label for="q-a">
        <input id="q-a" type="checkbox" name="projects" value="q-a" class="input-checkbox">Quality Assurance</input>
      </label>
      <label for="python">
        <input id="python" type="checkbox" name="projects" value="python" class="input-checkbox">Scientific Computing with Python</input>
      </label>
      <label for="data-an">
        <input id="data-an" type="checkbox" name="projects" value="data-an" class="input-checkbox">Data Analysis with Python</input>
      </label>
      <label for="info-sec">
        <input id="info-sec" type="checkbox" name="projects" value="info-sec" class="input-checkbox">Information Security</input>
      </label>
      <label for="machine-learning">
        <input id="machine-learning" type="checkbox" name="projects" value="machine-learning" class="input-checkbox">Machine Learning with Python</input>
      </label>
      <label for="algebra">
        <input id="algebra" type="checkbox" name="projects" value="algebra" class="input-checkbox">College Algebra with Python</input>
      </label>
    </div>
    
    <legend>Provide a Bio:</legend>
    <textarea id="bio" rows="3" cols="40" placeholder="I enjoy coding on the weekends..."></textarea>
    
    <input type="submit" value="Submit"></input>
  </form>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search