Survey Form - Build a Survey Form

Tell us what’s happening:
I’ve been stuck for a while on a couple of issues with my code.
I’m getting the following errors:

  • Your #dropdown should have at least two selectable (not disabled) option elements.
    -Every radio button group should have at least 2 radio buttons.
  • Failed:All your checkboxes inside #survey-formshould have a valueattribute and value.
  • You should have an input or button element with an id of submit .
  • Your #submit should have a type of submit .
  • Your #submit should be a descendant of #survey-form .

I feel like I’m getting mixed up in a few places but not sure where.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet"href="styles.css">
    <title>Fitness Level Survey Form</title>
      </head>
      <body>
  <h1 id="title">Fitness Level Survey Form</h1>
  <p id="description">Thank you for taking the time to fill out this survey to better 
    understand the relationship between age and fitness level!</p>

<form id="survey-form">
  <fieldset>
    <label id="name-label"><input type="text"id="name"name="name"placeholder="enter 
    full name" required>Name</input></label>
    <label id="email-label"><input 
    type="email"id="email"name="email"placeholder="enter email" required>Email</
    input></label>
    <label id="number-label"><input 
    type="number"id="number"placeholder="13"min="13"max="99"required>Age</input></
    label>
     
   <h2>How many days per week do you engage in physical activity?</h2>
    <label for="dropdown"><select id="dropdown">
         <option=value"0">0</option>
         <option=value"1-2">1-2</option>
         <option=value"2-3">2-3</option>
         <option=value"3-4">3-4</option>
         <option=value"5-6">5-6</option>
         <option=value"everyday">Everyday</option>
      </select>
    </label> 
    <h2>How would you rate your intensity?</h2>
         <label for="fitness-intensity"><input id="sedentary-office-job" 
          type="radio"name="sedentary-office-job"value="sedentary-office-       job"class="inline"checke
      d/>Sedentary(office job)
      </label>
      <label for="fitness-intensity"><input id="light-exercise" type="radio" 
      class="inline"value="light-exercise"name="light-exercise">Light exercise(1-2 
      days per week)
      </label>
       <label for="fitness-intensity"><input id="moderate-exercise" 
       type="radio"name="moderate- exercise"value="moderate-exercise"class="inline"/
       >Moderate exercise(3-5 days per week)
      <label for="fitness-intensity"><input id="heavy-exercise" 
      type="radio"name="heavy-exercise"value="heavy-exercise"class="inline"/>Heavy 
      exercise(5-6 days per week)
      <label for="fitness-intensity"><input id="athlete" 
      type="radio"name="athlete"value="athlete"class="inline"/>Athlete(5-6 days per 
      week)

    
      </label>
      <h2>Which type of exercise do you enjoy?<h3>(Select all that apply)</h2>
      <label for="Powerlifting" name="powerlifting">
          <label for="powerflifting"><input id="powerlifting" type="checkbox" required 
          name="powerlifting"value="powerlifting" class="inline">Powerlifting</label>
           <label for="weightlifting"><input id="weightlifting" type="checkbox" 
           required name="weightlifting"   class="inline"value="weightlifting">Weightlifting</label>
       <label for="crossfit"><input id="crossfit" type="checkbox" required 
       name="crossfit" class="inline">Crossfit</label>
        <label for="calisthenics"><input id="calisthenics" type="checkbox" required 
        name="calisthenics"value="calisthenics" class="inline">Calisthenics</label>
         <label for="specialized-endurance"><input id="specialized-endurance" 
         type="checkbox" required name="specialized-endurance" value="specialized-endurance"
         class="inline">Endurance training for specialized sport</label>
          <label for="yoga"><input id="yoga" type="checkbox"value="yoga" required name="yoga" 
          class="inline">Yoga</label> 
          <label for="other"><input id="other" type="checkbox" required name="other" 
          class="inline"value="other">Other

</label>
<fieldset>
<label for="additional-comments"><h4>Additional Comments:</h4></label>
<textarea id="additional-comments"name="additional-comments"placeholder="Being active is great because..."rows="5"cols="60">
</textarea>
</fieldset>
<input id="submit" type="submit"value="Submit">
<footer>
  </footer>
    </form>           
  </body>
</head>

Not sure what just happened. I copied and pasted my work into here and this is what happened.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

I noticed that you seem to have some issues with the html code not being formatted correctly (or indented correctly) so I wanted to suggest that you put your code into an online code validator

And try to fix the errors being reported here as well as try to indent the code properly (nested elements should be indented 2 spaces within their parent element).

I think doing these things may help you also debug and then help us read your code as well (if you still need help after that).

Look through your code line by line, you’re making a lot of mistakes, mostly in your element tags. like,
<h2> ending in a <h3>(supposed to be </h2>)

Along with the fact your code is arranging checkboxes and radio elements behind the labelled element. For example, if you were to label something for a form, <label for="cat" id="cat">Cat<input type="radio" required id="choice"/></label> it would appear as: Cat {radio element}.
You’re doing okay, mistakes are part of learning, remember to wrap it all in <form></form> tags and your dropdown is typically, <select><option></option></select> with the number of option tags corresponding to the number of options you want .

More: Your option element is wrong, attributes aren’t written that way. <option id="dropdown" value="0">0</option>
Remember that elements in html are given properties through attributes, id’s, classes and their respective values. Also I don’t know if you need a footer for a form? Was it stated in the instructions? Try checkout mdn, w3schools for valid form examples then compare your code.

