Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

All your checkboxes inside #survey-form should have a value attribute and value.

Your code so far

Survey Form

freeCodeCamp Survey Form

Thank you for taking the time to help us improve the platform

<fieldset>
  <label for="name" id="name-label">Name <input id="name" required type="text"placeholder="Enter your name"></label>
  <label for="email" id="email-label">Email<input id="email" required type="email" placeholder="Enter your Email"></label>
  <label for="age" id="number-label">Age(optional)<input id="number" required type="number" max=120 min=11 placeholder="Age"></label>



  <label id="role" for="dropdown">Which option best describes your current role?
<select id="dropdown" name="role">
  <option>Select current role</option>
  <option name="full-time-job">Full Time Job</option>
  <option name="other">Other</option>
  </select>
  </label>



  <label id="recommend">Would you recommend freeCodeCamp to a friend?
  <label><input type="radio" value="definitely" name="recommend" checked>Definitely </label>
  <label><input type="radio" value="Maybe" name="recommend">Maybe</label>
  <label><input type="radio" value="recommend" name="not-sure">Not Sure </label>
  <label><input type="radio" value="Maybe" name="not-sure">Other </label>
  </label>



   <label id="role">What is your favorite feature of freeCodeCamp?
<select id="role">
  <option value="">Select an option</option>
  <option value="1">challanges</option>
  <option value="2">Project</option>
  <option value="3">Community</option>
  </select>
  </label>


  <label id="likes">What would you like to see improved? (Check all that apply)
  <label for=""><input type="checkbox">Front-end Projects </label>
  <label for=""><input type="checkbox" name="value" value="challanges">Back-end Projects</label>
  <label for=""><input type="checkbox" name="value" value="challanges">Challenges</label>
  <label for=""><input type="checkbox" name="value" value="challanges">Open Source Community</label>
  </label>
  



<label id="suggestions">Any comments or suggestions?
<textarea placeholder="Enter your comment here..." id="comment" name="comment"></textarea>
</label>



<button type="submit" id="submit">Submit</button>
</fieldset>
</form>
</body>

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>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 method="post" action="" id="survey-form">


    <fieldset>
      <label for="name" id="name-label">Name <input id="name" required type="text"placeholder="Enter your name"></label>
      <label for="email" id="email-label">Email<input id="email" required type="email" placeholder="Enter your Email"></label>
      <label for="age" id="number-label">Age(optional)<input id="number" required type="number" max=120 min=11 placeholder="Age"></label>
    
    
    
      <label id="role" for="dropdown">Which option best describes your current role?
    <select id="dropdown" name="role">
      <option>Select current role</option>
      <option name="full-time-job">Full Time Job</option>
      <option name="other">Other</option>
      </select>
      </label>
    
    
    
      <label id="recommend">Would you recommend freeCodeCamp to a friend?
      <label><input type="radio" value="definitely" name="recommend" checked>Definitely </label>
      <label><input type="radio" value="Maybe" name="recommend">Maybe</label>
      <label><input type="radio" value="recommend" name="not-sure">Not Sure </label>
      <label><input type="radio" value="Maybe" name="not-sure">Other </label>
      </label>



       <label id="role">What is your favorite feature of freeCodeCamp?
    <select id="role">
      <option value="">Select an option</option>
      <option value="1">challanges</option>
      <option value="2">Project</option>
      <option value="3">Community</option>
      </select>
      </label>


      <label id="likes">What would you like to see improved? (Check all that apply)
      <label for=""><input type="checkbox">Front-end Projects </label>
      <label for=""><input type="checkbox" name="value" value="challanges">Back-end Projects</label>
      <label for=""><input type="checkbox" name="value" value="challanges">Challenges</label>
      <label for=""><input type="checkbox" name="value" value="challanges">Open Source Community</label>
      </label>
      



    <label id="suggestions">Any comments or suggestions?
    <textarea placeholder="Enter your comment here..." id="comment" name="comment"></textarea>
    </label>



    <button type="submit" id="submit">Submit</button>
    </fieldset>
    </form>
    </body>
  </html>


/* file: styles.css */
fieldset{
  display: block;
}
input, fieldset, select,textarea,submit{
  width: 100%;
}

form{
  max-width: 480px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

this one doesn’t have a name or value attributes

also you may want to use a legend element for the question, it makes more sense than a label element

1 Like
3

value =“front-end-projects”

4

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