Survey form project

HTML-CSS
1

I did my survey form project but my css code wasn’t saved. Now, when I try to edit it, it doesn’t change the style of the form. What can I do?

2

Welcome to our community!

Post the entire html and css code here properly formatted. Use the </> button for that purpose. Also, post a link to the challenge.

3 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>SurveyForm</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">
      <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 (optional) <input id="number" type="number" placeholder="Age" min="13" max="120"/></label>
      <label for="dropdown"> Which option best describes your current role?
        <select id="dropdown" name="current-role">
          <option value="">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>
      <label for="recommendation">Would you recommend freeCodeCamp to a friend?
          <input type="radio" name="recommendation" value="definetly"/> Definetly
          <input type="radio" name="recommendation" value="maybe"/> Maybe
          <input type="radio" name="recommendation" value="not-sure"/> Not sure 
      </label>
      <label for="option"> Whats your favorite feature of freeCodeCamp
        <select id="option" name="select-option">
          <option value="">Select an option</option>
          <option value="challenges">Challenges</option>
          <option value="projects">Projects</option>
          <option value="community">Community</option>
          <option value="open-source">Open source</option>
        </select>
      </label>
      <label for="checkbox"> Would you like to see improved? (Check all that apply)
          <input name="checkbox" type="checkbox" value="checkbox1"/> Front-end projects
          <input name="checkbox" type="checkbox" value="checkbox2"/> Back-end projects
          <input name="checkbox" type="checkbox" value="checkbox3"/> Data visualization
          <input name="checkbox" type="checkbox" value="checkbox4"/> Challenges
          <input name="checkbox" type="checkbox" value="checkbox5"/> Open Source Community
          <input name="checkbox" type="checkbox" value="checkbox6"/> Gitter help rooms
          <input name="checkbox" type="checkbox" value="checkbox7"/> Videos
          <input name="checkbox" type="checkbox" value="checkbox8"/> City Meetups
          <input name="checkbox" type="checkbox" value="checkbox9"/> Wiki
          <input name="checkbox" type="checkbox" value="checkbox10"/> Forum
          <input name="checkbox" type="checkbox" value="checkbox11"/> Additional Courses
      </label>
      <label> Any comments or sugestions? <textarea>Enter your comment here...</textarea></label>
      <button id="submit"> Submit </button>
    </form>
  </body>
</html>


body {
 background-color: #0072c6;
 font-family: monospace, serif;
 font-size: 18px;    
}

h1 {
    text-align: center;
}

p {
    text-align: center;
    font-style: italic;
}

form {
    background-color: #fff;
    margin: auto;
    max-width: 600px;
    text-align: justify;
    padding: 50px;
}


input[type=text], input[type=email] {
    width: 100%;
    height: 30px;
    margin: 10px 0 20px 0;
}

input[type=number] {
    display: block;
    width: 100%;
    height: 30px;
    margin: 10px 0 20px 0;
}

input[type=radio], input[type=checkbox] {
    display: block;
    margin: 0;
}

select {
    display: block;
    width: 100%;
    height: 30px;
    margin: 10px 0 20px 0;
}

textarea {
    display: block;
    width: 100%;
    height: 100px;
    margin: 10px 0 20px 0;
}

button {
    width: 100%;
    height: 40px;
}

* {
    box-sizing: border-box;
}

i figure out what the problem was, but now i have another one.
i want to place my radio and checkbox buttons one below the other but with their respective labels in front of them. but i’m not able to do it. any tips?
btw, i haven’t finish styling yet.

4

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