Learn HTML Forms by Building a Registration Form - Step 30

Tell us what’s happening:

Hello . I hope all is well. I am currently running into an issue with this step. I am getting the error stating I should use an a element to link the terms and conditions. This is what I have written as a code so far:

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

I tried this way also…

<fieldset>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions"><link a href="https://www.freecodecamp.org/news/terms-of-service/"></link><input id="terms-and-conditions" type="checkbox" required /> I accept the terms and conditions</label>
      </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>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions"><link 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>
      </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/114.0.0.0 Safari/537.36

Challenge: Learn HTML Forms by Building a Registration Form - Step 30

Link to the challenge:

 <fieldset>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions"><a href="https://www.freecodecamp.org/news/terms-of-service/"><a/><input id="terms-and-conditions" type="checkbox" required /> I accept the terms and conditions</label>
      </fieldset>

To turn text into a link you use the anchor element (which uses the a tags). You need to wrap the text you want to turn into a link with opening and closing a tags.

P.S. You only want to turn the words “terms and conditions” into a link.

I just tried this one as well…

Just to be clear… it should look something like this<a href=""><a/> correct?

To display code in here you need to use the triple back tick method. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

I have gone back over all your posts and fixed them so your code shows. As bbsmooth has explained the way to enter code on the forum. This makes thing easier for everyone, and we can actually see what you are doing

Thank you. I am still getting the hang of that part.

Yes, you use opening and closing a tags to create a link. The link text would go between those tags.

That’s what I thought.

Here is the revised code:

<fieldset>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions"> <a href="https://www.freecodecamp.org/news/terms-of-service/</a>  <input id="terms-and-conditions" type="checkbox" required /> I accept the terms and conditions</label>
      </fieldset>

As I mentioned above, you need to wrap the text you want to turn into a link with opening and closing a tags. This means you want to wrap the text “terms and conditions” with a tags.

What are your a tags currently wrapping?

I am still trying to figure this out… current code:

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

Am I adding something in the wrong spot?

Yes. You only want the words “terms and conditions” to be a link. Look at the preview pane. Which words are currently in the link? Only the words you want to be clickable should be between the a tags.

I am still at it… I have a few questions…

Is the <a href=""> structured correct?
I am getting confused as to which “terms and conditions” to add it to because there is three of them in the passage.

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

Ahh, I see. There is only one “terms and conditions” in the content. That’s the words “terms and conditions” at the end of the text “I accept the terms and conditions”. So you want to turn that “terms and conditions” into a link. The other terms and conditions I believe you are referring to are

<input id="terms-and-conditions"

and

<label for="terms-and-conditions"

These aren’t content on the page that you can turn into a link. These are values for attributes you attach to an element.

You might want to reset the step to get the original HTML back. Then, the only change you want to make is to add an opening and closing a tag so that the words “terms and conditions” are turned into a link.

1 Like

I found out where my error was. I was putting the <a href=""> in the wrong spot.

The code should look like this:

Read question carefully, we have to attack link to specific words
Mod edit: removed solution

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like