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 The Label Element

Posted by Ryan Boyd
Ryan Boyd
7,561 Points

How to get Label inside of form box?

Curious to know how you would place the label inside of the actual form box? For example, it would display "label" inside the box until the user clicked in the box and it would disappear. I've noticed this on some forms and was curious what the HTML syntax would look like.

Ryan Boyd
Ryan Boyd
7,561 Points

Nice, thanks Adam and Jonathan!

4 Answers

Jesse Hall
Jesse Hall
4,275 Points
Jesse Hall
Jesse Hall
4,275 Points

Everyone mentioned this but here's how it looks for those who don't want to click away from the site:

<input type="text" id="name" name="user_name" placeholder="Name">

Adam Mould
Adam Mould
5,458 Points
Adam Mould
Adam Mould
5,458 Points

Hi Ryan,

I believe you're looking for input placeholder.

Keep in mind placeholder does not work for < IE10, but there are JavaScript polyfills available such as Placeholder.js if you still wish to support older browsers.

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

The value attribute is what you're looking for.

http://www.w3schools.com/tags/att_input_value.asp

Jonathan Cousins
Jonathan Cousins
4,160 Points
Jonathan Cousins
Jonathan Cousins
4,160 Points

From Adam Mould's post:

Hi Ryan,

I believe you're looking for input placeholder.

Keep in mind placeholder does not work for < IE10, but there are JavaScript polyfills available such as Placeholder.js if you still wish to support older browsers.

The placeholder attribute is your best bet. A complete list of browsers which support the placeholder attribute.