Learn HTML Forms by Building a Registration Form - Step 39

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
Can someone help me with showing me visual examples if I did it right?

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" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</label>
      </fieldset>

<!-- User Editable Region -->

      <fieldset>
        <label for="profile-picture">Upload a profile picture:</label>
        <input type="file" id="profile-picture" name="profile-picture" accept=".jpg, .jpeg, .png" required>

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="18" max="120" required>

        <label for="referrer">Referrer:</label>
        <input type="text" id="referrer" name="referrer" required>

        <label for="bio">Bio:</label>
        <textarea id="bio" name="bio" rows="4" required></textarea>

        <label>How did you hear about us?
          <select>
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label>Provide a bio:
          <textarea></textarea>
        </label>
      </fieldset>

<!-- User Editable Region -->

      <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/">terms and conditions</a>
      </label>
      <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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 39

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Hi there! It appears to me that you’re very close to completing this step, but it appears you’ve added an extra attribute to some of your elements. For step 39, the instructions request that you link the label elements with their respective form elements, which you’ve performed correctly by using the ‘for’ and ‘id’ attributes. However, the ‘name’ attribute isn’t requested for this step, which may be why the challenge isn’t accepting your answer.

When you add a ‘for’ attribute to a ‘label’ element, you’re creating a link between that label and a form element by attaching a matching ‘id’ attribute, such as below:

<label for="referrer">How did you hear about us?
          <select id="referrer">

In this snippet of code, the label searches ‘for’ the ‘id’ of “referrer”, which links these two elements together. Since the ‘for’ is not looking for anything else except an ‘id’ element, the names are not needed on this section of code. I hope this helps!

If you’d like to know more about the ‘for’ attribute in html, here’s a link to the Mozilla Developer Network describing how it works and when it’s typically used: HTML attribute: for - HTML: HyperText Markup Language | MDN

4

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