Design a Registration Form - Step 37

HTML-CSS
1

Tell us what’s happening:

Stuck on Step 37. Keep getting this error: 1. 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'>

<!-- User Editable Region -->

        <fieldset>
          <legend>Information</legend>
      <label for="first-name">Enter Your First Name: <input name="first-name" id="first-name"  type="text"  required /></label>
        <label for="last-name">Enter Your Last Name: <input name="last-name" id="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 name="password" 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>
        <legend>About you</legend>
        <label for="profile-picture">Upload a profile picture: <input name="profile" id="profile-picture" type="file"/></label>
        <label for="age">Input your age (years): <input name="age" id="age" type="number" min="13" max="120" /></label>
        <label for="referrer">How did you hear about us?
          <select name="referrer" 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 name="textarea" id ="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
        </label>
      </fieldset>
      <label for="terms-and-conditions">
        <input name="terms" 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/137.0.0.0 Safari/537.36

Challenge Information:

Design a Registration Form - Step 37

2

What changes did you make for this step?
When I look at the original code, it looks different than yours (you have more elements)

3

Hi, just wanted to add, I had the same problem before. The test is looking for name=" first" instead of first-name. Try changing this:

html

CopyEdit

<input name="first-name" ... />

Too this:

html

CopyEdit

<input name="first" ... />

That should fix the error.

4

I believe I only added several “name=xxx” except for the radio button ones which were added in previous steps

5

It did not. I’ve tried many different words and nothing works!

6

okay, as I mentioned, the code is not matching the one that is presented when I see the same step.
Can you click the Reset button and try again?
This will put the original code back and simply add the name attribute only and check.
thanks

7

Thank you, I don’t know what was changed the first time.

8

If you were copying it from somewhere, then you cannot know. (Or using a tool to write it etc like an AI). It is better to do these exercises yourself if so.