Survey Form - Build a Survey Form

Snarfy · December 28, 2022, 2:16pm

Tell us what’s happening:
Describe your issue in detail here.
Hi all, Ok, so i’ve done a lot of googling and research but haven’t been able to fix my problems. I’ve finished my code but haven’t been able to style it. You can see a couple of my example tries using both #id and .class which i defined in my

element that i gave to each section. How come my styling is not working? i’m trying not to copy some sample codes i found online that show the styling on the html doc and not in CSS. Can someone provide some guidance and also a critique of my code? at this point im not really looking to be certified, more i just want to learn and understand. From my reading it seems divs are a great way to style sections when you give eacha a class but is that good practice. Anyhow, i would love any and all feed back.
thanks
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> B. Onda Surf Survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>  
  <body>
    <h1 id="title"> FreeCodeCamp Survey</h1>
    <p id="description"> Thanks for taking the time to help us improve!</p> 
  <form id="survey-form">
    <div class="details">
      <label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
      </label>
      <label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
      </label>
      <label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
      </label>
      <label for="current-role" id="current-role-label">Which option best describes your current role?<br>
        <select id="dropdown" name="dropdown">
          <option value="current-role">(Select Current Role)</option>
          <option value="student">Student</option>
          <option value="full-time-job">Full Time Job</option>
          <option value="full-time-learner">Full Time Learner</option>
          <option value="prefer-not-to-say">Prefer Not to Say</option>
          <option value="other">Other</option>
        </select>
      </label>
    </div>  
    <div class="recommend">  
      <label>Would you Recommend FCC.com to a friend?</label> 
      <label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
      <label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
      <label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
    </div>
    <div class="features">
      <label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
        <select id="dropdown" name="dropdown">
          <option value="favorite-feature">(Select Favorite Feature)
          </option>
          <option value="challenges">Challenges</options>
          <option value="projects">Projects</options>
          <option value="community">Community</options>
          <option value="open-source">Open Source</option>
        </select>
    </div>     
    <div class="improvements">
      <label>What would you like to see improved? (check all that apply)</label>
      <label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
      <label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
      <label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
    </div>  
    <div class="comment">
      <label for="comments">Any Comments or Suggestions?</label><textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
    </div>  
    <button type="submit" id="submit"> Submit</button>
  </form> 
  </body>
</html>

/* file: styles.css */
.comment {
  display: block;
}

#submit{
  text-align: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

ibrahim_aq · December 28, 2022, 2:30pm

Your setup is correct. Your html doc and stylesheet is correct. However the styling properties you’re using will not visibly show but they are there. If you write:

.comment {
 color: green;
}

you will see the color being applied.

The same goes for the button. If you change the colours you will see the change. If you increase the width of the button to, for example, 200px then add text-align: start you will see the change.

As a tip, to check if everything is working change the colours or add a border/outline.

Snarfy · December 28, 2022, 2:55pm

Thanks for the quick response! Ok, so i did add the color and it worked:) also, an outline to my title and that showed up. I’ll probably have to go back over my CSS a bit to get things looking better. Is there a reason i don’t see the display: block show up? If i’m correct inline is the default and block needs to be styled? Also, as far as divs go, is the way i have them in my code OK practice?

thanks a lot for the guidance. much appreciated.

ibrahim_aq · December 28, 2022, 3:13pm

A button is an inline block, you’re right. However the the div just before it is a block level element so the div takes up the entire line. However if you put the button inside the div the button will sit as it is expected - inline. It’s better if you see this visually.
So go ahead and put a button inside a div and then a button outside a div and you’ll see the difference.

Extra step: when the button is inside the div give the button the property display: block and see what happens.

The structure is fine. I can see you’re using the correct html tags. Don’t forget, divs are meaningless, they’re simply for styling purposes and grouping elements etc… any meaningful text should go inside the correct tag for accessibility and SEO reasons.

Hope this helps

Snarfy · December 29, 2022, 10:58am

Good morning Ibrahim,
Thanks for the help, truly. So, i tried your recommendation putting the button “submit” inside and outside of divs with the display:block and unfortunately i didn’t see any differnance It actually seems like the .class i define in my divs dont seem to have any effect but if i style each input individually then it works. I thought if i surrounded a group of labels in a div and gave that a .class it would style all the labels there within. This is my CSS so far

#name, #email, #number {
  display: block;
  display: span;
  
}

.comment {
  display: block;
  color: green;
  padding: 2px;
  text-align: center;
}

#submit{
  text-align: center;
  width: 200px;
}

.details{
  display: start;
}

#title{
  outline: solid;
  color: blue;
  text-align: center;
}

#description{
  text-align: center;
}

#challenges {
  display: block;
}

.features {
  display:block;
}

#dropdown{
  display: block;
}

Also, if i erase all this and just put:

label, input {
display: block;
}

it seems do the same or more or less the same as all the other code above.
Actually, it has the effect i am looking for on most of the form except that it puts both my radio and checkbox labels with their inputs above the labels instead of inline. Although it does give them their own line instead of being all on the same line(if that makes any sense:/

Once again, i really appreciate the help. I know i have a ton to learn! Being able to ask specific questions is invaluable for me.

ibrahim_aq · December 31, 2022, 8:11pm

Apologies if I was unclear in the reply. I think I miscommunicated the block vs inline concept. I made a CodePen example to demonstrate this: https://codepen.io/ibra-wiz/pen/KKBMKyO

Regarding applying styles to a wrapping divs you need to understand that not all css properties get passed down to its children e.g. on a div if you add padding: 10px the property will only be applied to the div NOT to every child inside the div.
However if you have this setup:

<div>
  <p>Some text</p>
</div>

and add color: red to the div then the <p> will inherit the color from the div.

I think you may need to revise some CSS rules. Keep practising. Also the more you progress and build things the more you’ll understand how things work. Keep going!

Snarfy · January 1, 2023, 1:29pm

hey Ibrahim,
Wow. thanks for getting back and taking the time to make the example page. it actually helped clear some things up. Yeah, im sure things will get more clear the further along i get. Ill keep plugging away! Thanks again for your help and hope you have a great start to the new year.
nico

system · July 3, 2023, 1:29am

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