Learn HTML Forms by Building a Registration Form - Step 47

Tell us what’s happening:
What do I do wrong? Thank you in advance

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 action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <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>
        <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" 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>
      </fieldset>
      <fieldset>
        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
        <label for="referrer">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 for="bio">Provide a bio:
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
        </label>
      </fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
  border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0;
}

.input , .textarea , .select , {width:100%; marging-left:0 px; margin-right:0px, marging-top=10px, margin-bottom=0};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

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

Link to the challenge:

You have quite a few mistakes there.
Check the , before the opening {, does it belong there?
Also you misspelled margin and used = instead of : in the declaration.
Check it again.

OMG thats a result of me trying to spend all day on it haha thank you so much. i’m surprised how come I didn’t see it before. now I have this issue: " You should use a comma separated element selector to select the input , textarea , and select elements." and me trying this “input, textarea, select {}”. what do I do wrong again?

Assuming the following stayed the same: .input , .textarea , .select, you put a . in front of the selectors, which turned them into classes.

Still no luck :melting_face: :melting_face:(says “You should use a comma separated element selector”) even if now it looks like this>

input,
textarea,
select  {
    margin-left: 0 px; 
    margin-right: 0px, 
    margin-top: 10px, 
    margin-bottom: 0;
    width: 100%;
}

I’ve edited your code for readability. 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.

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

Now that I’ve formatted your code, Its much easier to see the mistakes in it. Right now, you’re using commas instead of semicolons at the end of your CSS rules which is the cause of the errors.

Also, there’s a space between 0 and px which will also cause an error.

Hope this helps! :smile:

1 Like
.input,
.textarea,
.select {
  width: 100%;
  marging-left: 0 px;
  margin-right: 0px, marging-top=10px, margin-bottom=0;
}
  • to style form controls we can directly use the elements.
    like this : input, textarea, select —> as we are not using any class here.

  • there typo with margin - left and top

  • in css we assign property values by using : not =

  • lastly we must terminate a property declaration using ; not a ,

Here is the correct syntax.

[Mod edit: solution removed]

=> further you can optimize your code by using short hand to define margin.
just remember the clock-wise direction. top-right-bottom-left
so margin: 10px 0 0 0;

Thank you! And I still have the same mistake even I doubled checked commas etc etc :sob:

please post your latest code after correction.

Somehow it worked from my phone after so many times of trying! thank you for your support and help!

Yeah sometimes changes don’t reflect properly. anyway just try to watch the syntax specially in css, as many dev try to do JS stuff in css. Thanks!

1 Like

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.