Learn HTML Forms by Building a Registration Form - Step 34

HTML-CSS
1

please i dont get this step.i dont know what to do

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>Upload a profile picture: <input type="file" /></label>
        <label>Input your age (years): <input type="number" min="13" max="120" /></label>
        <select>
         <option> </option>
          <option></option>
          <option></option>
          <option></option>
          <option></option>
        </select>
      </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/115.0.0.0 Safari/537.36 OPR/101.0.0.0

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

Link to the challenge:

2

“Nest the select element (with its option elements) within a label element”

Do you know what nesting means? Do you know how to create a label element?

“with the text How did you hear about us?. The text should come before the select element.”

Do you know how to add this text right before the select element? (It will still be inside of the label).

3

its been long i did coding thats why i am facing some difficulties.So please try to explain more

4

That’s what I’m asking, what specifically do you need to have explained? Please tell us exactly what you don’t understand. That way we don’t have to guess and explain things you already know.

5

okay im i going to create another label element then add options element to it?

6

The options are already there in the select. You are just being asked to nest the select (which includes the options) in a label element. So the only new element you are adding is a label.

7

okay please one last question im i adding the label element below or above the select element

8

“Nest the select element (with its option elements) within a label element”

You are nesting the select element within a label element. In other words, you are putting the select element inside of the label element, or “wrapping” the select with a label.

1 Like