# Learn HTML Forms by Building a Registration Form - Step 31

**URL:** <https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243>\
**Category:** Curriculum Help\
**Created:** [February 22, 2024, 2:39am UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243 "2024-02-22T02:39:00Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![ScottKrukowski](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/scottkrukowski/32/352581_2.png) [@ScottKrukowski](https://forum.freecodecamp.org/u/ScottKrukowski)\
**Post date:** [February 22, 2024, 2:39am UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/1 "2024-02-22T02:39:00Z")

</div>

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

```html
<!-- 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>

```

```css
/* 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

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-31)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [February 22, 2024, 2:39am UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/2 "2024-02-22T02:39:00Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![OpeRichards](https://avatars.discourse-cdn.com/v4/letter/o/cab0a1/32.png) [@OpeRichards](https://forum.freecodecamp.org/u/OpeRichards)\
**Post date:** [February 22, 2024, 4:19am UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/3 "2024-02-22T04:19:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ScottKrukowski](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/scottkrukowski/32/352581_2.png) [@ScottKrukowski](https://forum.freecodecamp.org/u/ScottKrukowski)\
**Post date:** [February 22, 2024, 9:52pm UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/4 "2024-02-22T21:52:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Teller](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teller/32/412338_2.png) [@Teller](https://forum.freecodecamp.org/u/Teller)\
**Post date:** [February 22, 2024, 10:04pm UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/5 "2024-02-22T22:04:19Z")

</div>

Hi @ScottKrukowski

I edited your code for readability.

> [@ScottKrukowski](#):
>
> ```auto
> <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
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![ScottKrukowski](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/scottkrukowski/32/352581_2.png) [@ScottKrukowski](https://forum.freecodecamp.org/u/ScottKrukowski)\
**Post date:** [February 22, 2024, 11:23pm UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/6 "2024-02-22T23:23:46Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![Cody\_Biggs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cody_biggs/32/358652_2.png) [@Cody\_Biggs](https://forum.freecodecamp.org/u/Cody_Biggs)\
**Post date:** [February 23, 2024, 12:43am UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/7 "2024-02-23T00:43:52Z")

</div>

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](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (').

---

<div class="post-metadata">

**Author:** ![Teller](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teller/32/412338_2.png) [@Teller](https://forum.freecodecamp.org/u/Teller)\
**Post date:** [February 23, 2024, 5:18am UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/8 "2024-02-23T05:18:41Z")

</div>

You pasted the `anchor` element over the `for` attribute value.

This is the code you posted earlier.

> [@ScottKrukowski](#):
>
> ```auto
> <label for="terms-and-conditions">
> 
> *anchor element*
> <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 
> 
> *link text*
> terms and conditions
> 
> </label>
> 
> ```

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.

---

<div class="post-metadata">

**Author:** ![OpeRichards](https://avatars.discourse-cdn.com/v4/letter/o/cab0a1/32.png) [@OpeRichards](https://forum.freecodecamp.org/u/OpeRichards)\
**Post date:** [February 23, 2024, 5:22am UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/9 "2024-02-23T05:22:26Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![OpeRichards](https://avatars.discourse-cdn.com/v4/letter/o/cab0a1/32.png) [@OpeRichards](https://forum.freecodecamp.org/u/OpeRichards)\
**Post date:** [February 23, 2024, 5:25am UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/10 "2024-02-23T05:25:19Z")

</div>

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

```plaintext
MOD EDIT: SOLUTION REMOVED

```

---

<div class="post-metadata">

**Author:** ![ScottKrukowski](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/scottkrukowski/32/352581_2.png) [@ScottKrukowski](https://forum.freecodecamp.org/u/ScottKrukowski)\
**Post date:** [February 23, 2024, 2:13pm UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/11 "2024-02-23T14:13:21Z")

</div>

> [@OpeRichards](#):
>
> `<label for="terms-and-conditions"><input id="terms-`

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.

---

<div class="post-metadata">

**Author:** ![OpeRichards](https://avatars.discourse-cdn.com/v4/letter/o/cab0a1/32.png) [@OpeRichards](https://forum.freecodecamp.org/u/OpeRichards)\
**Post date:** [February 23, 2024, 3:54pm UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/12 "2024-02-23T15:54:00Z")

</div>

Happens sometimes.

Enjoi .

---

<div class="post-metadata">

**Author:** ![c.bryanonyebuagu](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/c.bryanonyebuagu/32/326034_2.png) [@c.bryanonyebuagu](https://forum.freecodecamp.org/u/c.bryanonyebuagu)\
**Post date:** [March 17, 2024, 7:07pm UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/13 "2024-03-17T19:07:52Z")

</div>

> [@OpeRichards](#):
>
> ` `

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

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [September 16, 2024, 7:08am UTC](https://forum.freecodecamp.org/t/learn-html-forms-by-building-a-registration-form-step-31/674243/14 "2024-09-16T07:08:01Z")

</div>

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