Learn HTML Forms by Building a Registration Form - Step 45

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
What’s wrong in my code please?
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>
        <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 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;
}


/* User Editable Region */

fieldset{
  padding: 2rem;
  padding: 2rem;
  border: 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/114.0.0.0 Safari/537.36 Edg/114.0.1823.58

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

Link to the challenge:

2

Your first padding rule adds 2rem padding to all sides of the fieldset elements. Your second padding rule is redundant because it does exactly the same. You could specify padding-top or padding-bottom rules for instance, to add padding only to a specific side of an element, but in this case that would be cumbersome, as you also need to remove padding from right and left for this step.

Here’s an example of the shorthand for padding (or margin) properties:

// add 2rem padding to all sides
padding: 2rem;

// add 1rem top 2rem right 3rem bottom 4rem left (clockwise from top)
padding: 1rem 2rem 3rem 4rem;

// add 1rem top and bottom and 2rem right and left
padding: 1rem 2rem;
1 Like
3

So how do I remove the padding from the left and right of the fieldset, because according to what you said below your text, I am meant to write my code like these:

fieldset{
  padding: 2rem 2rem;
  border: none;
}
4

The code you’ve written there actually does the same as padding: 2rem. When you specify only two values to the padding property, it applies the first value to top and bottom and the second value to right and left (as in my example). If you want to specify no padding, you can use 0.

1 Like
5

Thank you for your help.

6

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