Using the Label Element for form accessibility

HTML-CSS
1

Hello World,

So, I’m stuck on this task, and I really don’t know what I’m doing wrong. The requirements are:

Your code should have a for attribute on the label tag that is not empty.
Your for attribute value should match the id value on the email input.

And I keep looking at my code and feeling like I’ve done those two things. Any help?

Your code so far


<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <section>
    <form>
      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
      
      
      <label>Email:</label></form>
    <form>
    <label for="email">Email</label>
     <input type="text" id="email" name="email">
      </form>
     
      <input type="submit" name="submit" value="Submit">
    </form>
  </section>
  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2016 Camper Cat</footer>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element/

2

You’ve got an extraneous form in there, don’t you? with an extra Email:
I’d delete the lines I’ve commented out below

<section>
    <form>
      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
      
      
<!--       <label>Email:</label></form>  -->
<!--     <form>    -->
    <label for="email">Email</label>
     <input type="text" id="email" name="email">
<!--       </form> -->
     
      <input type="submit" name="submit" value="Submit">
    </form>
  </section>
3

Solved it! Thank you for your help!

1 Like