Learn HTML Forms by Building a Registration Form - Step 29

Tell us what’s happening:
I don’t understand wether this code need id attribute or for attribute because it’s state that it’s need id attribute at first then it’s state that it want for attribute

Your code so far

/* file: index.Ext.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><input type="radio" name="account-type" checked for="personal-account"/> Personal</label>
        <label><input type="radio" name="account-type" for="business-account"/> Business</label>
      </fieldset>
      <fieldset></fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
/* file: styles.Ext.css */
<!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><input type="radio" name="account-type" checked for="personal-account"/> Personal</label>
        <label><input type="radio" name="account-type" for="business-account"/> Business</label>
      </fieldset>
      <fieldset></fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Your mobile information:

SM-T733 - Android 12 - Android SDK 31

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

Link to the challenge:

Hello!

It requires both the for attribute and the id attribute.

You have added the for attribute.
But, it belongs in the opening label tag.
Then, the input element requires and id attribute be added to exactly match the for attribute value.
Examples below.
for=“good-attempt”
id=“good-attempt”

Please do not use those values? I just wanted to set an example of each for you.

You could move the for attribute and value from the input to the opening label and then just add the id to the input.

Keep up your good progress!

1 Like

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

Use personal-account, and business-account as values for the respective id attributes.
its kind of like what you did in the 1st fieldset

for=“personal-account”
id=“personal-account”
for=“business-account”
id=“business-account”

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