Learn HTML Forms by Building a Registration Form - Step 30

HTML-CSS
1

Tell us what’s happening

Please I want to know where I should add the label element

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

 <label for="terms-and-conditions"><input type="checkbox" id="terms-and-conditions" required/> <fieldset> 
        <label for="personal-account"> <input type="radio" id="personal-account"  name="account-type" /> Personal Account</label>
        <label for="business-account"><input type="radio" id="business-account" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions"> <input type="checkbox" id="terms-and-conditions" required /> I accept the terms and conditions</label>
        <label for="terms-and-conditions"> <input type="checkbox" id="terms-and-conditions" required /> I accept the terms and conditions</label>
      </fieldset>

<!-- User Editable Region -->

      <fieldset></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/115.0.0.0 Safari/537.36 OPR/101.0.0.0

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 30

1 Like
2

Great work! I would start with cutting the ‘fields’ tag and pasting it in front of the ‘label’ tag in the ‘User Editable Region’. After the first ‘input’ tag add the required text. After that close the text with a closing ‘label’ tag. Hope that helps.

3

which of the user editable region are you talking about?

4

Welcome to the forum @tracyvega699

Here is a screen grab of what your code looks like:
image

There appears to be a double up of check boxes and associated text.

  1. Please delete the second duplicate.
 <label for="terms-and-conditions"><input type="checkbox" id="terms-and-conditions" required/> <fieldset> 
        <label for="personal-account"> <input type="radio" id="personal-account"  name="account-type" /> Personal Account</label>
        <label for="business-account"><input type="radio" id="business-account" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions"> <input type="checkbox" id="terms-and-conditions" required /> I accept the terms and conditions</label>
        <label for="terms-and-conditions"> <input type="checkbox" id="terms-and-conditions" required /> I accept the terms and conditions</label>
      </fieldset>

<!-- User Editable Region -->

      <fieldset></fieldset>
      <input type="submit" value="Submit" />

  1. Delete the closing fieldset tag appearing above the User Editable Region comment appearing in the above code.

  2. Move the opening and closing fieldset pair to that it is above the label element.

Happy coding

1 Like
5

it still doesnt work

6

Please post your updated code so the forum can assist.

7

This code you have is correct. Copy it and reset the challenge. Then paste it in and submit.

<label for="terms-and-conditions"> <input type="checkbox" id="terms-and-conditions" required /> I accept the terms and conditions</label>
9

i dont know how to post it here

10

Type three back ticks at the top of reply,
on a new line paste your code,
on the last line type three back ticks.

Here is a single back tick: `

11

‘’’
I accept the terms and conditions
Personal Account
Business Account
I accept the terms and conditions
I accept the terms and conditions
‘’’

13

registration form

14

You dont need to use the ask for help button again because it will be a duplicate topic, and we will remove it. You can follow the below steps and please show us all your code

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

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

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').