Learn HTML Forms by Building a Registration Form - Step 45

HTML-CSS
1

*Tell us what’s happening:
I get this error regardless of the border value that I enter:
You can use either a value of

none

or

0

to remove the

border

.
I have tried ‘none’, ‘0px’ as well as tested ‘border-style’

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: 0;  /*I have tried 'none',  '0px' as well as tested 'border-style' */
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 0;
  padding-right: 0;      
}

/* User Editable Region */


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

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/117.0

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

Link to the challenge:

2

The next step (46) shows the code to be:

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

However, this does not work when used in step 45.

image

3

You are missing the closing curly bracket from the code just above the work area.

Hope this helps you move to 46 to complete it.

Happy coding! :slight_smile:

4

Were you able to get it to work? :slight_smile:

5

fieldset element has its own border so it cannot be removed. You can put it in the div element.
or
you first give it class or id then set the css border property to none.

6

Thank you!
How can that happen within the challenge, though?

There should have been an error in step 44 since this is how 45 is presented:

image
image692×574 38.4 KB

7

Oh- and actually -

image
image668×656 46 KB

8

I went back to step 44 to verify the closing bracket was in there and I resubmitted the code. Then, when moving to step 45 - the closing bracket was again missing.
Adding it to step 45 is unsuccessful. This seems like a bug.

9

It finally submitted when I entered this

}

fieldset {
  border: 0;
  padding: 2rem 0;
}

So, the bug twofold:

  1. The previous bracket is missing when moving from step 44.
  2. The accepted value is only 0 and not ‘none’.
1 Like
11

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