Learn HTML Forms by Building a Registration Form - Step 31

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

I don’t quite understand how to handle the input fields. I put my text after the input element, but I’m being instructed to still put it after the input label. Also with all the attributes going on here, I’m confused on how I’d just hyperlink “Terms and Conditions” instead of the entire phrase. Please advise.

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

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 31

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Hi,
Here’s what to do:
– Put the text “I accept the terms and conditions” directly at the end of input tag and before the closing label tag.
– Next surround “terms and conditions” with an anchor tag that references the link provided in the task.

Let me if this works. Kudos

4

Thanks. This is what I have:

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

The hint keeps saying that I should put the new text (I accept the terms and conditions) immediately after the input element.

Isn’t that what I’m doing?

5

Hi @ScottKrukowski

I edited your code for readability.

You duplicated the link text.

To fix your code:

  1. place a quote mark before the closing anchor tag
  2. cut and paste the anchor element over the terms and condtions text appearing the above code block.

Happy coding

6

I’m sorry. I’m not getting this:


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

I’ve edited your code for readability. 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 (').

8

You pasted the anchor element over the for attribute value.

This is the code you posted earlier.

I added comments in the code block.

Cut the anchor element and paste it over the link text

Make sure you do not add any extra spaces.

9

Hmmm, seems you got it mixed up the more. See below what your code should look like:

      <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

Hmmm, looks like you got it mixed up the more. See below what your code should be:

MOD EDIT: SOLUTION REMOVED
11

Oh thanks so much.

I don’t know why I couldn’t figure it out. I guess all the attributes had me confused and forgetting how to do a simple again.

12

Happens sometimes.

Enjoi .

13

but this is exactly what my code looks like and it still doesn’t pass.

14

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