Learn HTML Forms by Building a Registration Form - Step 29

HTML-CSS
1

Tell us what’s happening:
Having trouble deciding how to solve this question. should i answer in the second fieldset if so in what order ?

Describe your issue in detail here.

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 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>
        <label><input id="personal-account"type="radio" name="account-type" for="personal-account" /> Personal Account</label>
        <label><input id="business-account" type="radio" name="account-type" for="business-account" /> Business Account</label>
        <label><input id="terms-and-conditions" type="checkbox" required for="terms-and-conditions" /> I accept the terms and conditions</label>
      </fieldset>
      <fieldset></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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

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

Link to the challenge:

2

yes you should answer in the 2nd fieldset. Notice how it is the one they presented to you in the editor? (they’re helpful that way).

The order doesn’t matter. Just match the ids with the labels. And the for attributes in the labels that match the inputs. Does that make sense?

5

Do I copy and paste the editor in the second fieldset? And only add id=“personal-account” and for=“personal-account”? Do I remove <input at the begging of the editor ?

6

this is what I see when I open this challenge

      <fieldset>
        <label><input type="radio" name="account-type" /> Personal Account</label>
        <label><input type="radio" name="account-type" /> Business Account</label>
        <label><input type="checkbox" required /> I accept the terms and conditions</label>
      </fieldset>

3 labels. 3 inputs.
They have given you 3 values for the id attribute that should be added to the input elements.
The same values should be used for the for attribute which you will place inside the label tag.

7

ok so my understanding is as follow <label for=“personal account” close. <input id="personal-account"and the rest as is ?

8

why don’t u just try it and see?
You know nothing will explode, right?
Courage!

9

btw the only thing wrong with this is that the for attribute is in the input instead of being in the label

10

Is the order matter ? And the computer keep giving me this answer ? The first input element should have an id of personal-account.
I tried <label for=“personal account” <input id=“personal account” and left everything else as is ?

11

Please share the new code.

12

not sure how to when i am copying and pasting the codes are not showing up :frowning: new coder here so pls excuse me

13

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

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

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 (').

14 
   <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" for="business-account" /> Business Account</label>
 <label for="terms-and-conditions"/><input id="terms-and-conditions" type="checkbox" required for="terms-and-conditions"/> I accept the terms and conditions</label>
   </fieldset>
15

thank you for the guidance how to do it.

16

remove the / at the end there
label is not self-closing

17

also remove all the for attributes you added into the input

18

i get it that i need to remove the / at the end of account. But why name=“account-type” for=“business-account” ?

19

i didn’t say to remove the name
I said to remove the for attributes from the inputs
the for attributes should be in the labels, not the inputs

20 
 <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 /> I accept the terms and conditions</label>
   </fieldset>
21

got it, thank you for all your help, how the codes looks now ? its still saying 'The first input element should have an id of personal-account.

22

i copied your code and it worked for me.

As your solution works from my end, please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.