Learn HTML Forms by Building a Registration Form - Step 37

HTML-CSS
1

Tell us what’s happening:
Hi I don’t know how to nest the textarea. It is nested to the label but It doesn’t work. It also says that textarea needs a closing tag. How do I close it if it’s within the label?

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>
        <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 textarea="text">Provide a bio:</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/111.0.0.0 Safari/537.36

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

Link to the challenge:

2

textarea is an element, not an attribute. So you want to add a new textarea element inside of the label element.

3

But How do I add the textarea inside the label element? How should it look?

4

Adding a textarea element is similar to adding a p element or label element. It has an opening and closing tag. In this case, you will nest both of those inside the label element.

5

<label <textarea <</textarea< Provide bio: </label<

Is it like this? I know some < are the opposite way they should be but I wrote it like that so you can see, but the structure is like that? Sorry I don’t understand and thank you for helping me

6

Please use one of the following methods to show us your HTML.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

7 
<label <textarea></textarea>Provide a bio:</label>

I don’t understand how to close it or where should it be?

8

Every tag needs both an opening < and a closing >. Your opening label tag doesn’t have the closing >.

The textarea element should come after the “Provide a bio:” text. Don’t you think it would look a little strange if that text was below/after a big textarea input box :slight_smile:

9 
<label>Provide a bio:<textarea></textarea></label>

Omg Thank you so much for your help, I just couldn’t see it. May be I need a break haha
Thank you again have a good day!

10

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