Design a Registration Form - Step 27

HTML-CSS
1

Tell us what’s happening:

Bonjour, je suis bloqué sur ceci :
Read our terms and conditions

I accept the terms and conditions

il me dit a chaque fois vous devriez avoir un élément juste avant le texte a label Read our terms and conditions. Pouvez vous m’aider SVP?

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

<!-- User Editable Region -->

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

<!-- User Editable Region -->


    <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/148.0.0.0 Safari/537.36 Edg/148.0.0.0

Challenge Information:

Design a Registration Form - Step 27

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-registration-form/60fab8367d35de04e5cb7929.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @juan.3594,

In the original starting code for this step, there was an empty fieldset element above the label element. Your code is correct but it should not have been written inside the fieldset element. To fix this, please reset this step, as follows, and try again.

It looks like you may have changed the starting code in areas you were not asked to change, which will cause the tests to fail. Please click the reset button to restore the original code and try again.

image

Happy coding

3

je l’ai réinitialisé et en faisant ceci 

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

</fieldset> il me remet la même chose "Vous devriez avoir un élément juste avant le texte.`alabelRead our terms and conditions.`
4

I think there may have been a miscommunication. Basically, your new code for this step should NOT be inside the fieldset element.

If you need more help, please post all of your code, formatted as follows:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

5

Voici mon code entier :

 <!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" value="personal" checked /> Personal</label>
      <label for="business-account"><input id="business-account" type="radio" name="account-type" value="business" /> Business</label>
    </fieldset>
      
    <fieldset>
  <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/">Read our terms and conditions</a>
  </label>

    </fieldset>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>
6

This is the starting code for this step:

image
image945×105 10.2 KB

You have written your new code inside the fieldset element. Instead your new code should be written below the empty fieldset element.

That is why I suggested you reset this step and try again.

I hope you understand…

7

Je l’ai refait de nouveau telle que vous m’avez stipulé en faisant ceci `

Read our terms and conditions I accept the terms and conditions ` et je tombe toujours sur le même message Vous devriez avoir un élément juste avant le texte.`a` `label` `Read our terms and conditions`
8
Read our terms and conditions I accept the terms and conditions
9 
 <fieldset></fieldset>

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

The anchor element should be before the label element the way you coded it originally. The only reason the original code did not pass the tests was because you wrote it inside the fieldset element.

11

Merci beaucoup pour votre aide ça a marché.