Learn HTML Forms by Building a Registration Form - Step 55

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Hi, I confuse which element i need to adjust ? the ‘fieldset’ element or the input[type=“submit”] to adjust the min-height:300px? and margin top and bottom are both 1em?
"Lastly, for the submit button, you want to separate it from the fieldset above, and adjust its width to never be below 300px.

Change the margin property to include 1em on the top and bottom, and set the width as described above."

Hint

You should not change the width property. Use the min-width property.
Your code so far

/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <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 action='https://register-demo.freecodecamp.org'>
     <fieldset>
       <label>Enter Your First Name: <input type="text" name="first-name" required /></label>
       <label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
       <label>Enter Your Email: <input type="email" name="email" required /></label>
       <label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
     </fieldset>
     <fieldset>
       <label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
       <label><input type="radio" name="account-type" class="inline" /> Business Account</label>
       <label>
         <input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
			  </label>
     </fieldset>
     <fieldset>
       <label>Upload a profile picture: <input type="file" name="file" /></label>
       <label>Input your age (years): <input type="number" name="age" min="13" max="120" />
			  </label>
       <label>How did you hear about us?
         <select 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>Provide a bio:
         <textarea 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;
}

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:0 auto;
 height: 2em;
 font-size: 1.1rem;
 background-color: #3b3b4f;
 border-color: white;

 
}


   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

2

The input[type="submit"] element.

The code you are working on is the code after the challenge text. It is the code that has a white background and where the cursor is active initially.

1 Like
3

Thanks, I got it and passed to next challenge.

4

Hello,
I got the width part, that’s no issues.

But, I’m still not understanding the how are you changing the margin to 1em for the top and bottom?

Thank you!

my code is the below. I still receive the same hint:
You should use the existing margin property to include 1em on the top and bottom.

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

5

Use the original margin property and set the top/bottom but keep the left/right at its original value of auto.

You can set all four using just the margin property.

margin: top right bottom left;

Or

margin: top/bottom right/left;

For example, 10px top/bottom and 20px right/left.

margin: 10px 20px;

The starting code has this:

margin: 0 auto;

Use that to set the top/bottom to 1em and keep the right/left at auto.

6

just like this ? I am still lost idk what I am doing wrong “margin: top bottom /right left:
0 auto, 1em;”

7

Just change the 0 to 1em in the starting margin code.

8

Hi, You need to add this again :
margin: 0 auto;
then this problem will solve, you can try it!

9

Thanks lads, I figured it out in a very odd way.
Orvin - what everyone is telling you is the following code. Let me know if it works for you.

If posting my code violates any kind of rules please let me know.

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

yep I figured it out shortly after still thanks for answering.

11

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