Learn HTML Forms by Building a Registration Form - Step 45

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 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 {
 border:none;
 padding-top: 2rem;
 padding-bottom: 2rem;
 padding-left: none;
 padding-right: 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

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

Link to the challenge:

2

Hello there and welcome to the forum!

It’s much more helpful to us if you can describe, in your own words, what you are having difficulty with. Not only is it a vital skill in learning to code but also, the more you say, the more we can help!

There are a couple of issues with your code:

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

You have added a fieldset class selector. It’s not a class but an element name, so you shouldn’t include the dot. Dots are for classes, hashes for ids and element names have no prefix.

Whilst border can be set to none or 0 to remove it, you can’t set padding to none. If you want no padding you use 0.

Finally, it’s worth knowing how to use shorthand for padding (and margin) properties. This is equivalent to using individual padding properties (i.e. padding-top etc).

EXAMPLE:

// add 10px padding to all sides of an element
padding: 10px;

// add 10px top, 20px right, 30px bottom and 40px left (clockwise from top)
padding: 10px 20px 30px 40px;

// add 10px to top and bottom and 20px to right and left
padding: 10px 20px;
3

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