Survey Form - Few Problems

HTML-CSS
1

Hi there, this is my first challenge and I’m brand new to this. You can see my approach. I really tried without any kind of tutorial just with googling about html and css and everything I’ve learnt so far through code camp. Still there’re some things unclear to me and maybe you can clarify, what I’ve done wrong and what should be improved:

  1. I don’t get, why my options and checkboxes are pushed to the very left. How can I adress them to be vertically inline with the rest?
  2. In my HTML code you can see me using breaks. I bet there is a more classy CSS version to solve this problem. The elements shouldn’t be inline. Could you help me out?
  3. How can I make the submit button smaller?
  4. Lastly: I’d like to exchange the background-color with a background image, but it doesn’t work if I use background-image and delete the background-color. What else can I do?

Thanks so much,

Yue

<!doctype! html>
<html>

  <head>
    <title>FreeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="/Users/paulawunsche/Desktop/Webdevelopment/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" action="/action_page.php">

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

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

        <fieldset>
          <label id="age-label">Age (optional)</label>
          <input id="age" type="number" min="13" max="120" placeholder="Age"/>
        </fieldset>

        <fieldset>
          <label for="role">Which option best describes your current role?
            <br>
          <select name="dropdown" id="role">
            <option value="">Select current role</option>
            <option value="student">Student</option>
            <option value="fulltimejob">Full Time Job</option>
            <option value="fulltimelearner">Full Time Learner</option>
            <option value="nottosay">Prefer not to say</option>
            <option value="other">Other</option>
          </select>
        </fieldset>

      <fieldset>
        <legend>Would you recommend Free Code Camp to a friend?</legend>

        <div>
          <input type="radio" name="recommend">
          <label for="recommend" class="improve">Definetely</label>
        </div>

        <div>
          <input type="radio" name="recommend">
          <label for="recommend">Maybe</label>
        </div>

        <div>
          <input type="radio" name="recommend" class="improve">
          <label for="recommend">Absolutely not</label>
        </div>
      </fieldset>

      <fieldset>
        <label for="favfeature">What is your favorite feature on free code camp?
          <br>
        <select name="dropdown" id="favfeature">
          <option value="">Select an option</option>
          <option value="challenges">Challenges</option>
          <option value="projects">Projects</option>
          <option value="community">Community</option>
          <option value="opensource">Open Source</option>
        </select>
      </fieldset>

      <fieldset>
        <legend>What would you like to see improved?</legend>

        <div>
          <input type="checkbox" id="FrontEnd" name="FrontEnd"
                class="improve" >
          <label for="FrontEnd" class="improve">Front End Projects</label>
        </div>

        <div>
          <input type="checkbox" id="BackEnd" name="BackEnd"
                class="improve">
          <label for="BackEnd">Back End Projects</label>
        </div>

        <div>
          <input type="checkbox" id="DataVisualization" name="DataVisualization" class="improve">
          <label for="DataVisualization" class="improve">Data Visualization</label>
        </div>
      </fieldset>

        <fieldset>
          <label id="comments" class="improve">Any Comments or Suggestions?</label>
          <br>
          <textarea name="comments" rows="3" cols="30" placeholder="Enter your comment here..." class="improve"></textarea>
        </fieldset>

        <fieldset>
        <label id="submit"><input id="Submit" type="submit" /></label>
      </fieldset>

      </form>
  </body>

</html>

h1 {
  min-width: 300px;
  max-width: 600px;
  color: white;
  margin: auto;
  padding-bottom: 0.5em;
  text-align: center;
}

p {
  min-width: 300px;
  max-width: 600px;
  color: white;
  margin: auto;
  padding-bottom: 2em;
  text-align: center;
  font-style: italic;
}

body {
  background-color: #827397;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}

form {
  background-color: #363062;
  min-width: 300px;
  max-width: 600px;
  width: auto;
  color: white;
  margin-left: auto;
  margin-right: auto;
}

fieldset, legend {
  padding: 30px;
  border: 5px #827397;
  width: auto;

}

input, select, textarea {
  width: 100%;
}


type or paste code here
2

Hi there.
Though I am not really sure about this.

What I know is that, about the submit button.

To optimize the size, I think you should use the I’d of submit to regulate the size.

When I did mine, what I did was write a description before the input tag to describe what the input is for.

For example, you can put something like Email before the input tag for email.

Also you can make sure of. &nbsp to regulate the space.

Each &nbsp implies one Xtra space.
This is what I can say.

I don’t know if it has sheloed you in any way.
BYE

3

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