Learn HTML Forms by Building a Registration Form - Step 53

HTML-CSS
1

Tell us what’s happening:
Stuck here, help please

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" class="inline" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
        <label for="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> 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;
}

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


/* User Editable Region */

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

/* User Editable Region */


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

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 16_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Mobile/15E148 Safari/604.1

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

Link to the challenge:

2

Try to lay it out as the above example which will make it easier to read.

The property name should be border not solid-border.

The solid is refer to the value

2 Likes
3

Mod edit: removed solution

This is the correct code

4

I have removed your solution.

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

5

Still couldn’t figure it out :pensive:

6

IMG_3463
IMG_34631242×2688 333 KB

7

Please post your new code instead of providing images. Its easier for us to copy your code and plug it into the challenge. You can post code in the forum by using the format button </> and paste your code between the lines it gives you

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

8

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

Also I doing on iPhone safari browser so it doesn’t allow to copy all content.

9

So the directions say " set their background-color to #0a0a23" Meaning that the only thing background-color should have is the color. Your current code tries to add “1px”

The next step is
" Then, give them a 1px , solid border with a color of #0a0a23"

Here you want to give the border a style of "1px solid border with a color of #0a0a23`

Giving this a look over might help you no how to do that

10

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