Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Organizing Forms Add Fieldsets and Legends

Posted by James Wilson
James Wilson
1,678 Points

Create a fieldset element that wraps the name and Email fields.

I cannot figure it out.

index.html 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

   <form action="index.html" method="post">

    <h1>Sign Up</h1>



     <legend><span class="number">1</span> Your basic info</legend> 
      <fieldset>
      <label for="name">Name:</label>
       <input type="text" id="name" name="user_name">
         <label for="mail">Email:</label>
       <input type="email" id="mail" name="user_email">
        </fieldset>
      <label for="password">Password:</label>
       <input type="password" id="password" name="user_password">


     <fieldset>

      <legend><span class="number">2</span> Your profile</legend>

       <label for="bio">Biography:</label>
       <textarea id="bio" name="user_bio"></textarea>

    </fieldset>

       <button type="submit">Sign Up</button>

      </form>  


  </body>
</html>

3 Answers

Christopher Loyd
PLUS
Christopher Loyd
Courses Plus Student 5,806 Points
Christopher Loyd
Christopher Loyd
Courses Plus Student 5,806 Points

Your first fieldset element - your legend should be inside it, you have it outside it.

Like so: 

      <fieldset>
        <legend><span class="number">1</span> Your basic info</legend> 
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">
        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email">
      </fieldset>
James Wilson
James Wilson
1,678 Points

thank you

James Wilson
James Wilson
1,678 Points

i did that but it didnt work

Christopher Loyd
Christopher Loyd
Courses Plus Student 5,806 Points
Christopher Loyd
Christopher Loyd
Courses Plus Student 5,806 Points

James, if this is for the challenge, you shouldn't have the label and input for the password. It's not included in the original code for the challenge, nor is it any part of the challenge.

I went back through the challenge and completed all 4 tasks, didn't see either input or label for the password.

Casey Abbott
Casey Abbott
7,845 Points
Casey Abbott
Casey Abbott
7,845 Points

"You need to add a <fieldset> element within the <form> element." Is the error message. and what we wrote is within the form element so I don't get this at all. I have looked through all of the lesson code I did and it works in real life so...

James Wilson
James Wilson
1,678 Points
James Wilson
James Wilson
1,678 Points

It wasnt right again. I tried it Christopher

Christopher Loyd
Christopher Loyd
Courses Plus Student 5,806 Points
Christopher Loyd
Christopher Loyd
Courses Plus Student 5,806 Points

Is this for the first task in the challenge? It looks like you've just copied and pasted what was in the project files. If so, the completed code should look like this: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML Forms</title>
  </head>
  <body>

    <form action="index.html" method="post">
      <fieldset>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name">
      <label for="email">Email:</label>
      <input type="email" id="email" name="user_email">
      </fieldset>
      <label for="comment">Comment:</label>
      <textarea id="comment" name="user_comment"></textarea>
      <button type="submit">Submit Comment</button>
    </form>

  </body>
</html>