Debug a Donation Form for a local Charity (Responsive Web Design Certification)

Curriculum Help
, ,
1

Responsive Web Design Certificaiton → HTML → Accessibility → Debug a Donation Form (Lab)

the Tests tell me to remove the fifth input element and afterwards it asks to include a fifth input element it is impossible to pass the checks that way as there is some sort of conflict:

here is the code + socrates AI hints:

Your form currently contains only four input elements, but the test expects exactly five. Add a submit input element with type="submit" inside the form and try again.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Donation Form</title>
</head>
<body>
  <h1>Donation Form</h1>
  <form>
    <!-- Full name-->
    <label for="name">Full Name:</label>
    <input required type="text" name="name" id="name">
    
    <!-- Email address-->
    <label for="email">Email Address:</label>
    <input required type="email" name="email" id="email">
    
    <!-- Donation amount-->
    <label for="amount">Donation Amount ($):</label>
    <input required type="number" name="amount" id="amount">
    
    <!-- Subscribe-->
    <input required type="checkbox" name="newsletter" id="newsletter">
    <label for="newsleter">Subscribe</label>

    
    
  </form>
</body>
</html>

… after adding a fifth element and associating it explicitly with a label as well which is required (from the hints):

You should have exactly four label elements in your form.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Donation Form</title>
</head>
<body>
  <h1>Donation Form</h1>
  <form>
    <!-- Full name-->
    <label for="name">Full Name:</label>
    <input required type="text" name="name" id="name">
    
    <!-- Email address-->
    <label for="email">Email Address:</label>
    <input required type="email" name="email" id="email">
    
    <!-- Donation amount-->
    <label for="amount">Donation Amount ($):</label>
    <input required type="number" name="amount" id="amount">
    
    <!-- Subscribe-->
    <input required type="checkbox" name="newsletter" id="newsletter">
    <label for="newsleter">Subscribe</label>

    <input type="submit" value="Send" id="submit">
    <label for="submit">Submit</label>
    
  </form>
</body>
</html>

You should have exactly four label elements in your form.

if i remove the label according to socrates AI, the hints say that every input ought to have a label but i only need 4, ??! what is even asked of me to do seems like a conflict, would appreciate any help:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Donation Form</title>
</head>
<body>
  <h1>Donation Form</h1>
  <form>
    <!-- Full name-->
    <label for="name">Full Name:</label>
    <input required type="text" name="name" id="name">
    
    <!-- Email address-->
    <label for="email">Email Address:</label>
    <input required type="email" name="email" id="email">
    
    <!-- Donation amount-->
    <label for="amount">Donation Amount ($):</label>
    <input required type="number" name="amount" id="amount">
    
    <!-- Subscribe-->
    <input required type="checkbox" name="newsletter" id="newsletter">
    <label for="newsleter">Subscribe</label>

    <input type="submit" value="Send" id="submit">
    
  </form>
</body>
</html>

You should associate every input element with a label element using the for and id attributes.

.. if i now remove the label it tells me to associate every input

2

Welcome to the forum @xqly-stack,

Does the id value of the input match the for value of the label?

Happy coding