Learn HTML Forms by Building a Registration Form - Step 30

HTML-CSS
1

Tell us what’s happening:

Where did I go wrong with my code in the second fieldset ?

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" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>

<!-- User Editable Region -->

      <fieldset>
        <legend>Account type (required)</legend> 
        <label><input type="radio" name="account-type" checked /> Personal</label><input type="personal" id="personal - account" />
  <label><input type="radio" name="account-type" /> Business</label><input type="business" id="business-account" />
      </fieldset>

<!-- User Editable Region -->

      <fieldset>
      <label><input type="personal" id="personal-account" /></label>
        <label><input type="business" id="business-account" /></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;
}

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

Your browser information:

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

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 29

2

See buddy , Here you need to add label with it’s input.

And to connect with that you need to put for attribute and in input put id attribute

And find how you can do so ?

If you need to ask anything kindly ask me here.

Hope you understand.

1 Like
3

Hello @stanleyshiakaba !

As @be_happy stated, the input elements requires the specified id attributes and specified values to be added to them.

And, the opening label tags need the for attribute with the value match the id values of the inputs.

You could use the label and input elements in the code above where you connected the email as an example.

@be_happy has provided good guidance. If you follow it, the step should pass.

Wishing you good progress on your coding journey! :slightly_smiling_face:

2 Likes
4

Thank you for the assistance.

1 Like
5

Hello @be_happy?

The below code is not going through, where is mistake?

1 Like
6

the attribute ‘type’ only has 10 values to choose from I recommend w3s to learn all the types and to learn any information you think you are missing. ids also cannot have spaces. inputs are also self closing tags so to declare an input you would only need <input ect...> <label></label>. you do not need a closing tag for input, which is what I assume those inputs at the end are.

<input type="personal" id="personal - account" />
<input type="business" id="business-account" />
7

Hello @stanleyshiakaba !

What @be_happy was explaining is like this example.

<label for="learning"><input id="learning" type="text"> Learning</label>

I hope this clarifies it more, if you look at the for value in the label and the id value in the input, they will connect the two elements.

Here is a link to guidance and examples on how to connect the input and label elements.

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like