Learn HTML Forms by Building a Registration Form - Step 37

HTML-CSS
1

Tell us what’s happening:
I don’t know what to add and where.
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 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>
      <fieldset>
        <label>Upload a profile picture: <input id="profile-picture" type="file" /></label>
        <label>Input your age (years): <input id="age" input type="number" id="age" min="13" max="120" /></label>
        <label>How did you hear about us?
          <select input 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 input id="bio">Provide a bio:
          <textarea><input id="bio"></textarea>
        </label>
      </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/106.0.0.0 Safari/537.36

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

Link to the challenge:

2

input is an element where you put your id.

So it goes the some to other element such as select where you only need an id attribute not input id.

Make sure to understand the hint on the instruction when you fail to pass.

3

Read through a zillion times still unclear what needs to be where and how…

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

The for element is used to connect between element. for element goes to the label and id goes to the input.

You can read more about it

For example this line of code, the for attribute should placed in label element and the id attribute in input element.

Both of them should have the same value which is “profile picture” to be connected.

1 Like
5

Your first sentence was so much clearer! beautiful ! thank you ! :slight_smile:

6

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