Survey Form - Build a Survey Form

HTML-CSS
1

i cant seem to align my labels with radio and checkbox.
can someone please enlighten me in where i have gone wrong?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Free CodeCamp Survey Form</title>
    <link rel="stylesheet" href="styles.css" />

    <h1 id="title">Free CodeCamp Survey Form</h1>

    <p id="description">Please fill out this short survey to help us improve the platform</p>

  </head>
  <body>

  <form id="survey-form">
   
   <fieldset>
     <label id="name-label">
       Name</label>
       <input required id="name"
        type="text" 
        placeholder="Name"/>
     

     <label id="email-label">Email</label>
       <input 
         required id="email"
         type="email" 
         placeholder="Enter your email"/> 

     <label id="number-label">Age</label>
       <input required id="number" 
         type="number" 
         min="13" 
         max="100"=" 
         placeholder="Age"/>
        
   </fieldset>

   <fieldset><legend>What option best describes your current role?</legend>
     <select id="dropdown">
       <option>Select your current role</option>
       <option>Employed Full Time</option>
       <option>Employed Part Time</option>
       <option>Self Employed</option>
       <option>Student</option>
       </select>
   </fieldset>

   <fieldset><legend>Would your recommend CodeCamp to a friend?</legend>
     
       <input name="definitely-maybe-no" 
         id="definitely" 
         type="radio" 
         value="1" 
         class="inline">
         <label>Definitely</label>

     
       <input name="definitely-maybe-no" 
         value="2" 
         id="maybe" 
         type="radio" 
         class="inline">
         <label>Maybe</label>

       <input name="definitely-maybe-no" 
         id="no" 
         type="radio" 
         value="3" 
         class="inline">
       <label>No</label>
    </fieldset>
     
   <fieldset><legend>What is your favourite CodeCamp feauture?</legend>
     <select id="dropdown">
       <option>Select an option</option>
       <option>Projects</option>
       <option>Challenges</option>
       <option>Community</option>
       <option>Open Source</option>
       </select>
   </fieldset>

     <fieldset><legend>What would you like to see improved?</legend>
     
     <legend>(check all that apply)</legend>
  
    
       <input 
         name="front-end" 
         id="Front-end" 
         type="checkbox" 
         value="1">
         <label>Front-end projects</label>

     
       <input 
         name="back-end" 
         value="a" 
         id="Back-end" 
         type="checkbox">
         <label>Back-end projects</label>

     
       <input 
         name="visualization" 
         id="visualization" 
         type="checkbox" 
         value="b">
         <label>Data Visualization</label>

       
       <input 
         name="challenges" 
         id="Chalenges" 
         type="checkbox" 
         value="c">
         <label>Challenges</label>

       
       <input 
         name="community" 
         id="community" 
         type="checkbox" 
         value="d">
         <label>Open source community</label>
     </fieldset>

   <fieldset>
     <label>Any comments or suggestions?</label>
     <textarea id="comment-suggestions" 
       name="comment-suggestion" 
       rows="3" 
       cols="30" 
       placeholder="Enter your comment here...">
       </textarea>
   </fieldset>

   <input id="submit" type="submit" value="Submit" />
   
  </form> 
  </body>
  <footer>
  </footer>
</html>      

body{
  background-position: center;
  background-size: cover;
  margin: 0;
  font-family: 'DM sans', sans serif;
  color: white;
  background-image: url("https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg");
}

form{
  width: 60%;
  background-color: rgb(0,0,100);
  margin:  auto;
  max-width: 500px;
  min-width: 300px;
  padding: 1em;
  margin-bottom:10;
  border-radius: 20px;
}

fieldset{
  border: 0;
 
}

h1,p{
  text-align: center;
}

input,textarea,select{
  background-color: white;
  width:100%;
  }

input[type="checkbox"] { 
  width: 10;
  display: block;
}

label{
  display:
}

