Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I’ve been writing and re-writing this code for so long that I don’t even know what I’m doing anymore. It passes when in my opinion it shoukdn’t. It looks all wrong and I think some of the code is probably in the wrong place. Could someone take a look at this and point me in the right direction please?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
<title>freeCodeCamp Survey Form</title>
<link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <h1 id="title">
freeCodeCamp Survey Form
      </h1>
      <p id="description">
        Please fill out the required information.
      </p>
      <form id="survey-form">
        <fieldset>
          <label for="name" id="name-label">Enter your name: <input id="name" 
type="text" placeholder="Enter your name" required/></input></label>
          <label for="email" id="email-label">Enter your email:  <input id="email" type="email" placeholder="Enter your email" required/></input></label>
          <label for"age" id="number-label">Age (optional) <input id="number" type="number" placeholder="Age" min="13" max="102"></input></label>
          <input type="radio" value="value" name="value"> Definitely</input>
          <input type="radio" value="value" name="value"> Maybe</input>
          <input type="radio" value="value" name="value"> Not sure</input>
          <p>Which option best describes your current Role?</p>
          <select id="dropdown">
            <option value="Select Current Role">Select Current Role</options>
          <option value="Student">Student</options>
          <option value="Full Time Job">Full Time Job</options>
          <option value="Full Time Learner">Full Time Learner</options>
          <option value="Prefer not to say">Prefer not to say</options>
          <option value="Other">Other</options>
          <input id="select"</input>
</select>
          <input type="checkbox" value="value">  Definitely</input>
         <input type="checkbox" value="value"> Maybe</input> 
         <input type="checkbox" value="value"> Not sure</input> 

         <p>What is your favorite feature of freeCodeCamp?</p><select id="dropdown">
      <option value="Select an option">Select an option</options>  
      <option value="Challenges">Challenges</options>   
      <option value="Projects">Projects</options>   
      <option value="Community">Community</options>   
      <option value="Open Source">Open Source</options>      
         <textarea></textarea>
         <input type="submit" id="submit">
        </fieldset>
        </form>
      </body>
  </html>

/* file: styles.css */
body{background-color: #1b1b32;
color: #f5f6f7;
font-family: tahoma;text-align: center;}
label{diplay: block; margin: 0.5rem 0;}
h1, p{text-align: center;
margin: 1em auto;}
option{text-align: center;}


**Challenge:** Survey Form - Build a Survey Form

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form
2

Hello.

How you want to see it? Tell us what is the problem.

For now, cheek your style for the label (diSplay)

Grets.

3

It passed the code check but it just looks horrible for one and I’m not sure the code is right the way I did it. Thanks for that though I would’ve missed it

4

Hello.

The code is functional. Maybe you need add more styles to make it look pretty.

What you want to change? If you say what you want to do, together we can help you.

Grets.

5

Thanks for checking the code! The drag down boxes, text boxes and the boxes to click on are too close together. I’d like for it to look neat and below one each other with some distance so I can take a good look at everything and see if everything is functioning properly. Should I change the code to several fieldsets?

6

Try this in your styles.css

fieldset {
    display: flex;
    flex-direction: column;
    align-items: center;
}
label, input, select, textarea {
   margin-bottom: 5px
}

It’s a begining! :smiley: :wink:

Grets.

7

Thanks so much for your help! I’ll try it

8

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