Yeah, I had a feeling that was going to be an issue. It’s just that when I write the code, some of the lines don’t get indented and I feel like they need to be because it looks out of place. Thanks for the tip.

1 Like

I really appreciate you looking through my code, thanks a bunch. I think I started to change/move things around without completely finishing steps(spaces, missing closing tags, unnecessary closing tags, etc). Also, when I got stuck on something, I was looking through other students examples for answers and may have gotten some bad tips somewhere. I think I’m confused on how the radio/checkboxes work. I’ll go back and revisit earlier lessons. Thanks David :+1:

Also, in that cat radio example, are implying that’s how it should be done? That wasn’t the way I did it in my code.
I referred back to the Registration Form we built, and it was done the same way I did it in this project.

<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>

And for the form tags, what do you mean by wrap everything? From head to toe, or certain parts?

1 Like

Nice work bro, radio input elements have a problem where if they aren’t all using the same id you can’t deselect them(try it and see). Then the form tags you did correctly, that was just me making sure you did it before seeing your code. When you’re stuck you can just search this forum and the step you’re stuck at. Like “building a form step 10” or “radio buttons don’t work in building a form”.

1 Like

Okay, got it. I was wondering why I couldn’t deselect them. It was driving me nuts. Thank you!

1 Like

Okay, still not sure why the indenting is still an issue, but I’m only having one error:

All your checkboxes inside #survey-form should have a value attribute and value.
There are value inputs relative to each checkbox, and I’m not sure what’s going on.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Fitness Level Survey Form</title>
      </head>
      <body>
  <h1 id="title">Fitness Level Survey Form</h1>
  <p id="description">Thank you for taking the time to fill out this survey to better 
    understand the relationship between age and fitness level!</p>

<form id="survey-form">
  <fieldset>
    <label id="name-label"><input type="text" id="name" name="name" placeholder="enter-full-name" required>Name</label>
    <label id="email-label"><input 
    type="email" id="email" name="email" placeholder="enter email" required>Email</label>
    <label id="number-label"><input 
type="number" id="number" placeholder="13" min="13" max="99" required>Age</label>
</fieldset>
<fieldset>
    <h2>How many days per week do you engage in physical activity?</h2>
    <label for="dropdown"><select id="dropdown">
      <option value="0">0</option>
      <option value="1-2">1-2</option>
      <option value="2-3">2-3</option>
     <option value="3-4">3-4</option>
      <option value="5-6">5-6</option>
      <option value="everyday">Everyday</option>
      </select>
      </label> 
      </fieldset>
      <fieldset>
      <h2>How would you rate your intensity?</h2>
      <label for="fitness-intensity"><input id="fitness-intensity" 
type="radio" name="fitness-intensity" value="sedentary-office-job" class="inline" checked
      >Sedentary(office job)
      </label>
      <label for="fitness-intensity"><input id="fitness-intensity" type="radio" 
      class="inline" value="light-exercise" name="fitness-intensity">Light exercise(1-2 
      days per week)
      </label>
      <label for="fitness-intensity"><input id="fitness-intensity" 
       type="radio" name="fitness-intensity" value="moderate-exercise" class="inline"
       >Moderate exercise(3-5 days per week)</label>
      <label for="fitness-intensity"><input id="fitness-intensity" 
      type="radio" name="fitness-intensity" value="heavy-exercise" class="inline">Heavy 
      exercise(5-6 days per week)</label>
     <label for="fitness-intensity"><input id="fitness-intensity" 
      type="radio" name="fitness-intensity" value="athlete" class="inline">Athlete(5-6 days per 
      week)
      </label>
      </fieldset>
      <fieldset>
      <h2>Which type of exercise do you enjoy?(Select all that apply)</h2>   
          <label for="powerflifting"><input type="checkbox" 
          name="powerlifting" value="powerlifting">Powerlifting</label>
           <label for="weightlifting"><input type="checkbox" name="weightlifting" value="weightlifting">Weightlifting</label>
       <label for="crossfit"><input type="checkbox" name="crossfit" >Crossfit</label>
        <label for="calisthenics"><input type="checkbox"
        name="calisthenics" value="calisthenics">Calisthenics
        </label>
         <label for="specialized-endurance"><input 
         type="checkbox" name="specialized-endurance" value="specialized-endurance"
         >Endurance training for specialized sport</label>
          <label for="yoga"><input type="checkbox" value="yoga" name="yoga" 
          >Yoga</label> 
          <label for="other"><input type="checkbox" name="other" value="other">Other</label>
<fieldset>
<label for="additional-comments">Additional Comments:</label>
<textarea id="additional-comments" name="additional-comments" rows="5" cols="60" placeholder="Being active is great because...">
</textarea>
</label>
</fieldset>
<input type="submit" value="Submit" id="submit"/>
    </form>           
  </body>
</html>
  text-align:center;
}
label {
  display: block;
  margin: 0.5rem 0;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #7E6560;
  border-color: white;
  min-width: 300px;
}
input[type="file"] {
  padding: 1px 2px;
}
body{
  background-color:#BEAEAA;
  font-family:helvetica;
  padding-top:2em;
  padding-left:3em;
  height: 100vh;
  margin: 0;
}

}
  fieldset:last-of-type {
  border-bottom: none;
  }
footer{
  padding-bottom:2em;
}
textarea{
  color:#000000;

}

one of your inputs is missing the value attribute
<input type="checkbox" name="crossfit" >

2 Likes

I was at the point where I was just staring at it. Thank you so much.

1 Like