Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I think I did these two:
8. Your #name should require input.
38. Every radio button group should have at least 2 radio buttons.
But still can’t get the pass.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>freeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="style.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" id="survey-form"
action="">
<fieldset>
  <label for"name" id="name-label">Name
<input id="name" type="text" name="name" placeholder="Enter your name" reqiured/>
</lable>
<label for="email" id="email-label">Email
<input id="email" type="email" name="email" placeholder="Enter your Email" required/>
</label>
<label for="number" id="number-label">Age(optional)
<input id="number" type="number" name="number" placeholder="Age" min="16" max="30" required/>
</label>
<label for="role">Which option best describes your current role?
  <select id="dropdown" name="role">
    <option value="">Select current role</option>
    <option value="1">Student</option>
    <option value="2">Full Time Jop</option>
    <option value="3">Full Time Learner</option>
    <option value="4">Prefer not to say</option>
    <option value="5">Other</option>
    </select>
    </label>
</fieldset>
<fieldset>
<legend>Would you recommend freeCodeCamp to afriend?</legend>
<label for="definitely"> <input id="definitely" type="radio" value="definitely" name="definitely" class="inline" checked/>Definitely</label>
<label for="maybe"> <input id="maybe" type="radio" value="maybe" name="maybe" class="inline"/>Maybe</label>
<label for="not-sure"> <input id="not-sure" type="radio" value="not-sure" name="not-sure" class="inline"/>Not sure</label>
</fieldset>
<fieldset>
  <label for="feature">What is your favorite feature of freeCodeCamp?<select id="feature" name="feature">
    <option value="">Select an option</option>
    <option value="1">Challenges</option>
    <option value="2">Projects</option>
    <option value="3">Community</option>
    <option value="4">Open Source</option>
    </select>
    </label>
    </fieldset>
    <fieldset>
      <legend>What would you like to see improved? (Check all that apply)</legend>
      <label for="Front-end-Projects"> <input id="Front-end-Projects" type="checkbox" name="Front-end-Projects" value="front" class="inline" />Front-end Projects</label>
      <label for="Back-end-Projects"> <input id="Back-end-Projects" type="checkbox" name="Back-end-Projects" value="back" class="inline" />Back-end Projects</label>
      <label for="Data Visualization"> <input id="Data-Visualization" type="checkbox" name="Data-Visualization" value="date" class="inline" />Data Visualization</label>
      <label for="Challenges"> <input id="Challenges" type="checkbox" name="Challenges" value="challenges" class="inline" />Challenges</label>
       <label for="Open-Source-Community"> <input id="Open-Source-Community" type="checkbox" name="Open-Source-Community" value="open" class="inline" />Open Source Community</label>
      <label for="Gitter-help-rooms"> <input id="Gitter-help-rooms" type="checkbox" name="Gitter-help-rooms" value="gitter" class="inline" />Gitter help rooms</label>
      <label for="Videos"> <input id="videos" type="checkbox" name="videos" value="videos" class="inline" />Videos</label>
      <label for="City-meetups"> <input id="city-meetups" type="checkbox" name="city-meetups" value="city" class="inline" />City Meetups</label>
     <label for="Wiki"> <input id="Wiki" type="checkbox" name="Wiki" value="wiki" class="inline" />Wiki</label>
     <label for="forum"> <input id="forum" type="checkbox" name="forum" value="forum" class="inline" />Forum</label>
     <label for="Additional-Courses"> <input id="Additional-Courses" type="checkbox" name="Additional-Courses" value="additional" class="inline" />Additional Courses</label>
      </fieldset>
      <fieldset>
        <label for="comments">Any comments or suggestions?<textarea id="comments" name="comments" cols="30" rows="3" placeholder="Enter your comment here..."></textarea>
        </fieldset>
<label>
  <input id="submit" type="submit" value="submit" />
</lable>
</form>
</body>
</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) EdgiOS/131 Version/16.0 Safari/605.1.15

Challenge Information:

Survey Form - Build a Survey Form

2

Spelling matters.

Secondly there is nothing present in your code that says these three buttons are part of the same group.

Please check the MDN Docs to figure out how to make them a group.

3

Thank you for your reply.

I added a space between “a” and “friend.” Is there anything else?

For the radio buttons, I fixed the name value and passed 38.

Any guidance for “8. Your #name should require input.” ?

4

Oh, don’t mind my question. I got it—it was a spelling mistake. I fixed it and passed.

Much appreciated!

1 Like