index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="survey.css">
  <title>Survey Form</title>
</head>
<body>
  <div id="main">
    <h1 class="center" id="title">freeCodeCamp Survey Form</h1>
    <p class="center italic" id="description">Thank you for taking the time to help us improve the platform</p>
      <div id="formbox">
    <form id="survey-form">
      <label id="name-label" for="name">Name</label>
      <input id="name" type="text" name="name" placeholder="Enter your name" required />
      <label id="email-label" for="email">Email</label>
      <input id="email" type="email" name="email" placeholder="Enter your Email" required />
      <label id="number-label" for="age">Age<span>(Optional)</span></label>
      <input id="number" type="number" name="age" placeholder="Age" min="100" max="150"/>
             <p>Which option best describes your current role?</p>
      <select id="dropdown" name="role" required>
        <option disable selected value>Select current role</option>
        <option value="student">Student</option>
        <option value="job">Full Time Job</option>
        <option value="lerner">Full Time Learner</option>
        <option value="no prefer">Prefer not to say</option>
        <option value="other">Other</option>
      </select>
      <p>Would you recommend freeCodeCamp to a friend?</p>
      <label>
        <input name="recomended"
               value="definitely"
               type="radio"
               checked
               </input>Definitely
      </label>
      <label>
        <input name="recomended"
               value="maybe"
               type="radio"
               </input>Maybe
      </label>
      <label>
        <input name="recomended"
               value="not-sure"
               type="radio"
               </input>Not sure
      </label>
      <p>What is your favorite feature of freeCodeCamp?</p>
      <select id="most-like" name="mostlike" required>
        <option disable selected 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>
      <p>What would you like to see improved?<span> (Check all that apply)</span></p>
      <label><input
                    name="prefer"
                    value="front"
                    type="checkbox" />Front-end Projects
      </label>
      <label><input
                    name="prefer"
                    value="back"
                    type="checkbox" />Back-end Projects
      </label>
       <label><input
                     name="prefer"
                     value="data"
                     type="checkbox" />Data Visualization
      </label>
      <label><input 
                    name="prefer"
                    value="challenges"
                    type="checkbox" />Challenges
      </label>
      <label><input
                    name="prefer"
                    value="open-source"
                    type="checkbox" />Open Source Community
      </label>
        <label><input
                    name="prefer"
                    value="gitter"
                    type="checkbox" />Gitter help rooms
      </label>
      <label><input
                    name="prefer"
                    value="videos"
                    type="checkbox" />Videos
      </label>
      <label><input
                    name="prefer"
                    value="meetup"
                    type="checkbox" />City Meetups
      </label>
      <label><input
                    name="prefer"
                    value="wiki"
                    type="checkbox" />Wiki
      </label>
      <label><input
                    name="prefer"
                    value="forum"
                    type="checkbox" />Forum
      </label>
      <label><input
                    name="prefer"
                    value="gitter"
                    type="checkbox" />Additional Cources
      </label>
      <p>Any comments or suggestions?</p>
      <textarea id="textarea"
                name="comment"
                placeholder="Enter your comment here..."></textarea>
      <button type="submit" id=submit>Submit</button>
    </form>
      </div>
    </div>
</body>
</html>