Learn HTML Forms by Building a Registration Form - Step 17

HTML-CSS
1

Tell us what’s happening:

I don’t know what to do

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 method="post" action='https://register-demo.freecodecamp.org'>

<!-- User Editable Region -->

      <fieldset>
        <label>Enter Your First Name:<input id="first-name" for="first-name"></label>
        <label>Enter Your Last Name:<input id="last-name" for="last-name"></label>
        <label>Enter Your Email:<input id="email" for="email"></label>
        <label>Create a New Password:<input id="new-passeword" for="new-password"></label>
      </fieldset>

<!-- User Editable Region -->

      <fieldset></fieldset>
      <fieldset></fieldset>
    </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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 17

2

They asked you to add an input element which looks like this <input>
and they said to add it in each label and to make sure there is one space between the colon : character and the new input element.

1 Like
3

I tried

  <fieldset>
    <label>Enter Your First Name:</label><input>
    <label>Enter Your Last Name:</label><input>
    <label>Enter Your Email:</label><input>
    <label>Create a New Password:</label><input>
  </fieldset>

but it didnt work

4

In this case you added the input element to right of the label.
But what did the instructions say?

Nest an input element within each label

The word “nest” and “within” should tell you that they meant to add the input in between the label’s starting tag and ending tag. As for where, the instructions say exactly where.

1 Like
5

Sorry i stil don’t understand it i also tried this

 <fieldset>
    <label>Enter Your First Name:<input></label>
    <label>Enter Your Last Name:<input></label>
    <label>Enter Your Email:<input></label>
    <label>Create a New Password:<input></label>
  </fieldset>
6

this is better because now the input element is nested within the label (hopefully you understand that phrase now).

You are missing one part of the instructions though.

Be sure to add each input after the label text, and include a space after the colon.

1 Like
7

Thanks i didn’t include the space after text i used this and it work

mod edit: code removed

8

That’s perfect. I’m glad you got it.
I’ve removed the code though as we don’t want to have solutions posted in the forum as it spoils the learning for others.
Thanks for your understanding and keep coding!

1 Like
9

OK I forgot that we cant post solutions sorry.
Thanks for the help

1 Like
10

I saw in my reply MOD EDIT coud i become that and help people after i finish all of the courses

11

Becoming a moderator doesn’t actually have anything to do with finishing the courses. I have not finished them for eg.
It’s just about being a helpful person in the forum and being responsible with the rules etc.