HTML -- Building a Survey Form

HTML-CSS
1
Survey Form

freeCodeCamp Survey Form

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

Name

Email

Age (optional)

Which option best describe your current role?

Would you recommend freCodeCamp to a friend?

Definitely

Maybe

Not Sure

    <label>What is your favorite feature of freeCodeCamp?
<select>
  <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>
  <p>

What would you like to see improve? (check all that apply)

Front-end Projects

Back-end Projects

Data Visualition

Challenges

Open Source Community

Gitter Help Rooms

Videos

City Meetups

Wiki

Forums

Additional Courses

Any Comments or Suggestins? Submit

This challenge is telling me this:
“Every radio button group should have at least 2 radio buttons.”
However, I don’t understand what it’s asking me to do.

Would someone please explain to me what this step wants from me?

Thank you very much.

2

Inputs are in the same group when then have the same name attribute. So this is saying that at least two radio buttons need to have the same name attribute value.

3

Definitely

Maybe

Not Sure

These three buttons have the same attributes:::::: type=“radio”
is this not the attribute that you’re talking about???

4

No. I’m talking about the name attribute.

Learn HTML Forms by Building a Registration Form: Step 28

5

hmmm :thinking: the “name” attributes are the same, look:

name=“definitely-maybe-notsure” for all three (Definitely, Maybe, Not Sure)

 <p><input type="radio" id="maybe" name="definitely-maybe-notsure" value="maybe"/> Maybe</p>
        <p><input type="radio" id="notsure" name="definitely-maybe-notsure" value="notsure"/> Not Sure</p>`Preformatted text`
type or paste code here
6 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Survey Form</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <main>
      <h1 id="title">freeCodeCamp Survey Form</h1>
      <p id="description">
        Thank you for taking the time to help us improve the platform</p>
        </main>
        <form method="post" action="https://survey-form.freecodecamp.rocks" id="survey-form">
  <p><label id="name-label" for="name"> Name <input id="name" type="text" required placeholder="Enter your name"/></label></p>
<p><label id="email-label" for="email"> Email<input id="email" name="email" type="email" placeholder="Enter your email address" required/></label></p>
  <p><label id="number-label" for="number"> Age (optional) <input id="number" name="number" type="number" max="120" min="13" placeholder="Age"/></label></p>  
  <fieldset>
   <p><label for="dropdown"> Which option best describe your current role?<select id="dropdown" name="dropdown">
<option value="">Select an option</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">Other</option>
      </select>
      </label></p>
      <label> Would you recommend freCodeCamp to a friend?</label>
 <p><input type="radio" id="definitely" name="definitely-maybe-notsure" value="definitely" checked/> Definitely</p>
 <p><input type="radio" id="maybe" name="definitely-maybe-notsure" value="maybe"/> Maybe</p>
        <p><input type="radio" id="notsure" name="definitely-maybe-notsure" value="notsure"/> Not Sure</p></fieldset>
  
        <label>What is your favorite feature of freeCodeCamp?
    <select>
      <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>
<fieldset>
<label>What would you like to see improve? (check all that apply)
  </label></p>
  <p><input value="1" type="checkbox"/> Front-end Projects</p>
 <p><input value="2" type="checkbox"> Back-end Projects</p>
 <p><input value="3" type="checkbox"> Data Visualition</p>
 <p><input value="4" type="checkbox"> Challenges</p>
 <p><input value="5" type="checkbox"> Open Source Community</p>
 <p><input value="6" type="checkbox"> Gitter Help Rooms</p>
 <p><input value="7" type="checkbox"> Videos</p>
 <p><input value="8" type="checkbox"> City Meetups</p>
 <p><input value="9" type="checkbox"> Wiki</p>
 <p><input value="10" type="checkbox"> Forums</p>
 <p><input value="11" type="checkbox"> Additional Courses</p></fieldset>
<fieldset> <label for="comments">Any Comments or Suggestions?  
   <textarea id="comments" name="comments" rows="6" cols="60" rowsplaceholder="Enter Your Comment Here...." />
</textarea> </fieldset>
<button id="submit" type="submit">Submit</button>
  </form> 
  </body>
  </html>
1 Like
7

your code looks so organised mine is a mess and im literally struggling to add my raido button, i made the mistake of doing css as i go along and everytime a i add my input for thr radio buttons im getting another fieldsert unfortunately but thankfully from typing this out i think i found my solution

8

:slight_smile: elcome to the community. :slight_smile:
If you are having some difficulties, please know you are always welcome to post any questions and code in the forum.
This is a great group of Leaders, as you can see from bbsmooth’s assistance to help solve the questions for this learner. Other learners, like me, are also willing to help you.
That is what makes it a great forum community.
Important to note is: if you do have questions about a step, or lesson, that is not working, please give a detailed request(question), along with all coding so we can see and help you.
Happy Coding!:slight_smile:

9

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