Problem with span

HTML-CSS
1

Hi all, im having trouble with the “checkout” lad I can’t seem to get the span to work properly. I’ve tried looking back across the units I have completed up till this point. If someone could point me in the right direction that would be great. Thanks

2

Please post your current code and a link to the step. Thanks.

3

Tell us what’s happening:

Hi all, im having trouble with the “checkout” lad I can’t seem to get the span to work properly. I’ve tried looking back across the units I have completed up till this point. If someone could point me in the right direction that would be great. Thanks

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="rubix cube">
        </section>


        <section>
            <h2> Payment Information</h2>
                <form>
                    <input id="card-name"
                           name="card-name"
                           type="text">
                    <label id="card-name">Card name</label>

                    <input id="card-number"
                           name="card-number"
                           type="text"
                           aria-describedby="card-number-help">
                    <p id="card-number-help"> 16 digets</p>
                    <label id="card-number">Card number</label>


                    <input  type="text"
                            id="cvv"
                            name="cvv"
                            required>
                    <label id="cvv" <span aria-hidden="true">*</span>CVV</label>

                    <input  id="epdate"
                            name="epdate"
                            type="text"
                            required>
                    <label id="epdate" <span aria-hidden="true"/>*</span>exp date</label>
                       
                </form>

        </section>

</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

Build a Checkout Page - Build a Checkout Page

4
5

You are failing the following tests:

  1. All of your input elements that aren’t a type of submit should have a label element associated with them.
  1. You should include a span element with the text * inside the label element for each required input.
  1. Your span elements should have aria-hidden set to true.

Starting with the first failing test, how do you associate a label with an input?

8

i will take all the help i can get

9

By giving them the same id

10

after some reading i see that it is by useing for

11

Thank you for the help after realizing it was the for in the labels it all fell into place

1 Like