Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Kari Jones
Kari Jones
6,217 Points
Posted by Kari Jones
Kari Jones
6,217 Points

Issue With Code Challenge: Create Radio Buttons

I am working on the Create Radio Buttons Code Challenge in the HTML Forms course: http://teamtreehouse.com/library/create-radio-buttons. On Task 3, I completed it using this code:

<form action="index.html" method="post">
  <h1>Shirt Order Form</h1>
  <label for="color">Shirt Color:</label>
  <select id="color" name="shirt_color">
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="purple">Purple</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="orange">Orange</option>
  </select>

  <label>Shirt Size:</label>

    <input type="radio" id="small" value="small" name="shirt_size">
    <input type="radio" id="medium" value="medium" name="shirt_size">
    <input type="radio" id="large" value="large" name="shirt_size">

  <button type="submit">Place Order</button>
</form>

Then, on Task 4, I added this code to the radio button section:

<label>Shirt Size:</label>

 <label for="small">Small</label>
   <input type="radio" id="small" value="small" name="shirt_size">
 <label for="medium">Medium</label>
   <input type="radio" id="medium" value="medium" name="shirt_size">
 <label for="large">Large</label>
   <input type="radio" id="large" value="large" name="shirt_size">

After I added this code, I got an error saying this:

Oops! It looks like Task 3 is no longer passing.

I don't know why that affected Task 3 at all, and when I went back to it to try and figure it out, I couldn't fix it without deleting the code I created in Task 4. And after that, I went on, and the exact same thing happened.

Instructions for Task 3:

Add a label above the radio button group that says "Shirt Size:". Don't associate it with any specific element.

Instructions for Task 4:

Create and associate a label with each of the 3 shirt size radio buttons. Give them the text "Small", "Medium", and "Large".

What am I doing wrong? Any help is appreciated. Thanks.

10 Answers

Kristen Law
Kristen Law
16,244 Points

Try this:

  <label>Shirt Size:</label>
  <input type="radio" id="small" value="small" name="shirt_size">
      <label for="small">Small</label>
  <input type="radio" id="medium" value="medium" name="shirt_size">
      <label for="medium">Medium</label>
  <input type="radio" id="large" value="large" name="shirt_size">
      <label for="large">Large</label>
Kari Jones
Kari Jones
6,217 Points
Kari Jones
Kari Jones
6,217 Points

Thanks, this explained it best.

Cathrin Frigaard
Cathrin Frigaard
1,451 Points
Cathrin Frigaard
Cathrin Frigaard
1,451 Points

I had this problem, and thankfully someone else had too. This should be better explained in the challenge, as putting the lable in front is just as correct, and it's allso how it is explained in the tutorial video.

Zoe Watson
Zoe Watson
3,986 Points
Zoe Watson
Zoe Watson
3,986 Points

I've run into this exact same problem on this challenge and a similar thing on the previous one. 2 code challenges in a row, It requires something different than the way you've been taught in the tutorial video very frustrating and time consuming.

John Anderson
John Anderson
1,916 Points
John Anderson
John Anderson
1,916 Points

The code looks correct. It may be expecting you to place the label after the Input

Kari Jones
Kari Jones
6,217 Points
Kari Jones
Kari Jones
6,217 Points

Thanks, this worked!

Michelle Pepe
PLUS
Michelle Pepe
Courses Plus Student 6,125 Points
Michelle Pepe
Michelle Pepe
Courses Plus Student 6,125 Points

<form action="index.html" method="post"> <h1>Shirt Order Form</h1> <label for="color">Shirt Color:</label> <select id="color" name="shirt_color"> <option value="red">Red</option> <option value="yellow">Yellow</option> <option value="purple">Purple</option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="orange">Orange</option> </select>

<label>Shirt Size:</label> <input type="radio" id="small" value="small" name="shirt_size"> <label for="small">Small</label> <input type="radio" id="medium" value="medium" name="shirt_size"> <label for="medium">Medium</label> <input type="radio" id="large" value="large" name="shirt_size"> <label for="large">Large</label> </form>

Richard Wentford
Richard Wentford
19,730 Points
Richard Wentford
Richard Wentford
19,730 Points

I'm glad I'm not the only one who had problems with it. I thought I couldn't understand a simple label element.

