Learn HTML Forms by Building a Registration Form - Step 28

HTML-CSS
1

Tell us what’s happening:

Adding a legend element with text before the label elements shouldn’t be so hard. Please!

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 type="radio" name="account-type" /> Personal</label>
        <label><input type="radio" name="account-type" /> Business</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 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 28

2

Hi there,

There’s nothing wrong with your code.

It’s just there should be an empty space between the text Account type and (required) for the test to pass.

For the next time, you should copy and paste the text instead of typing it out to avoid these type of mistake.

Happy coding.

1 Like
3

hi.
your code is correct but you miss some thing to add legend before your 1st label element, & to add checked attribute in the 1st label element before Personal.
look at this example for more understanding .

<fieldset>
<label><input type="radio" name="account-type"/>Personal</label>
</fieldset>
you see after the account-type add checked attribute.
go head you will be get it.
1 Like