HTML/CSS Assessment Confusion. . . any help welcome

Okay, I’ve gotten 11/12 twice in a row with the same miss, so any assistance would be much appreciated.
This is what I’ve been marked off for both times,

*** has exactly one input with a name of ‘pet_name’ and an associated label with the content ‘Name’**

this is the relavent code for
pet_name.jpeg

What am I missing here?
I’m fairly certain when I find out, a good smack to the noggin will be called for.

It’s possible you might be getting some things mixed up. I’d recommend giving your attributes a second look and comparing them to your other correct inputs. Good luck!

1 Like

Just to make sure I understand the instructions, I need 1 “input”

<input type=“text”

with a name of “pet_name”

<input type=“text” name=“pet_name”

with an “associated label”

label for=“pet_name”></label

with the content ‘Name’

label for=“pet_name”>Name</label

and then I put ‘id’ (unspecified variable) in there so that I can manipulate/target it from the css sheet

<input type=“text” id="****" name=“pet_name”

Do I have any of that wrong? The wording just seems a bit subjective or easily confused, so I’m trying to make sure I understand what it is that’s being asked of me.

from my understanding, “for” should match “id”

@Jasole1983 have you checked your other inputs and see if they match what @Jonathanb mentioned?

It’d be odd that your naming convention somehow didn’t work for your ‘Name’ input but worked for the others

For the most part, my for= 's are the same as the related id= 's, but not all. For example, this is the text box as I have it written.

div class=“grid-box grid-box-1”>
label for=“biography”>Biography</label
textarea id=“bio” name=“pet_bio”></textarea

That’s why I’ve been trying to lockdown the exact terms/syntax that I’m not seeing.

I want to emphasize that I’m also learning this as I go through the course :sweat_smile:

Ok so, without fully giving away what the answer should be, consider the previous HTML and CSS readings under: ‘Building Forms in HTML

We see that each ‘for’ attribute is always associated with ‘id’ attributes. Although I’m not sure if that was always the case in previous versions of HTML. (perhaps you have previous experience with that, probably why you did it that way?)

I couldn’t find an exact answer on Mozilla’s HTML documentation, but I found a sort of explanation as to why ‘for’ attributes usually reference ‘id’ attributes:

Hopefully this helps!

1 Like

So I believe it’s WC3 standard that requires the for & id to match up. I actually found an HTML Validator online, which I believe you can also get one for VS with a linter extension (I believe). When I checked it against the validator it showed the non-matching labels as errors (as well as a typo that I totally missed otherwise). Either way, I ended up passing, but I appreciate your assistance. It did help.

PS
Here’s the validator that can double check things for anyone else that’s having minor syntax issues

2 Likes

Glad to hear you were able to work together to figure out the issue. The validators can be super helpful for catching those easy-to-miss bugs. There are also CSS validators that you might find useful in the future too!
Jesse

1 Like