Renee Wilson
Renee Wilson
9,820 Points

I'm stuck on the Code Challenge question too. I believe my answer is correct-I have the same answer as everyone here on the forum-but since the computer is saying it's wrong, it won't let me proceed. Very frustrated right now. All of my notes from following Nick says I'm doing it right. I think I'm going insane

MUZ140583 Brighton Chingwe
MUZ140583 Brighton Chingwe
5,025 Points
MUZ140583 Brighton Chingwe
MUZ140583 Brighton Chingwe
5,025 Points

shirt size: <label for="small">Small</label>

<label for="medium">Medium</label>

<label for="large">Large</label>

Natasha Johnson
Natasha Johnson
12,285 Points
Natasha Johnson
Natasha Johnson
12,285 Points

I was able to pass by adding the same label that says "Shirt Size" above each input.

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

Nu Html Checker This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change Showing results for contents of text-input area

Checker Input Show sourceoutlineimage report Check by

Message filtering Info: The Content-Type was text/html. Using the HTML parser. Info: Using the schema for HTML with SVG 1.1, MathML 3.0, RDFa 1.1, and ITS 2.0 support. Error: Stray start tag label. From line 14, column 10; to line 14, column 16 ↩ <label>shirt Error: Text not allowed in element select in this context. From line 14, column 17; to line 14, column 27 <label>shirt size:</labe Content model for element select:

Document checking completed.

Source

<!DOCTYPE html>↩ <html>↩ <head>↩ <meta charset="utf-8">↩ <title>HTML Forms</title>↩ </head>↩ <body>↩ <form action="index.html" method="post">↩ <h1>Shirt Order Form</h1>↩ ↩ <label for="color">Shirt Color:</label>↩ <label>Shirt Size:</label>↩ <select id="color" name="shirt_color">↩ <label>shirt size:</label> ↩ <input type="radio"id="small"value="small"name="shirt_size">↩ <label>shirt size:</label> ↩ <input type="radio"id="medium"value="medium"name="shirt_size">↩ <label>shirt size:</label> ↩ <input type="radio"id="large"value="large"name="shirt_size">↩ <option value="red">Red</option>↩ <option value="yellow">Yellow</option>↩ <option value="purple">Purple</option>↩ <option value="blue">Blue</option>↩ <option value="green">Green</option>↩ <option value="orange">Orange</option>↩ </select>↩ <button type="submit">Place Order</button>↩ </form>↩ </body>↩ </html> Total execution time 4 milliseconds. About this checker • Report an issue • Version: 15.8.30 <!DOCTYPE html>↩ <html>↩ <head>↩ <meta charset="utf-8">↩ <title>HTML Forms</title>↩ </head>↩ <body>↩ <form action="index.html" method="post">↩ <h1>Shirt Order Form</h1>↩ ↩ <label for="color">Shirt Color:</label>↩ <label>Shirt Size:</label>↩ <select id="color" name="shirt_color">↩ <label>shirt size:</label> ↩ <input type="radio"id="small"value="small"name="shirt_size">↩ <label>shirt size:</label> ↩ <input type="radio"id="medium"value="medium"name="shirt_size">↩ <label>shirt size:</label> ↩ <input type="radio"id="large"value="large"name="shirt_size">↩ <option value="red">Red</option>↩ <option value="yellow">Yellow</option>↩ <option value="purple">Purple</option>↩ <option value="blue">Blue</option>↩ <option value="green">Green</option>↩ <option value="orange">Orange</option>↩ </select>↩ <button type="submit">Place Order</button>↩ </form>↩ </body>↩ </html>

emmettfunston
emmettfunston
10,989 Points
emmettfunston
emmettfunston
10,989 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML Forms</title> </head> <body> <form action="index.html" method="post">

    <h1>Shirt Order Form</h1>

<label for="color">Shirt Color:</label> <select id="color" name="shirt_color">

<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="orange">Orange</option>

</select>

 <label>shirt size:</label>

<input type="radio"id="small"value="small"name="shirt_size"> <input type="radio"id="medium"value="medium"name="shirt_size"> <input type="radio"id="large"value="large"name="shirt_size">

<button type="submit">Place Order</button> </form> </body> </html>