Learn HTML Forms by Building a Registration Form - Step 29

HTML-CSS
1

Tell us what’s happening:

Hello. I’m not sure what I have missed. After reading through others with an issue on the step I thought I had figured out my issue; however, I am having syntax issues on my second .

My code is as such thus far:

 <label><input id="personal-account">Personal <input for="personal-account" type="radio" name="account-type" checked /> </label>
        <label><input id="business-account">Business <input for="business-account" type="radio" name="account-type" /> </label>

I guess my question is, what is the proper syntax for this order, and is order the issue or is it more in the spacing and general writing?

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>
        <legend>Account type (required)</legend>
         <label><input id="personal-account">Personal <input for="personal-account" type="radio" name="account-type" checked /> </label>
        <label><input id="business-account">Business <input for="business-account" type="radio" name="account-type" /> </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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 29

2

This has to do with the placement of the attributes. The for attribute should go in the label element and the id attribute to the input tags, values to both of the attributes should be the same, that way, you’ll have made a connection between the input tag and the label element.
I also noticed you added extra input tags, which were not required. Use the provided tags

1 Like
3

Ohhhhh. Thank you for the guidance.

A quick follow-up question: is that a building block principle that I’ll always use(a steadfast rule) or does that change depending on the input?

1 Like
4

Yeah, as long as you need to connect the two, you’ll always do that. It is also an accessibility best practice.

1 Like