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 Checkboxes

Posted by MUZ140045 Tafadzwa Gumunyu
MUZ140045 Tafadzwa Gumunyu
13,202 Points

STAGE 3 CHALLENGE 3

Add labels for the two checkboxes that say "Fast Shipping" and "Subscribe to Newsletter".Then add a line break after the labels.

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>
<input type="checkbox" id="shipping" value="fast_shipping"><label for="Fast Shipping" and "subscribe to newsletter"></label>br>
<input type="checkbox" id="newsletter" value="subscribe"><label for="Fast shipping" and "Subscribe to newsletter"></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><br>
      <input type="radio" id="medium" value="medium" name="shirt_size"><label for="medium">Medium</label><br>
      <input type="radio" id="large" value="large" name="shirt_size"><label for="large">Large</label><br>



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

1 Answer

David Stocum
David Stocum
10,120 Points
David Stocum
David Stocum
10,120 Points

It's helpful if you ask specific questions, but it's pretty clear what's wrong in this case.

Your code:

<input type="checkbox" id="shipping" value="fast_shipping"><label for="Fast Shipping" and "subscribe to newsletter"></label>br>

<input type="checkbox" id="newsletter" value="subscribe"><label for="Fast shipping" and "Subscribe to newsletter"></label>

Inside the label tag for each checkbox, your for= attributes should be pointing to the ID of the checkbox in question. It would look like for="shipping" within the first label. The "Fast Shipping" text is the text of the label itself, which goes between the label tags, not within them.

And of course, your labels should be tailored to the individual checkboxes, not use the same text in both. It doesn't make much sense to have two checkboxes with the same text label, but different actions, since users won't know what to do with them.

Your < br > tags are 60% missing too. There should be no spaces in the tag of course, but I can't get it to show up in the comment otherwise.