Learn HTML Forms by Building a Registration Form - Step 41

HTML-CSS
1

Tell us what’s happening:
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 action='https://register-demo.freecodecamp.org'>
    <fieldset>
      <label>Enter Your First Name: <input type="text" name="first-name" required /></label>
      <label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
      <label>Enter Your Email: <input type="email" name="email" required /></label>
      <label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
    </fieldset>
    <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" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>
    </fieldset>
    <fieldset>
      <label>Upload a profile picture: <input type="file" name="file" /></label>
      <label>Input your age (years): <input type="number" name="age" min="13" max="120" />
      </label>
      <label>How did you hear about us?
        <select 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>Provide a bio:
        <textarea 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;
}

.none {padding-top:2rem;
padding-bottom:2rem;}

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

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

Link to the challenge:

2

hi there,
to make sure having no padding left or right, it should be set to 0.
That could be easily done by using the padding-property with two values.
If you remember the first value defines top and bottom, the second left and right.
///
By the way, the test will take the padding property with four values, also.
Important is to set the values of both sides to 0.

4

im sorry but im still confused is it possible for you to show an example? Thank

5

example for two values:

/* vertical | horizontal */
padding: 5% 10%;

example with four values:

/* top | right | bottom | left */
padding: 5px 1em 0 2em;
6

hi again,
the instructions asked for
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.

In your css there is a class called .none , but nothing that is just called fieldset{}.

1 Like
7

thanks alot for your help i still dont fully understand but ill get eventually looking over your examples.

1 Like
9

hi,
you can use single value property, like you did, also.
like:

padding-top:  xx;
  padding-right: xx ;
  padding-bottom:xx;
  padding-left:xx;

I guess the main problem is you somewhere changed your (border:none) property into something else.

10

}

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

1 Like
12

hi there, remove the one curly brace in front of padding-top and set it at the end of this whole thing and … you GOT IT.

13

hahaha thanks i got it thanks for your patience !

1 Like
14

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