Learn HTML Forms by Building a Registration Form - Step 46

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
The borders are gone still cant figure out whats the issue here,please help

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

fieldset{padding-right:none;
  padding-left:none;
  padding-bottom:2rem;
  padding-top:2rem;}
fieldset{border-left:none;
  border-right:none;
  border-bottom:none;
  border-top:none;}

/* User Editable Region */


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/121.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 46

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Hello!

You have created 2 fieldset selectors with unnecessary properties. Try resetting your code. Then add a propety of border set to none. You do not have to set it all individually. Then add a semicolon and on the next line add a padding selector with 2px 0 . If there is 2 values in your padding, then the 1st value in your padding always selects your top and bottom padding. And the second one selects the left and right padding.

Example:
div {
border:2px;
padding: 5px 7px;
}

4

Remove the border, and add 2rem of padding only to the top and bottom of each fieldset. Be sure to remove the padding from the left and right.

You need to add border property with the value none and padding property with the value 2rem 0 in the fieldset selector.

Remember you need only one fieldset selector.
@Mmabatho

Example

Element {
/* Your property's and values goes here */
}
5

thank you Hasanzaib, i have done all of what youve mentioned here and it still says i need to remove the padding on the left and right

6

you can’t use “none” for the padding value, you have to use number

example:

body {
padding-left: 0;
padding-right: 0;
}

hope this help!

7

hi there, thank you so much I cleared out everything and yet it still says I need to remove the padding, I followed your example but still stuck :frowning:

8

have you tried this? @Mmabatho

9

oh yeah and also you can remove these

then add border: none; in here to optimize the code

10

hey, Ive cracked it with your assistance. Thank you so much! happy coding.

1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.