App Academy

HTML CSS Assessment - Email Response Question

I just submitted and missed twice. I’m confused because the response email asked for " has exactly one input with a name of ‘pet_name’ and an associated label with the content ‘Name’ ."

I changed everything to look like this which seemed to be what the email response was asking for:

<label for="pet_name">Name</label>
<input type="text" name="pet_name" />

This was marked as incorrect. The original instructions asked for an id as well which would look like this I believe:

<label for="name">Name</label>
<input type="text" id="name" name="pet_name" />

Should my code look like the first or the second option? Should I follow the email instructions or the original assignment instructions?

For reference my full code for the form looks like this when it is conformed to the original instructions:

<form action="/pets" method="post">
  <legend>Pet Information</legend>
  <label for="name">Name</label>
  <input type="text" id="name" name="pet_name" />
  <label for="type">Type</label>
  <select id="type" name="pet_type">
    <option>Cat</option>
    <option>Dog</option>
    <option>Hamster</option>
    <option>Other</option>
    <option>Zebra</option>
  </select>
  <label for="bio">Biography</label>
  <textarea id="bio" name="pet_bio"></textarea>
  <label for="owner-email">Owner's Email</label>
  <input type="email" id="owner-email" name="pet_owner_email" />
  <button type="submit" id="new-pet-submit-button">Create new pet</button>
  <button type="reset">Reset</button>

Thanks for pointing me in the right direction.

Hi Matthew,
Look closely at your first option - it does not correctly associate the label with the input. I would recommend going back to the lesson on Building Forms, and check out how the labels are associated with their inputs in that lesson. That should point you in the right direction.
Jesse

Thanks for your prompt reply.

I’m assuming the information you are referring to is “Each label uses the for attribute to refer to the value of the id attribute on its corresponding form element.” So I’m going with the second option.

According to W3schools where I tested the code with just the “name” attribute and the “for” attribute it appeared that the “for” attribute could also reference the “name” attribute which is what I thought the email was asking for. I couldn’t find any information to support this but the code worked within that test environment. So, just for clarification this is not the case and always go with the id attribute?

Yes, you should always go with the “for” and “id” association.

There is an exception: If you nest the input within the label’s opening and closing tags, they will be associated without the “for” and “id”. You can see the documentation on both approaches here in the MDN docs. Look at the first two code snippets to see the examples of the two approaches.

However, make sure you use the “for” and “id” association approach for the assessment, since that is what is indicated in the specification and required for the tests to pass.
Jesse

1 Like