Learn HTML Forms by Building a Registration Form - Step 17

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **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>Enter Your First Name: <input for="first-name_id" /></label>
      <label>Enter Your Last Name: <input for="last-name_id" /></label>
      <label>Enter Your Email: <input for="email_id" /></label>
      <label>Create a New Password: <input for="new-password_id" /></label>
    </fieldset>
    <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 (X11; Ubuntu; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0

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

Link to the challenge:

2

Hello there.

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

3

after the input I put the for attribute with "first-name"and so, on bit I keep getting that error.

1 Like
4

“That error”?

You are modifying the for attribute here, instead of creating an id attribute.

1 Like
5

is that the correct way for the for attribute?

6

No. The Step is not asking you to add the for attribute like that. You shouldn’t stick the id part on there.

7

Hint

The first input element should have an id of first-name.
???

8

Sure, that’s correct. You did not add an id attribute.

id and for are two separate attributes.

Following accessibility best practices, link the input elements and the label elements together using the for attribute.

Use first-name, last-name, email, and new-password as values for the respective id attributes.

Look back at previous projects. How did you use for and id together on label+ input pairs previously?

9

I’m really stuck here.
:exploding_head: :woozy_face: :flushed:

1 Like
10

Let’s try looking at a previous project

I see an input element on line 49. Do you see it?

1 Like
11

Loving is capitalized. Am I getting warmer? :upside_down_face:

1 Like
12

Do you see the id and for attributes there? They are part of two separate elements. Which element gets the id and which one got the for attribute?

13

I see it and I’m trying…

2 Likes
14

So which element has the id attribute? Which element has the for attribute?

You need to add 3 id attributes and 3 for attributes.

They should go on the inputs and labels similar to how to did it for the Cat Photo App project.

15

id is input and for is label

1 Like
16

Exactly.

So you need to add those id and for attributes to these 3 labels and 3 inputs.

17

can you put a label inside a label? or write it on the next line.

18

You don’t need to move the labels.

There are 4 (I miscounted earlier) pairs of labels and inputs.

All of need to do is add id attributes to the inputs and matching for attributes to the labels.

I think that you are making this more complicated that you need to. Don’t move any elements around.

19

ok, I’m gonna try this…

21

Hey @Trueq simply follow the instruction, label and input have separate attributes but same value, for and Id attribute goes to separate elements. remove the _id attached to all values. I hope this clue helps.