Build a Survey Form-Need help with grouping radio buttons

HTML-CSS
1

I’ve apparently done every other thing needed for the project but it keeps telling me to make sure all radio button groups have at least two radio buttons.

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Survey Form</title>
  </head>
  <link rel='stylesheet' href='styles.css'>
  <body>
   <div class='main-body'>
      <h1 id='title'><em>Keyboard_Immortal's Survey Form</em></h1>
    <p id='description'><em>Thank you for taking time to fill the survey :)</em></p>
    <form id='survey-form' method='post' action='https://register-demo.freecodecamp.org'>
    <fieldset>
      <label id='name-label'> Name:
        <input type='text' id='name' name='name' placeholder='Enter your full name' required>
      </label>
      <label id='email-label'> Email:<input type='email' id='email' name="email" placeholder='Enter your E-mail address' required>
      </label>
      <label id='number-label'> Age(optional):
        <input type='number' id='number'  name='number' placeholder='Enter a number' min='13' max='120' required>
      </label>
    </fieldset>
    <fieldset>
      <label for='dropdown'> What do you think of the weather these days?
        <select id='dropdown' name='dropdown' required>
          <option value="">(select one)</option>
          <option value="1">Fair</option>
          <option value="2">Terrible</option>
          <option value="3">Wonderful</option>
          <option value="3">other</option>
        </select>
      </label>
     <label class='inline'> Which of these fields are you interested in? (check all that apply)
        <label id='areas-of-interest' class="inline">
        <input type='checkbox' value="1" class="inline"> Business
      </label>
      <label id='areas-of-interest' class="inline">
        <input type='checkbox' value="2" class="inline"> Computer Science
      </label>
       <label id='areas-of-interest' class="inline">
        <input type='checkbox' value="3" class="inline"> Music
      </label>
       <label id='areas-of-interest' class="inline">
        <input type='checkbox' value="4" class="inline"> Robotics
      </label>
       <label id='areas-of-interest' class="inline">
        <input type='checkbox' value="5" class="inline"> Maths and Engineering 
      </label>
     </label>
    </fieldset>
    <hr>
    <fieldset>
      <label class='inline'> Would you like to travel overseas?
        <label id='radio' class='inline' name="travel">
          <input type='radio' name='travel' value='1' class='inline' checked> Yes
          </label>
          <label id='radio' class='inline'>
          <input type='radio' name='travel' value='2' class='inline'> No
        </label>
      </label>
     </fieldset>
     <hr> 
    <fieldset>  
      <label class='inline'> How many times would you want to travel?
        <label id='radio' class='inline' name="frequncy">
          <input type='radio' name='frequncy' value='3' class='inline' checked> Once
          </label>
          <label id='radio' class='inline'>
          <input type='radio' name='frequency' value='4' class='inline'> More than once
        </label>
      </label>
    </fieldset>
    <hr>
     <fieldset>  
      <label class='inline'> Which continent would you want to visit the most?
        <label id='radio' class='inline' name="destination">
          <input type='radio' name='destination' value='5' class='inline' checked> Africa
          </label>
          <label id='radio' class='inline'>
          <input type='radio' name='destination' value='6' class='inline'> Asia
        </label>
        <label id='radio' class='inline'>
          <input type='radio' name='destination' value='7' class='inline'> North America 
        </label>
        <label id='radio' class='inline'>
          <input type='radio' name='destination' value='8' class='inline'> South America
        </label>
        <label id='radio' class='inline'>
          <input type='radio' name='destination' value='9' class='inline'> Australia
        </label>
        <label id='radio' class='inline'>
          <input type='radio' name='destination' value='10' class='inline'> Antartica
        </label>
        <label id='radio' class='inline'>
          <input type='radio' name='destination' value='11' class='inline'> Europe
        </label>
      </label>
    </fieldset>
    <hr>
    <fieldset>
      <label for='comments'>
        <textarea id='comments' name='comments' rows='3' cols='30' placeholder='Any comments or suggestion? Let us know.'></textarea>
      </label>
    </fieldset>
    <button class='button' type='submit' id='submit' name='submit'>Submit</button>
    </form>
   </div>
  </body>
</html>
2

Radio button input require to be grouped or nested in a section element from what I recall. Remember radio button inputs nested within a section will only allow one selection of many.

3

Welcome to the FCC community!

A couple of things I have noticed with your code for you Survey.

  1. The link should be inside the head, not between the head and body.

  2. The ids are all in the labels instead of the input element.

  3. There are not any for attributes in the labels to match the ids (that will be in the input when you move them–

  4. The id needs to be unique for each radio button. An id can only be used once. I suggest using the name of the value for each one.

Try fixing these errors and see if that will help you pass the project!

You are doing great!

Happy coding! :slight_smile:
5. Frequency is spelled incorrectly in a few places.

4

Thanks for the pointers, I’ll try them and see how it goes :grin:

1 Like
5

Keep up the great progress!

Happy coding! :slight_smile:

6

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