Build a Checkout Page - Build a Checkout Page

HTML-CSS
1

Tell us what’s happening:

Can anyone help with 10 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." I have used the element in the label but noting is correct.

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 that has all blocks segmented" />
        <p>Rubix Cube Total = $3.50</p>
    </section>

    <section>
        <h2>Payment Information</h2>
        <fieldset>
            <legend>Card Details</legend>
        <form method="POST" action="#">
        <label for="card-name"<span type="*" aria-hidden="true">Cardholder Name* (required):</label>
        <input aria-required="true"
        type="text"
        id="card-name"
        name="card-name"
        placeholder="e.g. Mr John H Doe"
        required size="20"
        required
        />
        <p></p>
        <label for="card-number"<span style="*" aria-hidden="true">Card Number* (required):</label>
        <input aria-required="true"
         type="text"
         id="card-number"
         name="card-number"
         size="16"
         placeholder="e.g.1234"
         required
         /><br>
         <p id="card-number-help" aria-describedby="card-number-help">Please enter your 16-digit card number without spaces or dashes.</p>
         <p></p>
         <label for="exp-month">Month (required):</label>
         <input aria-required="true"
          type="number"
          name="exp-month"
          id="exp-month"
          min="1"
          max="12"
          required
          />
         <label for="exp-year">Year (required):</label>
         <input aria-required="true"
          type="number"
          id="exp-year"
          name="exp-year"
          min="26"
          max="45"
          required
          />
          <p></p>
          <label for="card-cvv">Card CVV (required):</label>
          <input aria-required="true"
           type="number"
           id="card-cvv"
           name="card-cvv"
           size="3"
           required
           />
        </form>
        </fieldset>      
    </section>
</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Build a Checkout Page - Build a Checkout Page

2

Take a look at the label closely and check if there isn’t any problems with the syntax, mainly with your label tag.

3

what happend to the label tag? make sure that the label tag is still written correctly

4

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