Please help. Checkbox Problem

Tell us what’s happening:
I can’t seem to get the check boxes to appear on the left of their label text. They keep appearing under the text. It worked for my radio buttons but not for my checkboxes. I think it has something to do with my width/inline/block code.

Your code so far

WARNING

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Japanese Cultural Survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="header">
    <h1 id="title">Japanese Cultural Survey</h1>
    <p id="description">Please let us know about your experience in Japan
      </div>
    <form method="post" action='https://register-demo.freecodecamp.org'id="survey-form">
      <fieldset>
        <label for="name" id="name-label">Name: 
          <input id="name" name="name" type="text" required placeholder="Enter your Name" />
          </label>
        <label for="email" id="email-label">Email: <input id="email" name="email" type="email" required placeholder="Enter your Email"/></label>
        <label for="number" id="number-label">How many times have you visited Japan: <input id="number" type="number" name="number" min="1" max="999" required placeholder="Enter number of visits"/></label>
        </fieldset>
        <fieldset>
        <p>Would you recommend Japan to others?</p>
        <label for="recommend" id="recommend-label"><input id="recommend" type="radio" name="recommendation" value="Recommend" class="inline"/> Recommend</label>
        <label for="don't recommend" id="recommend-label"><input id="don't recommend" type="radio" name="recommendation" value="Don't recommend" class="inline"/> Don't recommend</label></fieldset>
        <fieldset>
        <label for="dropdown">What was your purpose for travel?
          <select id="dropdown" name="purpose">
            <option value="">(select one)</option>
            <option value="1">Leisure/holidays</option>
            <option value="2">Education</option>
            <option value="3">Visiting friends/family</option>
            <option value="4">Business</option>
            <option value="5">Other</option>
          </select></fieldset>
          <fieldset>
        </label>
        <p>What did you like about Japan?</p>
        <div class="checkbox">
          <label for="nature">Natural Scenery</label>
        <input id="nature" type="checkbox" value="Nature" class="inline">
        <label for="safety">Safety</label>
        <input id="safety" type="checkbox" value="Safety" class="inline">
        <label for="food">Incredible Food</label>
        <input id="food" type="checkbox" value="Food" class="inline">
        <label for="people">Friendly People</label>
        <input id="people" type="checkbox" value="People" class="inline">
        <label for="transportation">Efficient Public Transportation</label>
        <input id="transportation" type="checkbox" value="Transportation" class="inline">
        <label for="festivals">Festivals</label>
        <input id="festivals" type="checkbox" value="Festivals" class="inline">
        <label for="clean">Cleanliness</label>
        <input id="clean" type="checkbox" value="Clean" class="inline">
        <label for="shopping">Shopping</label>
        <input id="shopping" type="checkbox" value="Shopping" class="inline">
        <label for="sakura">Sakura (Cherry Blossoms)</label>
        <input id="sakura" type="checkbox" value="Sakura" class="inline">
        <label for="anime">Anime</label>
        <input id="anime" type="checkbox" value="Anime" class="inline">
        <label for="sports">Sports events (sumo, baseball, etc)</label>
        <input id="sports" type="checkbox" value="Sports" class="inline">
        <label for="other">Other</label>
        <input id="other" type="checkbox" value="Other" class="inline">
        </div>
        <label for="otherlikes">If you selected "other", please tell us what you liked: 
          <textarea id="otherlikes" name="Other likes" rows="5" cols="49" placeholder="I enjoyed hiking up Mount Fuji..."></textarea>
          </label>
        </fieldset>
        <input id="submit" type="submit" value="Submit" />
      </form>
    </body>
  </html>

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  background-image: url(https://i.postimg.cc/7hf4FGxm/pink-seamless-pattern-with-onigiri-rice-balls-japanese-food-seamless-pattern-197792-4770.jpg);
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: 400;
  padding: 20px;
  overflow-x: hidden;
}

.header {
  font-size: 1.4rem;
  margin-top: 0px;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 0 0 3px #000000, 0 0 5px #000000;
  color: #CFFFFD;
}

form {
  width: 70vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
  background-color: rgba(255, 220, 220, 0.7);
    text-shadow: 0 0 1px #000000, 0 0 3px #000000;
    color: #CFFFFD;
}

fieldset {
  border: none;
  padding: 1rem 0;
  border-bottom: 3px ridge 
}

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

input, textarea, select {
 margin: 10px 0 0 0;
 width: 100%;
}

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

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

.checkbox {
  display: inline;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Hello.

Your code…

… does nothing. Remove it.

And…

… try to put the input inside the label. (<label><input></label>)

Have a nice day. Grets.

1 Like

That was exactly the problem! I couldn’t figure out for the longest time why nothing was working. The fix was so simple. Thank you so much!

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