Learn HTML Forms by Building a Registration Form - Step 18

HTML-CSS
1

Tell us what’s happening:
I have been trying to figure out this problem, but I don’t know what to do. The instructions say,

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

For this bit of information, I’m thinking I have to add a tag with link with input & label nested in there with an attribute of ‘for’. I.e. (

Then it says,

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

I’m pretty sure they mean,
etc… Please help, I need a nudge in the right direction.

Test: Sorry, your code does not pass. Keep trying.
Hint: The first label element should have a for attribute with a value of first-name. (this doesn’t make sense, because when I switch the ‘for’ attribute, it then tell me I need an ‘id’ attribute. Which is it?!) cries

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'>
      <fieldset>
        <label>Enter Your First Name: <input id="first-name"></label>
        <label>Enter Your Last Name: <input id="last-name"></label>
        <label>Enter Your Email: <input id='email'></label>
        <label>Create a New Password: <input id='new-password''></label>
        <link input='for' label='for'>
      </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 (Macintosh; Intel Mac OS X 10.15; rv:105.0) Gecko/20100101 Firefox/105.0

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

Link to the challenge:

2

I tried writing my code in the section I’m writing about why I can’t figure it out, but it didn’t show, but hopefully it makes sense.

3

hi there,

do you remember step 56 of the cat photo app?
You essentially did the same thing there as here (but only once).

here, you were asked to link a label and an input element together.
You were supposed to put the for attribute in the label
and the id attribute in the input
and make their values identical

(please review it if you have forgotten it and try to solve step 56, then do the same here but with the 4 element pairs given)

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

It’s still showing error, I made the values identical & the for attribute in label + id attribute in input. I’m not sure what else I’m missing unless I’m oblivious, which is highly possible.

5

remember that attributes are defined with an attribute name (for) followed by an equal sign (=), not a colon

3 Likes
6

I was literally on my way back to type, “I found my mistake.” CSS messing me up LOL

1 Like
7

Quick question, when writing the code, I noticed that when I use an apostrophe, it works. Does that actually work in real world scenario as well? Or should you always use quotation marks?

8

both quotes (single and double) work equally well

1 Like
9

thank you for sharing

1 Like
10

Very helpful. Thankyou very much.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.