Problem with my checkbox and radio buttons on survey form

HTML-CSS
1

Hi
I don’t understand why my checkboxes and radio buttons are not BEFORE their label on the web form and I don’t understand why I can’t align them.
Basically it doesn’t look like the exemple.

Thank you !

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<head>
 <title>Survey Form</title>
 <Link rel='stylesheet' href='styles.css'>
</head>
<body>
 <h1 id='title'>freeCodeCamp Survey Form</h1>
 <p id='description'>Thank you for taking the time to help us improve the platform</p>
<form id='survey-form'> 
 <fieldset>
   <label id='name-label'> Name <input id='name' type='text' placeholder='Enter your name' required/></label>
   <label id='email-label'> Email <input id='email' type='email' placeholder='Enter your email' required/></label>
   <label id='number-label'> Age <input id='number' type='number' min="13" max="120" placeholder='Enter your age' required/></label>
 </fieldset>

 <fieldset>
   <label> Which option best describes your current role? <select id='dropdown'> 
       <option> Select current role </option>
       <option> Student </option>
     </select> 
   </label> 
 </fieldset>
 <fieldset>
  Would you recommend freeCodeCamp to a friend?
 <label>
   <input type='radio' name='recommend' value='0' class='input-radio'/> Definitely </label>
     <input type='radio' name='recommend' class='inline' value='4'/> Maybe </label>
    <input type='radio' name='recommend' class='inline' value='5'/> Not sure </label>
  </label> 
  </fieldset>
  <fieldset>

  <label>  What would you like to see improved? (Check all that apply) </label>
<label><input type='checkbox' value='1' name='improve'> front end </input></label>
<label><input type='checkbox' value='2' name='improve'> backend </input></label>
<label><input type='checkbox' value='3' name='improve'> fullstack </input></label>



    </fieldset>
<label>
 Any comments or suggestions?
 <textarea placeholder="Enter your comment here"></textarea>
</label>
<input type='submit' class="submit" id="submit"></input>

</form>
</body>

/* file: styles.css */
body{
 background-image: url(https://cdn.pixabay.com/photo/2015/01/08/18/11/laptops-593296_1280.jpg);
}

h1{
text-align: center;
color: white;
}

p{
text-align: center;
color: white
}

form{
background-color: rgba(30,23,76, 0.9);
color: white;
width: 60vw;
margin: auto;
padding-right: 2rem;
padding-left: 2rem;
padding-bottom: 2rem;
padding-top: 1rem;
max-width: 500px;
min-width: 300px;
}

fieldset{
 padding:  0;
 border: none;
 margin: 15 2; 
}

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

input, textarea, select {
width: 100%;
margin: 6px 0;
}
.submit{
background-color: 12A24A;
color : white;
height: 35px;
}

textarea{
 height: 70px; 
}

.input-radio,
.input-checkbox {
 display: inline-block;
 margin-right: 0.625rem;

}


   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 Safari/537.36 OPR/85.0.4341.75

Challenge: Build a Survey Form

Link to the challenge:

2

you wrapped all inputs in one label and after each input u added an extra closing tag for label. try making 3 labels and inside each label an input then the text like this:

<label> <input type="radio"> Yes </label>

…

Why you made a closing tag for your input elements here?
its a self-closing element which is written like this:
<input />
but label isnt self closing so we add closing tag like this:
<label> </label>

remove the closing tag and make ur input a self-closing element
<label><input type='checkbox' value='1' name='improve' /> front end </label>

3

It’s not changing anything :frowning:

4

just checked your css

all the inputs with type radio and checkbox u need to unset their width. since u made the width 100%

since they have 100% width they will be pushed to the next line.
now make only the inputs required to have unset width
you can do that by creating inline class

.inline{
  width: unset;
}

and then add this class to the inputs type radio and checkbox or u can target them this way

input[type="radio"]{
  width: unset;
}

that will target all ur inputs that has type=“radio” in them

5

amazing, you’re a life saver
thank you

1 Like
6

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