Build a Checkout Page - Build a Checkout Page

HTML-CSS
1

Tell us what’s happening:

I am doing the checkout form Index.html. I keep getting flagged about label(s) missing around non-submit elements, the span elements and the aria-describedby attribute.

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="C:\Users\12027\Downloads\thumbnail.jpg"  alt="Store Owners Mother and Child" >
</h2>
</section>
<section>
    <h2>Payment Information</h2> 
  <form>
      <label>      
 <input id= "card-name"  name= "card-name" type= "text"> e.g.Mastercard
 </label>
 <label>
 <input id= "card-number"  name= "card-number"   type= "text"> e.g. 1234 12345 12345 11/25 123
 </label>
 <label>
 <p id= "card-number-help" aria-describedby="card-number-help" >card-number-help
   <p>   Your card number should have 14 or 15 digits, the digits of the month and final digits of the year it is valid, and a 3 or 4 digits CVV number.</p>
     </label>
 <label>
  <input required= "required">enter card-name
  <span  aria-hidden ="true">*</span> </label>
  <label>
      <input
 required= "required">enter card number
<span aria-hidden="true">*</span>
</label>
   </form>  
    </section>
    </body>
</html>

Your browser information:

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

Challenge Information:

Build a Checkout Page - Build a Checkout Page

2

please verify your HTML with an HTML validator Ready to check - Nu Html Checker

the tests require you assiciate the input and labels element together with for attribute

3

The user story indicates to use id, when I switch to for I obtain flags for all inputs being wrong. I have also tried to open the label like so <label

4

Hi,
Can you share your code? The for attributes of each label should match the id of the associated input. All of your input elements need to have an id, name and type attribute.
Good luck!

5

Thankyou. When you say match. does it mean I replace id with for or use both?

6

it means that they need to have the same value

you may want to review how associating labels and inputs work: https://www.freecodecamp.org/learn/responsive-web-design-v9/lecture-working-with-forms/how-do-forms-labels-and-inputs-work-in-html