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! While you're at it, check out some resources Treehouse students have shared here.

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 HTML Forms Choosing Options Create Radio Buttons

Posted by cameroneckelberry2
cameroneckelberry2
8,701 Points

I can't get past the 4th step of this Radio Button challenge (possible bug?)

Error Message: Oops! It looks like task 3 is no longer processing!

I have redone this challenge about 4 times, logged in and logged out, refreshed the page and I keep coming up with that error message on the 4th step. I can't get passed it.

Maybe there's a bug?

index.html 
<!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>
      <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">

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

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Cameron,

I think the challenge was expecting the 3 labels to come after the inputs.

cameroneckelberry2
cameroneckelberry2
8,701 Points

Yep! That handled it, thank you!

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 17,885 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 17,885 Points

This code challenge was working for me a few weeks ago when I did it. But now, I got some weird results too.

First thing I did was copy-paste your code. I was able to get up to step 4 and the same error occurred. After commenting out line by line I was able to find that the first label 'Small' was giving the error. The syntax seems perfect, I don't know why the compiler keeps complaining.

The compiler is supposed to limit your code and give you hints in order to move you onto the right track, not completely prevent you from moving on. I believe this is a true bug and should be reported.

It seemed to be happy once I moved the label behind the input tag. Here's my working but ugly solution.

'''

<!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>

  <!--Inserting the label here, before the input, causes task 3 to no longer process.-->
  <input type="radio" name="shirt_size" id="small"  value="small">
  <label for="small">Small</label><br> <!--by moving it here, the compiler seems to be happy,
                                           although the syntax was correct to begin with.-->

  <label for="medium">Medium</label><br>
  <input type="radio" name="shirt_size" id="medium" value="medium">

  <label for="large">Large</labeL><br>
  <input type="radio" name="shirt_size" id="large"  value="large">

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

</body> </html>

'''

cameroneckelberry2
cameroneckelberry2
8,701 Points

Thanks man!

Argzon Haziraj
PLUS
Argzon Haziraj
Courses Plus Student 14,994 Points
Argzon Haziraj
Argzon Haziraj
Courses Plus Student 14,994 Points

Ok i figured out what is the problem , even if you didn't specified !

You can check my code and compare with yours and find the problem. 

<!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 id="small" type="radio" name="shirt_size" value="small"><label for="small">Small</label>

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

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

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

I hope this helps !

cameroneckelberry2
cameroneckelberry2
8,701 Points

Yep that was it! Thank you!