Learn HTML Forms by Building a Registration Form - Step 20

Tell us what’s happening:
So I was able to pass this step but I am confused on how the code was set up to begin with. In older steps I have added INPUT elements and now its asking me to add REQUIRED to the input elements. Which I understood from the get-g0 and I typed in the REQUIRED element but it wasn’t passing, even though it was were it was suppose to be. I realized it had a —> / (slash) at the end of the INPUT field, however that slash was just there from previous steps.

My main question is was that slash suppose to be there? Or is that a bug, or whatever the reason I just want an explanation so I know in the future.

Thanks
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" /></label>
      </fieldset>
      <fieldset></fieldset>
      <fieldset></fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

label {
  display: block;
  margin: 0.5rem 0;
}

Your browser information:

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

Challenge: Learn HTML Forms by Building a Registration Form - Step 20

Link to the challenge:

Hey Snacks, I’m no expert, just learning like you.

What I can tell, is that elements that do not need a closing tag can be written either like this: <input> or <input />. The second syntax would be to emphasize the fact that the element is self closing. On the fcc challenges I found that same issue, but it’s due to how the tests on passing the challenge were written, either considering a slash or no slash at the end.
The reason why a test and a previous step might defer is because they were probably not written by the same person.
Hope it helps!

the slash is totally valid

What’s the code you written that wasn’t passing?

Is there a way I could link another tests code?

it was this.

After going through it I realize my thoughts may have been off.

We are looking at the THIRD LABEL for reference /, no /, and closing tag.

Slash and Pass

No Slash and Pass

Closing Tag and Pass

So obviously there is multiple ways of doing it, it just defaults to the cleanest way of writing it? (Defaults after you submit and pass and it cleans it up)

Also, I wondering if I just got the FAIL before because of something loaded in my browser or IDK honestly.

I hope this helps and we can elaborate on this

You have an extra > in most of your screenshots, but keep in mind that your code is not saved, the seed code in next step is not the code you wrote

1 Like

I don’t know why you brought up the “extra >” if you can explain that more of why you brought that up that would be helpful, because I wasn’t talking about that.

And I get that it’s not “code I wrote”, like once you pass and go to the next step it’s populated for you.

My main issue was when you write out the < input =“checkbox” > in the previous step and then you go to the step where you add in “required”. The code in the lesson comes up with < input =“checkbox” / > and the slash is there.

My problem came up when I added the word “required” to the code in the lesson and it was where it was suppose to be but it kept failing me because of the slash (could have been a glitch, cause as you see in the screens I took they all passed)

I was just mainly confused because I didn’t know to an extent or realize that you can have a closing tag, or a slash, or no slash and it’s “self closing”. And when I was getting a fail it was really throwing me off and making me doubt myself (I’m fairly new at this) but I went into the forums and explored the lesson I got stuck on and now I’m here :neutral_face:.

I just felt like some clarification was needed on my end (I realized what happened now and understand how tags are self closing way better now) but while I was going through the lessons and the motions I just remember feeling really confused.

Thank you all for any further discourse.

Ilenia is was trying to tell you that this >> is not valid html
(We never stack brackets like that).

As for the self closing tags. The ideal way to write a self-closing tag is without the / at the end but if you have it (or the exercise has it), it should make no difference to the exercise or the browser display.

1 Like