Learn HTML Forms by Building a Registration Form - Step 21

HTML-CSS
1

I tried to add the required attribute to the one of first input and it didn’t work, is there a certain placement where the “required” attribute is suppose to go?>

<!-- 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'>

<!-- User Editable Region -->

      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" /></label>
      </fieldset>
      <fieldset></fieldset>
      <fieldset></fieldset>
      <input type="submit" value="Submit" />

<!-- User Editable Region -->

    </form>
  </body>
</html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Safari/605.1.15

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 21

2

Welcome to the forum @amidang

The attribute needs to go in all the input elements shown in the code block below.

Happy coding

3

Hello!
You are supposed to add the required at the end of all four of your input elements in your first fieldset.
So in your first input element add the required as well as your second, third and fourth input element.

4

No, you can put the required attribute anywhere in your opening tag as lone as it stands apart from the rest of your attributes and their values.

You could do it like this:

<input id="last name" type="text" required/>

Or like this:

<input id="last name" required type="text"/>

It will not affect the functionality of your code.

In the code snippet you submitted none of the inputs have the required attribute.

5

Keep trying! =)

I only learned html and css fairly recently. Just persist and it will click. the JS is harder.

6

There is an error in this step by fCC because the instructions say to place the [required] attribute into the first [fieldset], but the challenge does not work unless you put [required] into every one.