Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

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.

<!DOCTYPE html>
<html>
  <head>
    <title>survey-form.freecodecamp.rocks </title>
    <meta charset='utf-8'>
    <link rel='stylesheet' href='styles.css'
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class='container'>
      <header class='header'><h1 id='title'>freeCodeCamp Survey Form</h1>
      <p id='description'>
          Thank you for taking the time to help us improve the platform
        </p>
        </header>
        <form id='survey-form'>
          <div class='form-group'>
            <label class='label'id='name-label' for='name'>Name</label>
            <input type='text' name='name' id='name' class='form-control' placeholder='Enter your name' required>
          </div>
          <div class='form-group'><label class='label'id='email-label' for='email'>Email</label>
            <input type='email' id='email' class='form-control' placeholder='Enter your Email' required></div>
          <div class='form-group'><label class='label' id='number' for='number'>Age (optional)</label>
            <input id="number" type="number" min="10" max="99" class="form-control" placeholder="Age"></div>
          <div class='form-group'>
            <p class='para'>Which option best describes your current role?</p>
            <select id='dropdown' name='role' class='form-control' required> 
              <option value=''>Select current role</option>
              <option value='student'>Student</option>
              <option value='job'>Full Time Job</option>
              <option value='learner'>Full Time Learner</option>
              <option value='preferno'>Prefer not to say</option>
              <option value='other'>Other</option>

            </select>
            </div>
          <div class='form-group'>
            <p class='para'>Would you recommend freeCodeCamp to a friend?</p>
            <label class='label'><input name='def' value='definitely' class='input-radio' type='radio' checked>Definitely</label>
            <label class='label'><input name='myb'value='maybe' class='input-radio' type='radio'>Maybe</label>
            <label class='label'><input name='btsre' value='not-sure' class='input-radio' type='radio'>Not sure</label>
          </div>
          <div class='form-group'><p class='para'>What is your favorite feature of freeCodeCamp?</p>
            <select class='form-control' required>
              <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>
          </div>
          <div class='form-group'><p class='para'>What would you like to see improved?<span style="margin:0; margin-left:4px"> (check all that apply)</span></p>
           <label class='label'><input type='checkbox' class='input-checkbox' value='front-end-projects'>Front-end Projects</label>
           <label class='label'><input type='checkbox' class='input-checkbox' value='back-end-projects'>Back-end Projects</label>
           <label class='label'><input type='checkbox' class='input-checkbox' value='data-visualization'>Data Visualization</label>
           <label class='label'><input type='checkbox' class='input-checkbox' value='challenges'>Challenges</label>
           <label class='label'><input type='checkbox' class='input-checkbox' value='open-source-community'>Open Source Community</label>
           <label class='label'><input type='checkbox' class='input-checkbox' value='gitter-help-rooms'>Gitter help rooms</label>
           <label class='label'><input type='checkbox' class='input-checkbox' value='videos'>Videos</label>
           <label class='label'><input type='checkbox' class='input-checkbox' value='city-meetups'>City Meetups</label>
           <label class='label'><input type='checkbox' class='input-checkbox' value='wiki' '>Wiki</label>
           <label class='label'><input type='checkbox' class='input-checkbox' value='forum'>Forum</label>
           <label class='label'><input type='checkbox' value='additional courses' class='input-checkbox'>Additional Courses</label>
          </div>
          <div class='form-group'>
            <p class='para'>Any comments or suggestions?</p>
            <textarea class="input-textarea" name="comment" placeholder="Enter your comment here..."></textarea>

          </div>
          <div class='form-group'><button type="submit" id="submit" class="submit-button">
            Submit
          </button></div>
        </form>
    </div>
    
  </body>
</html>

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 Edg/114.0.1823.79

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Hi!

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

  • id='number' should be on the input element. The id requirement for the associated label is number-label. Also, the for attribute on the label won’t work without the proper id value on the input.

  • A group of radio button elements are created by giving them all the same name attribute value.

  • Defining a radio group

4

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