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 form

can't figure this out. trying to add an html form to a web page and the boxes for the input only show up not the labels name and email address.

Steven Parker
Steven Parker
230,274 Points

You need to provide more information, like your actual code. Take a look at this video about Posting a Question, and perhaps also this one about sharing a snapshot of your workspace.

4 Answers

This is the code I used for the html form section of the website.

<form> <div class="form-group"> <label for="name">Name:</label> <input type="text" name="name"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="text" name="email"> </div> <div class="form-group"> <label for="message">Message:</label> <textarea name="message"></textarea> </div> <input class="button" type="submit" value="Submit" name=""> </form>

Steven Parker
Steven Parker
230,274 Points

By itself, this code displays the labels. But it could be affected by something else in the workspace. That's why sharing a "snapshot" is much more helpful in identifying problems. Also, when posting code, be sure to use Markdown formatting to preserve the code's appearance. Both of these techniques are covered in the videos previously suggested.

While this doesn't affect the display, I notice the "for" attribute is used on the labels, but the inputs don't have "id"s.. This "for" attribute is only able to direct focus to the input when it matches the "id" on an input.

I'm trying to create a landing page with an html form. The website isn't a treehouse project. I can't figure out what I'm doing wrong. What would cause the boxes for the input to show, but not the labels for the boxes like name and email? Is there an html tag I need to use? I followed a tutorial and its not working. How would I show the code I'm using that's not part of a treehouse project? thank you

Steven Parker
Steven Parker
230,274 Points

You could create a new workspace, import your code into it and create a snapshot. Also, GitHub is a popular (and free!) collaboration platform that is excellent for sharing code with TH students and non-students alike.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Website</title> </head> <body> <header id="showcase"> <h1>My Website</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, repellendus?</p> <a href="#" class="button">Read More</a></header> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium omnis, nulla ipsum dolorum facere adipisci, aut asperiores accusantium perferendis sint distinctio vero odit fugiat commodi suscipit ab, corporis nostrum veniam ducimus quas quisquam error similique! Iusto inventore sapiente pariatur magnam quas tempora earum perferendis voluptas ea saepe alias, beatae obcaecati architecto, repellat culpa excepturi aliquid sunt, quasi animi. Ipsam cumque repellendus quasi est, similique praesentium doloremque quod voluptatibus quam? Qui numquam voluptatem, beatae quasi suscipit quae, minima nemo mollitia non porro soluta incidunt, quod delectus aliquid explicabo vel doloremque dicta quisquam dolore culpa perferendis. Odit natus qui facere! Nihil, natus.</p> </div> <div class="para2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatem unde, nam repudiandae, ad id dolores optio veritatis quo, quaerat voluptates quos libero dicta pariatur dignissimos aliquid similique incidunt reiciendis beatae odit. Laborum temporibus aspernatur quaerat voluptates commodi! Eligendi quod architecto excepturi, iusto error provident eos ex facere earum nulla, assumenda vel voluptas quas. Itaque quis quaerat, nihil enim consequatur voluptates aut ducimus qui eos architecto blanditiis dolorum accusamus, aliquam. Architecto fugit iste earum itaque sequi. Quos inventore quas sed accusamus possimus nam soluta hic iure. Neque facilis quibusdam, impedit doloribus totam nisi assumenda cupiditate, dolorem hic iure itaque voluptatum.</p> </div> <form> <div class="form-group"> <label for="name">Name:</label> <input type="text" name="name"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="text" name="email"> </div> <div class="form-group"> <label for="message">Message:</label> <textarea name="message"></textarea> </div> <input class="button" type="submit" value="Submit" name=""> </form> </div>

</div>

</body> </html>

Steven Parker
Steven Parker
230,274 Points

When posting code in the forum, please use Markdown formatting to preserve the code's appearance!

But tested as shown, this code does display the labels in front of the input boxes.