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

Abz Man
Abz Man
6,702 Points
Posted by Abz Man
Abz Man
6,702 Points

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

I just cant seem to process the question in my head. Please correct me, and explain how to do this.

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>Shirt size:></label>
      <select id="color" name="shirt_color">
        <label for="radio" for="small">Small</label>
        <input type="radio" id="small" value="small" name="shirt_size">

        <label for="radio" id="medium">medium</label>
        <input type="radio" id="medium" value="medium" name="shirt_size">
        <label for="radio" id="large">large</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>


        <label>Label for group:</label>
   <label for="option1">Option 1</label>
   <input type="radio" id="option1">
   <label for="option2">Option 2</label>
   <input type="radio" id="option2">





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

1 Answer

hgm
hgm
5,239 Points
hgm
hgm
5,239 Points

when you want to associate a <label> with an <input> element, like the radio button in your case, the 'for' attribute of that <label> needs to be equal to the id of that <input> element.

for example:

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

the actual value of the <input> id and the <label> for attributes you can choose freely, but they have to match.