Design a Registration Form - Step 38

HTML-CSS
1

Tell us what’s happening:

AM RUNNING INTO AN ERROR You should give the input expecting a first name a name attribute. PS I would have chosen first-name.

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'>
  <form>
  <fieldset>
    <label for="first-name">Enter Your First Name:</label>
    <input id="first-name" type="text" name="first-name" required />

    <label for="last-name">Enter Your Last Name:</label>
    <input id="last-name" type="text" name="last-name" required />

    <label for="email">Enter Your Email:</label>
    <input id="email" type="email" name="email" required />

    <label for="new-password">Create a New Password:</label>
    <input id="new-password" type="password" name="new-password" pattern="[a-z0-5]{8,}" required />
  </fieldset>

  <fieldset>
    <legend>Account type (required)</legend>
    <label for="personal-account">
      <input class="inline" id="personal-account" type="radio" name="account-type" value="personal" checked /> Personal
    </label>
    <label for="business-account">
      <input class="inline" id="business-account" type="radio" name="account-type" value="business" /> Business
    </label>
  </fieldset>

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

    <label for="age">Input your age (years):</label>
    <input id="age" type="number" name="age" min="13" max="120" />

    <label for="referrer">How did you hear about us?</label>
    <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 for="bio">Provide a bio:</label>
    <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
  </fieldset>

  <a href="https://www.freecodecamp.org/news/terms-of-service">Read our terms and conditions</a>
  <label for="terms-and-conditions">
    <input class="inline" id="terms-and-conditions" type="checkbox" name="terms-and-conditions" required />
    I accept the terms and conditions
  </label>

  <button type="submit">Register</button>
</form>




      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Challenge Information:

Design a Registration Form - Step 38

2

I don’t understand why you added a form inside of the form? It sorta looks like you copied another solution without understanding it and made a mistake?

3

You should only have one <form> wrapping all your inputs.

4

That was the old code I pasted there — my bad. I’ve fixed it and removed the extra <form>.
Now the issue I’m getting is this error:
“You should give the input expecting a first name a name attribute. PS I would have chosen first-name.”
I’ve added name="first-name" to the input, but the test is still failing, so I’m trying to figure out what I’m missing.

5

Why did you put out the inputs from their Labels?

Basic workshop code:

<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>

Your code:

<label for="first-name">Enter Your First Name:</label>
<input id="first-name" type="text" name="first-name" required />

<label for="last-name">Enter Your Last Name:</label>
<input id="last-name" type="text" name="last-name" required />
6

Please post your updated code

7

this is the new code i have. 

<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="first-name" type="text" required>

        </label>



        <label>

          Enter Your Last Name: 

          <input id="last-name" name="last-name" type="text" required>

        </label>



        <label>

          Enter Your Email: 

          <input id="email" name="email" type="email" required>

        </label>



        <label>

          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>

          <input class="inline" type="radio" name="account-type" value="personal" checked>

          Personal

        </label>



        <label>

          <input class="inline" type="radio" name="account-type" value="business">

          Business

        </label>

      </fieldset>



      <fieldset>

        <label>

          Upload a profile picture:

          <input id="profile-picture" name="profile-picture" type="file">

        </label>



        <label>

          Input your age (years):

          <input id="age" name="age" type="number" min="13" max="120">

        </label>



        <label>

          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>

          Provide a bio:

          <textarea id="bio" name="bio" rows="3" cols="30"

            placeholder="I like coding on the beach..."></textarea>

        </label>

      </fieldset>



      <label>

        <input class="inline" type="checkbox" required>

        I accept the terms and conditions

      </label>



      <button type="submit">Register</button>

    </form>

  </body>

</html>
8

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

9

Oke and which tests are failing right now and where did you get stuck trying to figure out why those tests are failing?

10

It does look like you made a ton of changes the instructions did not ask for. I would reset the code and only make the changes the instructions ask for and nothing else.

11

I have got it. i did restart it and correct it.

removed
2 Likes
12

Please do not share solution code on the forum