Learn HTML Forms by Building a Registration Form - Step 46

HTML-CSS
1

Tell us what’s happening:

Hi there can anybody explain where I am missing please. Thank you…
fieldset {
border-left: 0;
border-right: 0;
padding-top: 2rem;
padding-bottom: 2rem;
}

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

/* 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.6 Safari/605.1.15

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 46

2

Please talk about how you are stuck and what debugging you’ve tried. Thanks

3

Hi I am not understanding how link border to padding left and right

4

why do you want to link border and padding?

5

During development, it is useful to see the fieldset default borders. However, they make the content appear too separated.

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.
I am not sure how remove border padding

6

Where I am making mistakes

7

Please don’t just copy-paste instructions.

I don’t see “link” in the instructions?

8

border and padding are two separate things

These are all separate things to do:

  • 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.
2 Likes
9

Am I supposed create 2 fieldsets

10

why do you think you need to create two fieldsets?

11

What I am doing wrong?!

12

you are missing

and I am not sure that is the correct syntax for

13

How do I specify border within fieldset

14

you are writing in the fieldset selector, so whatever you write in there is applied to the fieldset element, you don’t need to worry about a special way to apply the code to the fieldset element, you are already doing that

15

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;
}

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

label {
display: block;
margin: 0.5rem 0;
}

16

Not understanding where I am wrong

17

where are you changing the left and right padding?

18

This is becoming my challenge to specify left and right border

19

when it says “left and right padding” it’s not talking about the border, they are two separate things

1 Like
20

Thank you very much finally :joy: