Survey Form Project - Radio Button Requirement - Stuck

HTML-CSS
1

Can you please review my code/? The only test I have failed is that “Every radio button group should have at least 2 radio buttons.” – My button groups have more than two buttons each:

<!DOCTYPE html>
<lang=en>
  <body>
<div class="personal_info">
    <div class="container"> 
    <h1 id="title">Flyin' High Skate Co.</h1> 
 <div class="heading">
<div class="container">  
<p id="description">Let us know what you think of our boards, service and anything else that's on your mind!</p>  
  <img class="img" src="https://images.snapwi.re/56c2/5726c1c00ddd83346f7b23c6.w800.jpg">      
</div>
  </div>
  
  <form id="survey-form">
    <div class="personal-info">
      <div class="container">
        <ul class="personal info_list">
          <li> 
            <label for="name" id="name-label">Name </label>
            <input id="name" type="text" required placeholder="Nyjah Huston">
<li> 
  <label for="email" id="email-label">Email </label><input id="email" type="email" required placeholder="nyjah@nyjahhuston.com">
 <li> 
<label for="number" id="number-label">Number</label><input id="number" type="number" min="0" max="9" placeholder="323-000-0000"
</li>
  </ul>
    </div>
      </div>
<div class="wrapper">
  <div class="skater-type">
    <div class="container"><h3>How would you describe yourself?</h3>
    <select id="dropdown" name="Pro">
      <option value="Rookie">Rookie</option>
      <option value="Advanced Beginner">Advanced Beginner
      </option> value="Intermediate">Intermediate</option>
      <option value="Weekend Warrior">Weekend Warrior</option>
      <option value="Pro">Pro</option>
      </select>
      </div>
<div class="wrapper">
  <div class="service">
    <div class="container">
<h3>How satisfied are you with the service you have received at Flyin' High Skate Co.?</h3>
<select id="dropdown" name="service">
  <option value="Extremely Satisfied">Extremely Satisfied</option> 
  <option value="Very">Very Satisfied</option>
  <option value="Satisfied">Satisfied</option>
  <option value="Neutral">Neutral</option> 
  <option value="Unsatisfied">Unsatisfied</option>
  </select>
  </div>

<div class="wrapper">
  <div class="gear-type">
    <div class="container"><h3>What do you come to Flyin' High for most often?</h3>
          <option value="decks">Decks</option>
                  <input type="radio" name="decks" value="decks">
<option value="wheels_rails_trucks">Wheels/Rails/Trucks</option> 
          <input type="radio" name="wheels_rails_trucks" value="wheels_rails_trucks">
<option value="apparel">Apparel</option><name="apparel">
          <input type="radio" name="apparel" value="apparel">
<option value="stickers_etc.">Stickers, etc.</option><input type="radio" name="stickers_etc." value="stickers_etc.">
      </select>
      </div>
<br>
<div class="wrapper">
  <div class="lessons">
    <div class="container"><h3>If Flyin' High started offering skate classes and workshops, how likely would you be to attend?</h3>
    <option value="very-likely">Very Likely</option>
      <input type="radio" name="very-likely" value="very-likely">
      <option value="likely">Likely</option>
        <input type="radio" name="likely" value="likely">
        <option value="unlikely">Unlikely</option>
        <input type="radio" name="unlikely" value="unlikely">
        <option value="very-unlikely">Very Unlikely</option>
        <input type="radio" name="very-unlikely" value="very-unlikely">
        
<span class="skating-type">
  <div class="form-group"><h3>What type of skating do you do most often?</h3>
  <label><input
  name="skating-type"
  value="street"
  type="checkbox" 
  class="input-checkbox"/>Street</label><br><input 
  name="skating-type" value="vert" type="checkbox"
  class="input-checkbox"/>Vert</label><br><label><input name="skating-type"
  value="Street-and-Vert" type="checkbox" class="input-checkbox"/>Street and Vert (both equally)</label></div>
  <br>
  <br> 
<span class="skate-values">
  <div class="form-group"><h3>What matters most to you when choosing decks and accessories?</h3>
  <label><input
  name="skate-values"
  value="style"
  type="checkbox"
  class="input-checkbox"/>Style</label>
  <br>
  <input name="skate-values" value="style" type="checkbox" class="input-checkbox"/>Price</label>
<br>
<input name="skate-values" 
value="price" 
type="checkbox" 
class="input-checkbox"/>Performance</label
><br>
<input name="skate-values" 
value="performance" 
type="checkbox" 
class="input-checkbox"/>Durability</label>


  </select>
    </div>
<h3>How can we make Flyin' High Skate Co. Better?</h3> 
<textarea id="suggestions"></textarea>
<br>
<button type="submit" id="submit" value="submit">Submit</button>
</div>
</form>
  </body> 
  </html>
2

Hello! I just googled ‘how to make one group from radio buttons’. And there was enough useful links. Specifically you wanna look into attributes of your input elements with type radio.
Also I believe in curriculum was challenges related to this topic, and there was good explanation about radio buttons.

3

OK, thanks. I’ll try that.

4

I tried your suggestion and either did it incorrectly or … (?) Anyway I’m getting the same X message. I also am unsure where the box around the two questions with radio buttons is coming from in the code. Have a look:

