Learn HTML Forms by Building a Registration Form - Step 28

HTML-CSS
1

Tell us what’s happening:

Account type (required) Personal Business

i tried solving this but i was still asked to give an attribute of checked to the personal input, pls help out where did i get it wrong, thanks

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 <input type="checked"></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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 28

2
  • you are not supposed to “create a new input” element for “checked” attribute
  • use it on “Personal” labelled input element that’s already existing

happy coding :slight_smile:

3 
<fieldset>
<legend>Account type (required)</legend>
       <label><input type="radio" name="account-type" /> Personal <input="checked"> </label>
       <label><input type="radio" name="account-type" /> Business</label>
     </fieldset>

its not working yet… kindly help out, thanks

4

Post your updated code here using three back ticks (```) in a separate line below and above your code. Or use the option </> in the Post editor to insert back ticks automatically.

5 
 <fieldset>
<legend>Account type (required)</legend>
        <label><input type="radio" name="account-type" /> Personal <input="checked"> </label>
        <label><input type="radio" name="account-type" /> Business</label>
      </fieldset>
6

Post your code instead of text.

9 
<label><input type="radio" name="account-type" /> Personal <input type="checked"></label>
10

hey @seun1

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
11

Hi @seun1

I edited your code for readability.

I hope you added the legend element.

Please remove the second input element, as this is not required.

The checked attribute is like the required attribute. It does not follow the usual attribute structure.

Please place the checked attribute into the radio input element.

Happy coding

1 Like
12

Tell us what’s happening:

Personal

its not going and its telling me to give an attribute of checked to the personal input element which i already did

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 <input type="checked"> </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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 28

13

The checked attribute is a little different from some other attributes. You don’t use the syntax attribute="value" in this case. Instead, just add checked inside the input element tag, next to the other attributes.
You have added an unnecessary input element, so remove this and add the checked attribute to the existing input element.

14

thank you :slightly_smiling_face: it actually work

1 Like
15

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