Learn HTML Forms by Building a Registration Form - Step 41

Tell us what’s happening:
Describe your issue in detail here.I have deleted the for attribute from the label element and added a name attribute in the input element. i dont understand where to add the name attribute in the input element and the tip is saying to give the file a name atrribute. this is completely confusing me as i thought my previous code needed a for attribute in the label element

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" name="file" type="text" required /></label>
        <label>Enter Your Last Name: <input id="last-name" name="file" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
        </label>
      </fieldset>
      <fieldset>
        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file"/></label>
        <label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
        <label for="referrer">How did you hear about us?
          <select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="bio">Provide a bio:
          <textarea id ="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
        </label>
      </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 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like

Hi @mattyglewis38

The label elements should keep they for attribute because it helps to link it with their related input, through input’s id.

You can check this MDN article, I think it will help you with forms, inputs types and their attributes.

And this small course from web.dev page, Learn Forms!, updated and by specialist too.

I hope that help you.

Keep the good work. You are doing great!!

Happy coding!

Attributes for and name are two different things.
The for attribute should be in the label yes.
The name should be wherever they said to put it (usually in an input element or any type of submittable element).

1 Like

but my input element already has a name attribute so is it possible to add another within the same element, the tip also mentions a file with a name element . do i add this to the input element. the tip has confused me even more.

1 Like

Hi again @mattyglewis38

You should put the for attributes back and then test again. Only one name attribute per input though.

Let us know if it works

I already have a name attribute in the input element “first name”. and the tip mentions a file with a name attribute so i am lost as to how to add another name attribute

I have done this but i already have a name attribute in the input element so even when i change the value is it still incorrect, also i mentioned the tip says something about a file with a name attribute, where did this come from?.

1 Like

Hi again @mattyglewis38

All your inputs should have an unique id and name attributes, and check your label elements.

Read all carefully again, no rush, you are almost go it.

You have made some unnecessary changes to the code in the first two label elements and within these labels, you havent given them unique names

Hi

If you don’t write you label elements correctly is not going to work either.

That MDN article will really help you.

Happy coding!

all my input elements already have “id” and "name "attributes

1 Like

Hi @mattyglewis38

I have wrote unique. It is important. :wink:
I think you should take a break and back to this later on. You will see the issue right away. Trust me.
All label elements should have for attribute too.
Just check all code and read the challenge again later on.
Happy coding!

so before i do what does this mean.
You should give the file a name attribute. PS I would have chosen file

1 Like

meaning within the challenge the portion which receives the file , will be given a name of say “file”

Hi @mattyglewis38

My advice Matty is you should reset the challenge and start over, reading everything: code, challenge description and our answers. Don’t be afraid of try again. You nearly did it.

reading and coding out loud it helps some times when we are too focus in some solution (it happens to everyone) and in the learning process as well.

Just give you 5 min break, trust me, and read again carefully

This is a hint to tell you that you forgot to add the name attribute to the input whose type is file. It is near the profile-picture label.

Focus where <label for="profile-picture line is. You need to add a name. Then it will prompt you to the line where age is then Provide a bio:. The question says “file” and the only time the file is repeated on the output where it asks you “Browse”. You need to find the corresponding code to that display. My code has passed. You can repeat names for “name” attribute. Let me know!

You don’t need to delete the for attribute cos it links to the input id. Add the name attribute in the input just like you did with the Id. You can give it any name

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