Build a Checkout Page - Build a Checkout Page

HTML-CSS
1

Tell us what’s happening:

Hey all, I can’t seem to get step 16 right. It asks for a

element under the input for the card-number and so far I haven’t been able to point to anything wrong in my code, could anyone lend a hand?

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Checkout Page</title>
</head>

<body>
<h1>Checkout</h1>
<section>
    <h2>Your Cart</h2>
    <img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="A rubix cube">
    </section>
<section>
    <h2>Payment Information</h2>
    <form>
        <label for="card-name">Card Holder Name
             <span aria-hidden="true" for="card-name">*</span>
        <input id="card-name" name="card-name" type="text" required aria-required="true"> 
        </label>
    <label for="card-number">Card Number
<span aria-hidden="true" for="card-number">*</span>      
        <input id="card-number" name="card-number" type="text" required aria-describedby="card-number-help" aria-required="true">
       <p id="card-number-help">This is where you insert info</p>
       </label>
       </section>
</form>
</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 OPR/125.0.0.0 (Edition std-1)

Challenge Information:

Build a Checkout Page - Build a Checkout Page

2

How do you associate a label with an input?

What do the instructions say should be inside your label element?

  1. You should include a span element with the text * and aria-hidden set to true inside the label element for each required input, so that required fields are visually indicated.

Have a look at this label example and see how it differs from yours:

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label

3

More on this here:

https://github.com/freeCodeCamp/freeCodeCamp/issues/62016#issuecomment-3254804796

TLDR: Nesting is the old way of associating labels and inputs but now it’s better to use for, so you shouldn’t really do both.

4

I tried switching to association but it only resulted in more problems! It even stopped recognizing the input as “text” and ignored the aria-hidden tag

imagem_2026-01-12_163858260
imagem_2026-01-12_163858260954×825 74.3 KB

5

Hey P3dr0,

Looking at your code, you have a <label> for the “Card Number” but it does not seem to be directly related to the input element. You need to use the for attribute in the <label> to link it to the corresponding input element. Change the label to removed and make sure the for attribute in the aria-hidden span matches the id of the input element.

Also, check if there is an element with the id “card-number” inside the form.

6

Hi @P3dr0

Since the aria-hiddenis no longer recognised after the closinglabeltag was moved, maybe place that tag elsewhere?

Happy coding

7

You correctly removed the input from your label, however you removed too much. Read that instruction again:

  1. You should include a span element with the text * and aria-hidden set to true inside the label element for each required input, so that required fields are visually indicated.

Please copy/paste your updated code into a comment here if you need to share it again. Easier to work with than a screenshot.

8

They are using the for attribute correctly, not sure what you are talking about?

Please do not share solution code.

Maybe you meant the span element?

@P3dr0 re: your span element it was fine before, you didn’t need to change it. As well, id are unique and two elements cannot have the same id.

1 Like
9

Hi @P3dr0,

Looking at the code you originally posted (I can’t test with an image):slight_smile: :

  • note that span does not take a for attribute
  • are your closing form and section tags nested correctly?
  • the tests don’t expect you to nest your last input (with the paragraph after it) inside a label
10

Ah, my mistake! I missed that you already had the for attribute in the label. Thanks for the correction, pkdvalis. I’ll be more careful about checking the code before suggesting fixes. Good luck with your project, P3dr0!

1 Like
11

Alright that worked! Thank you so much for all of the support

2 Likes
12

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