Survey Form - Build a Survey Form

Curriculum Help
1

Tell us what’s happening:

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
   <p2>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    </p2>
       <form method="post" action='https://survey-form.freecodecamp.rocks' id="survey-form">
            <fieldset>
        <label for="name" id="name-label">Name <input id="name" name="name" type="text" placeholder="Enter your name" required /></label>
        <label for="email" id="email-label">Email <input id="email" name="email" type="email" placeholder="Enter your email" required /></label>
        <label for="age "id="number-label"> Age (Optional) <input id="number" name="age" type="number" min="13" max="120" placeholder="Age" required /></label>
        <label for="role" id="name-label">Which option best describes your current role?: <input id="role" name="role" required /></label>
        <label for="role">Which option best describes your current role?
          <select id="dropdown" name="current-role">
            <option value="">(select one)</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">Others</option>
          </select>
        </label>
      </fieldset>
      <fieldset>
        <legend>Would you recommend freeCodeCamp to a friend?</legend>
        <label for="recommendation"><input id="definitely" type="radio" name="answer" class="inline" value="1" checked />Definitely</label>
        <label for="recommendation"><input id="maybe" type="radio" name="answer" class="inline" value="2" />Maybe</label>
        <label for="recommendation"><input id="not-sure" type="radio" name="answer" class="inline" value="3" />Not sure</label>
        </fieldset>
        <p3>
        <fieldset>
      <legend>What would you like to see improved? <font size="2">(Check all that apply)</font></legend>
                <label for="terms-and-conditions">
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="1" />Front-end Projects</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="2" />Back-end Projects</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="3" />Data Visualization</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="4" />Challenges</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="5" />Open Source Community</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="6" />Gitter help rooms</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="7" />Videos</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="8" />City Meetups</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="9" />Wiki</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="10" />Forum</a>
        <input class="inline" id="improvements" type="checkbox" required name="projects-events" value="11" />Additional Courses</a>
        </fieldset>
        </p3>
        <fieldset>
        <label for="bio">Any comments or suggestions?
          <textarea id="bio" name="bio" rows="5" cols="30" placeholder="Enter your comment here..."></textarea>
        </label>          
        </fieldset>
      </label>
      <input type="submit" id="submit" value="Submit" />
    </form>
  </body>
</html>

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.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

How do I align my checkboxes so they can stack to the left on top of each other?
Checkbox problem

3

use the label element you have learned of. Don’t put a closing </a> tag after the checkbox option, as it doesn’t make sense

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

Thank you, I’ve removed all the irrelevant tags. I tried aligning to left in css using text-align giving the checkbox section tag but to no avail

5

you can replace the uncessary </a> tag with <br> after each input to jump to the next line , and it will solve your problem. or have the inputs inside div, or inside a label tag and with css set the proprety display to block.

6

Thank you so much! This is a great learning experience here