Learn HTML Forms by Building a Registration Form - Step 31

HTML-CSS
1

Tell us what’s happening:

I have been struggling with step 31 in building my registration form. I don’t know what’s wrong with my code and it’s been over a week now. Please help.

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

<!-- User Editable Region -->

      <label for="terms-and-conditions"><a href="https://www.freecodecamp.org/news/terms-of-service/"><input id="terms-and-conditions" type="checkbox" required>I accept the terms and conditions</label>

<!-- User Editable Region -->

      <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/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 31

2

Hi @trulytb

Only a part of the text needs to turn into a link.

image

Make sure to include the closing anchor tag.

Happy coding

3 
<label for="terms-and-conditions"><a href="https://www.freecodecamp.org/news/terms-of-service/"><input id="terms-and-conditions" type="checkbox" required>I accept the terms and conditions</a></label>
like this?
4

The closing tag is in the correct place.
The opening tag needs to go before the text terms

5 
<label for="terms-and-conditions"><a href="https://www.freecodecamp.org/news/terms-of-service/"><input id="terms-and-conditions" type="checkbox" required>I accept the <a>terms and conditions</a></label>
6

You need to move the anchor opening tag containing the href attribute from where it currently sits, and place it before the word terms

7 
<label for="terms-and-conditions" <input id="terms-and-conditions" type="checkbox" required>I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/"> terms and conditions</a></label>
8

The label opening tag is missing a closing angular bracket.

9

If I add a closing bracket to my opening label tag then it does the following:

for=“terms-and-conditions” I accept the terms and conditions

<label> for="terms-and-conditions" <input id="terms-and-conditions" type="checkbox" required>I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/"> terms and conditions</a></label>
10

I don’t think its accurate. I feel as if my head is going to explode.

11

the attribute goes inside the tag, not outside (look at the input tag for comparison)

12

I’m not following. Would you elaborate a little more?

13

the attribute for, you are saying it now appear next to the text. It must fo inside the tag

notice here how all the attributes (id, type, required) are inside the tag

14

I figured it out! thank you