Debug a Donation Form - Debug a Donation Form

HTML-CSS
1

Tell us what’s happening:

Keep failing test #11, Tell me what am I doing wrong here.

Also I can’t wrap my head around test #2, #3, and #11. How can I associate every input element with label element. When I should have exactly 5 input elements and 4 label elements.

Edit: I know there’s a extra label input right after subscribe label, it’s not causing any test to fail. I have removed it.

Your code so far

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

    <input type="checkbox" name="newsletter">
    <label for="newsletter" id="newsletter">
      Subscribe
    </label>
    <label>
    <input type="submit" value="Send">
  </form>
</body>
</html>

Your browser information:

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

Challenge Information:

Debug a Donation Form - Debug a Donation Form

2

Welcome to the forum @moizsydiki!

I see two mistakes:

  1. The correct way to make an association looks like this:
<label for="name">Name</label>
<input id="name">

Please check if you did it right.

  1. Before the submit, there is a lonely label opening tag.
3

Thank you for the correction. I have moved all the id attributes from label to input elements, and remove the lonely label element right after the subscribe element. But the problem still persists.

Test #11. You should associate every input element with a label element using the for and id attributes. Still failing.

4

Yan you share please the updated code?

5

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

yes, sure this is the updated code.


<head>

<meta charset=“UTF-8” />

Donation Form ``` 
<h1>Donation Form</h1>

<form>

  <label *for*="name">Full Name:</label>

  <input *required* *type*="text" *name*="name" *id*="name" />

  <label *for*="email">Email Address:</label>

  <input *id*="email" *required* *type*="email" *name*="email" />

  <label *for*="amount">Donation Amount ($):</label>

  <input *id*="amount" *required* *type*="number" *name*="amount" />

  <input *type*="checkbox" *id*="newsletter" *name*="newsletter" />

  <label *for*="newsletter">Subscribe</label>

  <input *type*="submit" *value*="Send" />

</form>
7

I did a reset with the reset button and after removing the asterixes from your code the challenge passed for me.
Have you made other changes maybe?

8

These asterisks auto appears, when I copied the code from VS Code IDE. And yes after removing them all the tests are cleared, Thank you.

1 Like
9

Try adding id=”subscribe” on your checkbox input