Learn HTML Forms by Building a Registration Form - Step 46

Tell us what’s happening:

Hello everyone. kindly walk me through this. appreciate 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 method="post" 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>
        <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="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>
      <label for="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>
      <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;
}

/* User Editable Region */

border: none;

/* User Editable Region */


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/17.1 Safari/605.1.15

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 46

We do not write solutions for people. That’s against the forum rules.

Can you expand upon what words of the instructions you don’t understand?

2 Likes

thanks for your reply. please how do I remove the boder?

1 Like

You are required to remove the border in your fieldset element and then add some padding.

To remove the border, you give the border a value of zero or none.
For the padding, you are to give the padding top and bottom a value of 2rem, your element should have no padding right and left.

You can handle padding in two ways: Use the padding shorthand, which specifies padding-top, right, bottom and left. The second one is to set each property as a single entity.

Let me attach some links here, that will direct you properly.

2 Likes

Really appreciate. Done it and it didn’t work.

It would help if you formed a fieldset selector, these properties and values should be nested in the selector.

1 Like

Please post your actual code instead of a screenshot. It’s polite to post the code so it’s easier to read and easier to help you.

3 Likes

First write fieldset then in two side face bracket write
border none
Padding top 2 rem
Padding bottom 2 rem
Padding left 0
Padding right 0
And write the required value of each at the front of each property.

hello. Im new here, I don’t know how to post my actual code. kindly accept my apology in advance.


hey I tried this but

You are still trying to use html in css like you did the other challenge. Remember how you use an element in css like I explained in the other challenge?

2 Likes

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

2 Likes

been trying to recall Cody but it’s lost in my psyche. kindly walk me through it again.

You should try and show us the code you write. Us giving you the answer in tiny pieces doesn’t help as much as you trying and then us helping you fix any mistakes.

1 Like

You can also go back to that previous challenge topic and see what I said

1 Like

I’ve done that times without number

Please post your code that you’ve tried then. It’s against the rules for us to give you the answer, and it doesn’t help you learn anything that helps you on future steps.

1 Like

Hey it’s better to actually go for multiple tutorials saying the same thing, you are trying to do it faster, but there are many easy level tutorials on YouTube that can help. John smilga, dave gray and there are many more

Hey Cody, visited our previous convo but still can’t get it right. kindly walk me through on this.

So you are trying to use <fieldset> that is html. There should be no use of <> or </> inside of your css.

If I want to style a class I add a . in front of the name, right?
If I want to style an Id I add a # in front of the name, correct?

fieldset is an element. Using <> is how you would make an element in html, but since this is not html, and fieldset is neither a class or an id it should not have anything surrounding it, or anything in front of it