Learn HTML Forms by Building a Registration Form - Step 38

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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

<!-- User Editable Region -->

      <fieldset>
        <label for="profile-picture"><input id="profile-picture">Upload a profile picture: <input type="file" /></label>
        <label for="age"><input id="age">Input your age (years): <input type="number" min="13" max="120" /></label>
        <label for="referrer">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 for="bio">Provide a bio:
          <textarea></textarea>
        </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/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

:balloon: Hi, welcome to the forum!
We see you have posted some code but did you have a question?

1 Like
3

Look at how you linked the label and input together. You added a for attribute on the former and an id attribute on the latter. You need to do the same thing for the select and textarea.

4

Yes I’m sorry, first day on here and accidentally posted before I type the question in.

My issue is that it keeps saying "Sorry, your code does not pass. The second input element should have an id of “age”, and it does (doesn’t it?) but it won’t accept it. I can’t figure out where my syntax error is.

5

please reset because you have been adding input elements for this step even though none were requested.
For example, the original first two lines of code in this fieldset were

        <label>Upload a profile picture: <input type="file" /></label>
        <label>Input your age (years): <input type="number" min="13" max="120" /></label>

You should not have added to these anything except id attributes and for attributes as required (no new input elements)

1 Like
6 
  <fieldset>
        <label for="profile-picture" Upload a profile picture:/> <input id="profile-picture" type="file"></label>
        <label> for="age" Input your age (years): <input id="age" type="number" min="13" max="120"></label>
        <label for="referrer" How did you hear about us?
          <select id="referrer"
            <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 for="bio" Provide a bio:
          <textarea id="bio"</textarea>
        </label>
      </fieldset>

<!-- User Editable Region -->

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

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

8

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