Learn HTML Forms by Building a Registration Form - Step 42

HTML-CSS
1

Tell us what’s happening:

Sorry, your code does not pass. Hang in there.

You should give the input expecting a first name a name attribute. PS I would have chosen first-name.
Hello. Let me ask you a question, where and how I should put a name attribute?

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 for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</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">
            <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>
      <label for="terms-and-conditions">
        <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>

<!-- User Editable Region -->

      <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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 OPR/114.0.0.0

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 42

2

Hi,
You put a name attribute just like id or value in the opening tag of the input element.
Hope this helps.

3 
 <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</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">
            <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>
      <label for="terms-and-conditions">
        <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>

I’ve put it, but it writes: " Sorry, your code does not pass. Keep trying.

You should give the input expecting a first name a name attribute. PS I would have chosen first-name" What else should I do in this case?

4

you need to give a name attribute to the input element created to accept a first name like the hint says

5

you also need to give a value to that name attribute. It’s not like required that doesn’t need a value

6

` > 

    <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
    <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" 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>
    <legend>Account type (required)</legend>
    <label for="personal-account"><input id="personal-account" type="radio" name="account-type" checked /> Personal</label>
    <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</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">
        <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>
  <label for="terms-and-conditions" name="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>`*"

Ok, I’ve done it, but it asks me again: Sorry, your code does not pass. You’re getting there.

You should give the file a name attribute. *PS I would have chosen file
Where is the file which it means?

7

Ok, I’ve done it, but it asks me again: "Sorry, your code does not pass. You’re getting there.

You should give the file a name attribute. *PS I would have chosen file
Where is the file which it means?

8

you need to find the input with type="file" and give a name to that too

9

Yes
There is an input element and its type attribute is = file.
here:

It’s below the label that asks for profile picture.

10

<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>

I’ve done it, but it’s not enough, it asks again: You should give the number a name attribute. PS I would have chosen age

11

keep finding the elements and add the name attribute to them, there are 8 elements that need one in this step.

Which is the element that is expecting an age? Hint: the hints are in order from top to bottom

12

I’ ve done it and now it wants again: Sorry, your code does not pass. Try again.

You should give the select element a name attribute. PS I would have chosen referrer

13

Yes keep looking for the elements.
Its gonna tell u to keep adding the name attribute to all of them.

1 Like
14

As I said, there are 8 elements that need a name, continue adding the name attribute to the mentioned element until you finish the step

1 Like
15

I spent over an hour coding this task and thanks to you my code passed. Thank you very much.

1 Like
16

I suggest you spend some time reading the instructions and the hint carefully and try to understand what they tell you, often understandting the text is enough to know what to do

1 Like