Learn HTML Forms. Step 63

HTML-CSS
1

Step 63

STEP 63: Speaking of padding, the submit button is sitting at the bottom of the form element. Add 2em of padding only to the bottom of the form.

I submitted this, which was accepted as correct:

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding: 2em;
}

I actually didn’t think this was correct. I just submitted it to get a hint, but it just accepted it. However, if I misspell padding, it gives me the hint to use padding-bottom, as it should. Should the curriculum parser be looking for “padding-bottom”?

2

Hello Your code is Okay

3

Show me your others code they may be have a problem

5

show me your other code

6

I completed that module. If I go back to it, I can resubmit the above text, which says it’s good/pass. You mean my other html and css? The rest of the html and css is standardized, is it not? What happens when you copy/paste the above text into the lesson edit window? Does it pass?

7

Yaa it passes So please post your whole work

8

Here’s my HTML and CSS, not including the above rule in the edit window

<!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" class="inline" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> 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>

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


fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
  border-bottom: none;
}

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

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}

input[type="file"] {
  padding: 1px 2px;
}
9

If it passes for you as well, then you have reproduced the error. I don’t know why you need my html and css if you have reproduced the error. However, I have copy and pasted it in the sister comment.

The PROBLEM is that it passes.

10

Oh so you have passed the step

11

CLARIFICATION:

I submitted “padding: 2em” and that was accepted as a valid answer. However, since the instructions say “Add 2em of padding ONLY to the bottom of the form” then I think “padding: 2em” is incorrect and should not have been accepted as a valid answer. (But I understand that the feasibility of fixing this may depend upon the design of how answers are parsed.)

12

This step says the following (emphasis added by me):

  • Add 2em of padding ONLY to the bottom of the form”.

I submitted “padding: 2em” and that was accepted as a valid answer. However, that should not have been accepted as a valid answer since that adds padding to all sides.
Therefore, I think this might be a design bug, allowing an incorrect submission to pass. I think that “padding: 2em” should not have passed the test even though it does work.

But also to note, this “bug” might be deemed by devs to be acceptable behavior by the curriculum since the lessons tend to check to see if the desired behavior was included even if additional behaviors are also added.

13

Please do not make duplicate topics.

This is not a bug, again, sometimes the browser corrects slightly malformed HTML.

14

This has nothing to do with malformed HTML/CSS corrected by the browser. This was a syntactically correct CSS which contained an incorrect answer, but was accepted as a correct answer.

I submitted

  • padding: 2em

and that was accepted as a valid answer. However, that should not have been accepted as a valid answer since that adds padding to all sides. The correct answer is

  • padding-bottom: 2em

Therefore, I think this might be a design bug, allowing an incorrect submission to pass. I think that “padding: 2em” should not have passed the test even though it does work.

15

Misread, woops. I don’t think it’s a BUG in all caps, but it’s a little confusing, sure. You can make a GitHub issue if it’s important to you.

16

I don’t know how to navigate github (not yet, I’ll get there eventually), and didn’t want to muck things up over there as a newbie, so I figured submitting things here first might be better to get my feet wet and better understand the community and what’s appropriate where.

This might be the same case that @Sky020 pointed out here in which the curriculum system allows some submissions that include CORRECT_BEHAVIOR + ADDITIONAL_STUFF.

17

You don’t have to make a GitHub issue, but that’s where you’d put it if you want it changed.

19

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