type or paste code here<!DOCTYPE html>
<lang=en>
  <body>
<div class="personal_info">
    <div class="container"> 
    <h1 id="title">Flyin' High Skate Co.</h1> 
 <div class="heading">
<div class="container">  
<p id="description">Let us know what you think of our boards, service and anything else that's on your mind!</p>  
  <img class="img" src="https://images.snapwi.re/56c2/5726c1c00ddd83346f7b23c6.w800.jpg">      
</div>
  </div>
  
  <form id="survey-form">
    <div class="personal-info">
      <div class="container">
        <ul class="personal info_list">
          <li> 
            <label for="name" id="name-label">Name </label>
            <input id="name" type="text" required placeholder="Nyjah Huston">
<li> 
  <label for="email" id="email-label">Email </label><input id="email" type="email" required placeholder="nyjah@nyjahhuston.com">
 <li> 
<label for="number" id="number-label">Number</label><input id="number" type="number" min="0" max="9" placeholder="323-000-0000"
</li>
  </ul>
    </div>
      </div>
<div class="wrapper">
  <div class="skater-type">
    <div class="container"><h3>How would you describe yourself?</h3>
    <select id="dropdown" name="Pro">
      <option value="Rookie">Rookie</option>
      <option value="Advanced Beginner">Advanced Beginner
      </option> value="Intermediate">Intermediate</option>
      <option value="Weekend Warrior">Weekend Warrior</option>
      <option value="Pro">Pro</option>
      </select>
      </div>
<div class="wrapper">
  <div class="service">
    <div class="container">
<h3>How satisfied are you with the service you have received at Flyin' High Skate Co.?</h3>
<select id="dropdown" name="service">
  <option value="Extremely Satisfied">Extremely Satisfied</option> 
  <option value="Very">Very Satisfied</option>
  <option value="Satisfied">Satisfied</option>
  <option value="Neutral">Neutral</option> 
  <option value="Unsatisfied">Unsatisfied</option>
  </select>
  </div>
  <br>
  <br>
<fieldset id="group2">
<div class="wrapper">
  <div class="gear-type">
    <div class="container"><h3>What do you come to Flyin' High for most often?</h3>
<option value="decks">Decks</option>
<input type="radio" value="Decks" name="group2">
<option value="wheels_rails_trucks">Wheels/Rails/Trucks</option> 
<input type="radio" value="Wheels/Rails/Trucks" name="group2"> 
<option value="apparel">Apparel</option><name="apparel">
<input type="radio" value="Apparel" name="group2">
<option value="stickers_etc.">Stickers, etc.</option>
<input type="radio" value="Stickers, etc." name="group2>         
</fieldset>
  </div>
<br>
<fieldset id="group3">
<div class="wrapper">
  <div class="lessons">
    <div class="container"><h3>If Flyin' High started offering skate classes and workshops, how likely would you be to attend?</h3>
    <option value="very-likely">Very Likely</option>
      <input type="radio" value="very-likely" name="group3">
      <option value="likely">Likely</option>
        <input type="radio" value="likely" name="group3">
        <option value="unlikely">Unlikely</option>
        <input type="radio" value="unlikely" name="group3">
        <option value="very-unlikely">Very Unlikely</option>
        <input type="radio" value="very-unlikely" name="group3">
        </fieldset>
        </div>
        
<span class="skating-type">
  <div class="form-group"><h3>What type of skating do you do most often?</h3>
  <label><input
  name="skating-type"
  value="street"
  type="checkbox" 
  class="input-checkbox"/>Street</label><br><input 
  name="skating-type" value="vert" type="checkbox"
  class="input-checkbox"/>Vert</label><br><label><input name="skating-type"
  value="Street-and-Vert" type="checkbox" class="input-checkbox"/>Street and Vert (both equally)</label></div>
  <br>
  <br> 
<span class="skate-values">
  <div class="form-group"><h3>What matters most to you when choosing decks and accessories?</h3>
  <label><input
  name="skate-values"
  value="style"
  type="checkbox"
  class="input-checkbox"/>Style</label>
  <br>
  <input name="skate-values" value="style" type="checkbox" class="input-checkbox"/>Price</label>
<br>
<input name="skate-values" 
value="price" 
type="checkbox" 
class="input-checkbox"/>Performance</label
><br>
<input name="skate-values" 
value="performance" 
type="checkbox" 
class="input-checkbox"/>Durability</label>


  </select>
    </div>
<h3>How can we make Flyin' High Skate Co. Better?</h3> 
<textarea id="suggestions"></textarea>
<br>
<button type="submit" id="submit" value="submit">Submit</button>
</div>
</form>
  </body> 
  </html>
5

I’ll give you an example, it’s radio buttons from my own form.

It’s example of two radio buttons correctly grouped in one group:

<p>Would you recommend us?</p>
  <label>Yes
      <input type="radio" name="recommend-yes-no" value="recommend"/>
  </label>
  <label>No
      <input type="radio" name="recommend-yes-no" value="not recommend"/>
  </label>

Questions about that one?
Also, if you want to provide big chunks of code for review, consider adding comments to it. That is a big one, it s not easy to dive in)

6

OK. Thank you. I’ll try that, and will include comments next time.

7

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