HTML HTML Forms Choosing Options Create Radio Buttons

bug? shirt size not being accepted

not sure what to do at this point?

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

                  <label>
                Shirt Size:
        </label>
        <input type="radio" id="small" value="small" name="shirt_size"></input>
              <input type="radio" id="medium" value="medium" name="shirt_size"></input>
        <input type="radio" id="large" value="large" name="shirt_size"></input>

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

3 Answers

Jennifer Nordell
STAFF
Jennifer Nordell
Treehouse Staff

Hi there! I'm not sure exactly what happened here or if something changed between the first 2 steps and now. Currently, your radio boxes reside inside the <select> group, but they were meant to be put after the ending </select> tag. Also, each one of your <input> tags has a closing </input>, but the input element is self-closing meaning that it has no ending tags, so you will also need to remove the </input>s.

Hope this helps! :sparkles:

Thomas Chappel
Thomas Chappel
6,342 Points

This will fix the problem. You forgot to put a <label> element after each radio button, with a for attribute that matches the id of the radio button. Also between the opening and closing label tags you have to type what will be displayed on the label e.g. <label>small</label>. Here is the code. Good luck!

html

<label>Shirt Size:</label>
<input type="radio" id="small" value="size-small" name="shirt_size"></input>
<label for="small">small<label>
<input type="radio" id="medium" value="size-medium" name="shirt_size"></input>
<label for="medium">medium</label>
<input type="radio" id="large" value="size-large" name="shirt_size"></input>
<label for="large">large</label>

Figured it out thanks, I had to put the inputs at the bottom of the select radio group.