Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening: Hello, I know that my code passes, however, I’m pulling my hair out on a question of aesthetics: how to align the radio and checkbox inputs with the text? Can you help me with this? I looked for answers on the internet… but I must confess I didn’t understand them… Thank you and have a nice day.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>freeCodeCamp Survey Form</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" action="https://survey-form.freecodecamp.rocks" method="post">
      <label for="name" id="name-label">Name <input type="text" id="name" name="name" required placeholder="Enter your name" /></label>
      <label for="email" id="email-label">Email <input id="email" type="email" name="email" required placeholder="Enter your Email"></label>
      <label for="number" id="number-label">Age (optional) <input id="number" type="number" min="10" max="99" name="age" placeholder="Age" /></label>
      <label for="dropdown">Which option best describes your current role?
        <select id="dropdown" name="dropdown">
          <option value="">Select current role</option>
          <option value="1">Student</option>
          <option value="2">Full Time Job</option>
          <option value="3">Full Time Learner</option>
          <option value="4">Prefer not to say</option>
          <option value="5">Other</option>
        </select>
      </label>
      <label for="recommend">Would you recommend freeCodeCamp to a friend?
  <input name="recommend" id="definitely" value="definitely" type="radio" class="inline" checked/> Definitely</label>
        <input name="recommend"  id="maybe" value="maybe" type="radio" class="inline" /> Maybe
        <input name="recommend" id="not-sure" value="not-sure" type="radio" class="inline" /> Not sure
      </label>
      <label for="feature">What is your favorite feature of freeCodeCamp?
        <select id="feature" name="feature">
          <option value="">Select an option</option>
          <option value="1">Student</option>
          <option value="2">Challenges</option>
          <option value="3">Projects</option>
          <option value="4">Community</option>
          <option value="5">Open Source</option>
        </select>
      </label>
      <label for="improved">What would you like to see improved? (Check all that apply)
        <input id="front-end" type="checkbox" name="improved" value="front-end" /> Front-end Projects
        <input id="back-end" type="checkbox" name="improved" value="back-end" /> Back-end Projects
        <input id="data" type="checkbox" name="improved" value="data" /> Data Visualization
        <input id="challenges" type="checkbox" name="improved" value="challenges" /> Challenges
        <input id="open-source" type="checkbox" name="improved" value="open-source" /> Open Source Community
        <input id="gitter" type="checkbox" name="improved" value="gitter" /> Gitter help rooms
        <input id="videos" type="checkbox" name="improved" value="videos" /> Videos
        <input id="meetups" type="checkbox" name="improved" value="meetups" /> City Meetups
        <input id="wiki" type="checkbox" name="improved" value="wiki" /> Wiki
        <input id="forum" type="checkbox" name="improved" value="forum" /> Forum
        <input id="additional-courses" type="checkbox" name="improved" value="additional-courses" /> Additional Courses
      </label>
      <label for="comments">Any comments or suggestions?
        <textarea id="comments" name="comments" rows="3" cols="30" placeholder="Enter your comment here"></textarea>
      </label>
      <input type="submit" id="submit" value="Submit" />
    </form>
  </body>
</html>
/* css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-image: url(https://www.creativefabrica.com/wp-content/uploads/2022/01/14/green-background-Graphics-23448715-1.jpg);
  color: black;
  font-family: Tahoma;
  font-size: 16px;
}

h1 {
  margin: 2em auto 0 auto;
  text-align: center;
}

p {
  font-style: italic;
  text-align: center;  
  margin: 0 auto 30px auto
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  background-color: rgb(0, 204, 0);
  padding: 10px 20px;
}

label {
  display: block;
  margin: 1rem 0;
}  

input {
  display: block;
}

input,
textarea,
select {
  margin: 10px 0 10px 0;
  width: 100%;
  min-height: 3em;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="checkbox"] {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
  display: block;
  width: 80%;
  margin: 1em auto;
  height: 1em;
  font-size: 1.1rem;
  background-color: rgb(255, 165, 0);
  min-width: 300px;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

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