input[type="submit"]{
     width: 100%;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hi @Antonio93 !
Your code passes all tests when I run it. Your CSS code should be in a style element if you have to write it in your HTML code. Even after I correct that, your code still passes.

1 Like
3

Hi Stephen,

thanks for looking at this. here is a print screen on what i see.

my radio arent situated next to the labels, and my checkbox’s are above each label instead of being aligned next to it on the same line?

Screenshot (32)
Screenshot (32)1920Ă—1080 126 KB

4

Ooh! Let me check that.

1 Like
6

Here is the correction code. By the way you also should go back and add a placeholder in textarea and notice the input elements need to be nested in the label elements not before the label elements. You should go back and make those corrections.

body{ background-position: center; background-size: cover; margin: 0; font-family: 'DM sans', sans serif; color: white; background-image: url("https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"); }

form{
width: 60%;
background-color: rgb(0,0,100);
margin: auto;
max-width: 500px;
min-width: 300px;
padding: 1em;
margin-bottom:10;
border-radius: 20px;
}

fieldset{
border: 0;

}

h1,p{
text-align: center;
}

input,textarea,select{
background-color: white;
width:100%;
}

input[type=“checkbox”], input[type=“radio”] {
display:inline-block;
width:2em;
}

.myalignedlabel {
display:block;
}

input[type=“submit”]{
width: 100%;
}


Free CodeCamp Survey Form

<h1 id="title">Free CodeCamp Survey Form</h1>

<p id="description">Please fill out this short survey to help us improve the platform</p>
Name 
 <label id="email-label">Email</label>
   <input 
     required id="email"
     type="email" 
     placeholder="Enter your email"/> 

 <label id="number-label">Age</label>
   <input required id="number" 
     type="number" 
     min="13" 
     max="100" 
     placeholder="Age"/>
What option best describes your current role? Would your recommend CodeCamp to a friend? Definitely 
     <label class="myalignedlabel"><input name="definitely-maybe-no" 
     value="2" id="maybe" type="radio" class="inline">Maybe</label>
<label class="alignedlabel"><input name="definitely-maybe-no" id="no" type="radio" value="3"  class="inline">No</label>
</fieldset>
What is your favourite CodeCamp feauture? 
 <fieldset><legend>What would you like to see improved?</legend>
 
 <legend>(check all that apply)</legend>

 <label class="myalignedlabel"><input name="front-end" id="Front-end" type="checkbox" value="1">Front-end projects</label>

 
 <label class="myalignedlabel"><input 
     name="back-end" value="a"  id="Back-end" type="checkbox">Back-end projects</label>
 
     <label class="myalignedlabel"><input name="visualization" id="visualization" type="checkbox" value="b">Data Visualization</label>

   
     <label class="myalignedlabel"><input name="challenges" id="Chalenges"  type="checkbox" value="c">Challenges</label>

   
     <label class="myalignedlabel"><input name="community" id="community" type="checkbox" value="d">Open source community</label>
 </fieldset>
Any comments or suggestions?
1 Like
7

Hi Ava,

Thank you soo much. Just a question?

I had previously tried label{display:block;} but this didn’t work. is this because it was actioning this on all labels as opposed to just the ones I wanted aligned. hence why you added the class “myalignedlabel”?

2 Likes
8

Yes, that is why I added the class. Without specifying which “label” elements you wish to target, it will affect all label elements. You can also do then add an id to your input element. Then you could select it as: label[for=“input’s id”] {}. So in this case you could do: Definitely Then the CSS: label[for=“myalignedlabel”] {display:block;}
As I said before the main thing is to make sure you nest your input elements in your label elements. Otherwise, when you try to style in CSS, it won’t work properly. That is why even when you applied it to all label elements it did not work. It’s like when you create a div and nest elements inside it. It will do no good if you do not nest the elements inside the div. That is what allows you to style the elements inside by targeting the div element. If you do not nest the elements inside the div and attempt to target them by using the div selector, it will consider the div and the elements as two separate entities instead of the elements being a part of the div. I’m glad I could help you out. Happy coding! Let me know if you have any more questions and if I know the answer, I can answer them.

1 Like
9

Thank you so much thats really helped! i appreciate it a lot

2 Likes
10

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