Learn HTML Forms by Building a Registration Form - Step 57

HTML-CSS
1

Tell us what’s happening:

You should use an attribute selector of input[type=“submit”] to style the submit button.
This is my method :
Input[display=“block” width=“60%”]

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" 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>

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

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


/* User Editable Region */

input[display="block"]{
  width: 60%;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 57

2

Hi there,
First of all, you have two issues in your code.

You’re using the wrong attribute selector here.

The lesson says:

Now, use the attribute selector to style the submit button with a display of block, and a width of 60%.

Based on that, you should be targeting the input element with the "submit" attribute and applying the correct display and width properties to it.

Let me know if you need help fixing it! :blush:

3

Ok I will let you know

1 Like
4 

input[type="display" type="width"]{
  display: block;
  width: 60%;
}
5

Hmm, brother, that’s a bit off.
You should not use two type attributes in your selector. Instead, just target the input with one type—"submit" in this case.

Keep it simple and it should work as expected! Let me know if you need an example. :blush:

6

I tried 5 codes but I didn’t pass to the next challenge .

7

Just stick with this one:

input[type="display" type="width"]{
  display: block;
  width: 60%;
}

But let’s fix it — you can’t have two type values like that. Just use one, and make sure it matches "submit" properly.

8

// running tests

  1. You should use an attribute selector of input[type=“submit”] to style the submit button.
  2. You should give the submit button a display of block.
  3. You should give the submit button a width of 60%.
    // tests completed
9

I need a example please.

10

what is the code you wrote?

the hint is telling you exactly what selector to use, use that one

11

I arady did the challenge
And here is the way to do it .

input[type="submit"]{
display: block;
width: 60%;
}
12

And thanks for trying to helping me .

13

Thanks you I’ve did it .

1 Like