FCC Survey Form project question

Current problem: “For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id=“name-label”, id=“email-label”, and id=“number-label”.”

I believe this means I am supposed to have a style element for
#name-label {

}
#email-label {

}
and
#number-label {

}
but, if so, what am I supposed to put inside them? Or am I off altogether?

you don’t need to use the ids to style those elements, in this case you just give an id attribute to the elements so that the tests can recognise them

It looks like you’re reading only the first line of the failing message. When a test fails, click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The failing message says

For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id="name-label", id="email-label", and id="number-label".
#name-label is not defined : expected null to not equal null
AssertionError: #name-label is not defined : expected null to not equal null

Do you understand what the test is looking for and why it fails?

I don’t understand what the failing message is asking me to do.

@BrookA, so we read the failing message and it tells us that each input field should have a corresponding label and that label should have an id attribute.

Here is your code

<label for="name-label">
  <input id="name" value="name" type="text" name="name-label" required>
</label>

Notice there is no id attribute associated with the label.
When you correct that the failing test looks the same but the error message is slightly different. It reads

For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id="name-label", id="email-label", and id="number-label".
#name-label should contain some text : expected 0 to be above 0
AssertionError: #name-label should contain some text : expected 0 to be above 0

Because there is no text for the label. For the name input field text as simple as “Name” (w/out the quotes of course) will suffice.

You’ll have to do the same with the email and number labels.

On a side note,
You have some things that you need to correct.

  1. keep your styling external. Do not use internal styling. Everything between your style tags should be in codepen’s CSS editor. (Get rid of the style tags)
  2. “text” and “text-size” are not a valid CSS properties

A couple of things you can do
One suggestion is to switch the Syntax Highlighting in Codepen to help catch errors.
Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

Another thing you can do is run your HTML code through the W3C validator to help identify syntax errors.

Something else that will help. There is user story that was not covered in the lessons. Here’s a hint. Search for html form elements. You will find a list of all the valid elements that are allowed in the form element.

Hope that helps. Come back if you have additional questions or I didn’t explain something well enough.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.