Learn HTML Forms by Building a Registration Form - Step 28

HTML-CSS
1

Tell us what’s happening:
I don’t understand why and how to write “for” with the input.
Describe your issue in detail here.

Step 28

Follow accessibility best practices by linking the input elements and the label elements in the second fieldset.

Personal Account
Business Account
I accept the terms and conditions

Use personal-account, business-account, and terms-and-conditions as values for the respective id attributes.

Test

Sorry, your code does not pass. Hang in there.

Hint

The first label element should have a for attribute with a value of personal-account.
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 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>
        <label><input type="radio" name="account-type" id="personal-account" /> Personal Account</label>
        <label><input type="radio" name="account-type" id="business-account" /> Business Account</label>
        <label><input type="checkbox" required id="terms-and-conditions" /> I accept the terms and conditions</label>
      </fieldset>
      <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/106.0.0.0 Safari/537.36

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

Link to the challenge:

2

You can find more explanation about for attribute in this link. You don’t need to remember it or understand all the details.

The concept is when you want to connect label element with input element you need the same name of the value for both

1 Like
3

Very helpful. I solved the problem with this, thank you :slight_smile:

4

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