Survey Form - Build a Survey Form

**Can someone tell me why under “What sneaker brands do you like? (Check all that apply)” my check boxes to the right are not aligned - You can tell they’re off **

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>

<head>
  <title>The Sneaker Survey</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css">
  <h1 id="title">The Sneaker Survey</h1>
  <p id="description">Have fun!</p>
</head>

<body>
  <form id="survey-form">
    <feildset>
      <label id="name-label">Name <input id="name" class="name" type="text" placeholder="Enter Your Name" required /></label>
      <label id="email-label">Email <input id="email" class="email" type="email" placeholder="Enter Your Email" required /></label>
      <label id="number-label">Age(optional) <input id="number" class="number" type="number" min="10" max="99" placeholder="0" /></label>
      <label>
      <label for="Number-of-Sneakers">How many pairs of sneakers do you have? 
      <input id="number" type="number" name="age" min="1" max="120" /></label>

  <p class="question">What shoe do you put on first?</p>
        <label for="Left-Foot">
        <input id="Left-Foot" type="radio" name="Shoe" class="inline" value="left"/>Left Foot</label>

        <label for="Right-Foot"><input id="Right-Foot" type="radio" name="Shoe" class="inline" value="right" /> Right Foot</label>
</label>

<label for="no-feet"><input id="no-feet" type="radio" name="Shoe" class="inline" value="no-feet"/> I dont have feet</label>
      
  
      <label>What kind of sneaker release do you prefer? </label>
      <select id="dropdown" required>
       <option hidden>Select</option>
       <option value="FCFS"> FCFS</option>
       <option value="Raffle"> Raffle</option>
       <option value="Midnight Release"> Midnight Release</option>
       <option value="Camp"> Camp</option>
       <option value="Call the plug"> Call the plug</option>
       </select>
       
<label>What sneaker brands do you like? (Check all that apply)
      
         <input type="checkbox" class="check" value="Nike"> Nike
         <input type="checkbox" class="check" value="Adidas"> Adidas
         <input type="checkbox" class="check" value="New Balance"> New Balance
         <input type="checkbox" class="check" value="Asics"> Asics
         <input type="checkbox" class="check" value="Puma"> Puma
         <input type="checkbox" class="check" value="Saucony"> Saucony
         </label>
         
     <label> Why do you love sneakers ? 
         <textarea name="text" rows="3" cols="40" placeholder="Answer here...">
         </textarea>
         <input required type="submit" value="submit" id="submit">
        </label>
  </form>
  </feildset>
</body>

</html>
/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  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 #3b3b4f;
}

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

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

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

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

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  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/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

1 Like

Hi @johntecunningham

I did not check it all but you have a TYPO in your fieldset element: </feildset>

After check your HTML and CSS syntax let us know how is working.

Happy coding!

1 Like

Thank you for catching that! I made the fix but my checkboxes are not aligned still.

Hi again John

If you put this code at the end of your CSS you will start to see what is going on:

This select all childs inside the form and give them an outline. I have use outline property because I did not want to affect your display

form * {
  outline: 1px solid pink;
}

This part is comment out because I wanted you see first what is happening.

/* input[type=checkbox] {
  width: 20px;
  outline: 2px solid lightgreen;
} */

It depends what you want you might need to wrap the label-input pairs in a div with a class of form-control, for example, and then use flexbox to display them as you wish. You can wrap all of them (labels and inputs) with a fieldset and use flexbox or grid after, but it depends what you trying to achieve and what you already know, so not worry about it for now.

You also, could use this lines of code at the top of your projects to visualize your code and size your boxes it doesn’t matter the border, padding and content you will give them:

* { box-sizing: border-box; }
* { outline: 1px solid pink; }

Check those properties in MDN, for example.

I hope this make sense and it helps.

Happy coding!

1 Like

Thank you for this! I am going to try my best.

Carlos,

  1. Thank you for this SUPER COOL trick to see what is wrong with my code! really really cool trick!

  2. I tried playing around with flexbox to move my check boxes to the right and have them on the same line but I can’t figure it out.

1 Like

Hi @johntecunningham

Try something like this:

<fieldset class="checkboxes">
  <legend>What sneaker brands do you like? (Check all that apply)</legend>

  <label>
    <input type="checkbox" class="check" value="Nike">Nike
  </label>

  <label>
    <input type="checkbox" class="check" value="Adidas">Adidas
  </label>

   <label>
      <input type="checkbox" class="check" value="New Balance">New Balance
   </label>
</fieldset>

CSS, for example:

.checkboxes > label {
    outline: 2px solid pink;
    display: inline-block;
    width: 80%;
    padding: .2em .4em;
}

Note that I am just grouping those inputs into a fieldset with its own class, making easier to style it. And dont giving extra space to the letters, not necessary I think.

It would be probably a good idea save all your code into a separate file and start over. Mark your boxes using border or outline, and start styling your survey form from general to details. Solving first general display and form size and position into the page, for example. And then styling every fieldset. And finally, all inside those fieldsets, one by one. Just an idea.

I think also if every step you only mark the elements involve you will find easier a display solution, because you will focus on those boxes.

Using VSCode and separating blocks of grouping elements as I did it might help you as well. Check again your syntax because you got a typo at least in the first fieldset. Also in VSCode you can hit Ctrl + F in Windows and search for a word, as you can do into a web page. You could write inside the search box, for example: fieldset, or <fieldset, or </fieldset, and all your fieldsets will be highlighted, or just the started tags, or only the ended tags, respectivaly.

I found really helpful first think in the design and even drawn something by hand, placing the general boxes at least, and after start to code.

Let us know how is going, keep the good work and happy coding!! :smile: :muscle: