Learn HTML Forms by Building a Registration Form - Step 48

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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

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

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


   **Your browser information:**

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

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

Link to the challenge:

2

Hey! its always a good idea to add a description of the problem you’re facing to the post so its easier for others to help you!

the bug is here,

first, the challenge expects you to select the element input and not the class. if you want a refresher on different kinds of selectors, this resource might help!

secondly, the border property is a combination of 3 properties:

button {
   border: "border-width"  "border-style"  "border-color";
}

Hope this helps! :smile:

3

You’ve almost got it! You just need to add the color (#0a0a23) to the border, and not the color of the text.

border: 1px solid color;
4

Hey!i think its not a good idea to provide answers to beginners. Learning to debug and solve problems is a very important skill that would only develop when we as community members help them with only hints and subtle directions! :smile

5

Hey, I agree with you in that we shouldn’t give answers. I must say though, both of our answers are pretty similar in regards to showing where the color part goes in the border property. I would consider myself pretty new to contributing to any kind of forum so I’m continually trying to make my responses more helpful for those who need help while allowing them opportunity to learn independently. Thanks for the response, I appreciate it!

6

Pointing out that they’re missing something and telling them the answer is not the same thing. freeCodeCamp has a policy for not providing answers and to be honest i was making the same mistake until a few days ago :joy: .

7

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