Learn HTML Forms by Building a Registration Form - Step 42

HTML-CSS
1

Tell us what’s happening:

I have given everything a name, aside from the two radio buttons that were already named. I even tried giving unique names like “given” and “sur” for the first name “given name” and last name “surname.” When that didn’t work, I went back to basic labels. It still doesn’t like it. Did I put something in the wrong place?

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" name="first-name" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" name="password" 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" name="profile-picture" /></label>
        <label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" name="age" /></label>
        <label for="referrer" name="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" name="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">
        <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/131.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 42

2

(disregard this reply - it is not the solution)

Hi @scarletstarlex

It’s time consuming but go through your code line by to find the issue. I think your problem might be right here.

give each submittable element a unique name

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

You’ve given these the same name.

Also, consider what the name says about the input. These are both account types, but individually they are more specific than that. One is about business and the other is personal. Perhaps the name can be personal-account and business-account-type or however you want to write it.

3

I didn’t even consider those an issue, as they are not new names. That’s what the course has you do when you create those radio buttons.

The instructions even say " Except for the two radio inputs (which you have already named), give each submittable element a unique name attribute of your choosing." But I will try and see what happens.

1 Like
4

I changed them to this

    <label for="personal-account"><input id="personal-account" type="radio" name="personal-account-type" checked /> Personal</label>
    <label for="business-account"><input id="business-account" type="radio" name="business-account-type" /> Business</label>

It still did not work.

5

I figured it out on my own. The issue was that I was putting each “name” under the “label” element. It should’ve been under textarea, input, etc. My code now passes.

6

Gotcha’. That was my fault. Good on ya for finding that.

1 Like
7

to be clear, radio and checkboxes that are part of a group of buttons must have the same name