How can I implement Stack Overflow-like watermarks in forms?

You may want to start from this: You should probably tweak the above to use JavaScript functions in such a way not to repeat your hint string three times, but I hope this can get you going in the right direction. I also noticed that the "Join Now" forms at vark.com also set the cursor position to the start of the text box instead of leaving it at the end. This can be bit tricky to make it work cross-browser, but you may want to check the solution proposed in the following article by Josh Stodola: Setting Cursor Position in a Textbox or TextArea with Javascript.

4 There's also a jQuery plugin called Clearfield which does all the work for you, and lets you leave your js outside of your HTML. – Erik Feb 14 '10 at 10:22 Thanks Daniel, this is definitely the right approach. I'm still a little lazy to cook up the code myself, so going to mark this as the answer.

If I do code it up fully, i'll post it here. – Kaushik Gopal Feb 20 '10 at 21:35.

HTML5 has the placeholder attribute, which is designed for this very task. Only WebKit (the rendering engine used in Safari and Google Chrome) supports it so far though. You’ll want a JavaScript fallback like Daniel’s for when placeholder isn’t supported.It’s trivial to check for placeholder support in JavaScript.

5 By the way, there should be a badge for mentioning HTML5 at every possible opportunity. – Paul D. Waite Feb 14 '10 at 9:23 ... and for jQuery :) ... +1: I wasn't aware of this.

– Daniel Vassallo Feb 14 '10 at 9:30 That's really the cleanest answer by far! – Olivier Feb 14 '10 at 9:32 1 Very good suggestion. The placeholder in HTML5 can be entered directly in the tag: ... However in the context of this question, the OP made a reference to the "Join Now" forms at vark.com which have a slightly different effect... Nevertheless, while the effect at vark.com is quite nice, I would probably settle for the HTML5 placeholder.

– Daniel Vassallo Feb 14 '10 at 10:00 1 Ah, yes I see — the text fades on focus, and disappears when the user actually inputs something. That’s nice. (Of course, Firefox et.Al.

Might end up implementing placeholder text like that. ) – Paul D. Waite Feb 14 '10 at 11:14.

An input field cannot have both default text and user-entered text at the same time. The only possible way to achieve exactly what you are asking is to have a background-image on the input fields with an image containing the default text you wanted to display but I highly recommend against this as two layers of text will be very confusing for the user. The most common way to achieve this (and what is done on your example site vark.com) is to use the focus method to clear out the text: $('#my_input').

Focus(function() { if($(this).val() == 'default text') { $(this). Val(''); } }); To achieve it the way StackOverflow (and Vark.com's signup form) does you can use the same method with the keydown event: $('#my_input'). Keydown(function() { if($(this).val() == 'default text') { $(this).

Val(''); } }); To achieve both your color change on focus and text clear on keydown it would be: // set text to grey on focus $('#my_input'). Focus(function() { if($(this).val() == 'default text') { $(this). Css('color', '#999999'); } }); // set text to black and clear default value on key press $('#my_input').

Keydown(function() { if($(this).val() == 'default text') { $(this). Val(''); $(this). Css('color', '#000000'); } }).

1 @Cryo: I think that the OP intended the same effect as the forms in "Join now! " at vark.com. I don't think the intention is to have overlaying text.

– Daniel Vassallo Feb 14 '10 at 7:52.

In response to @Paul's post, I noticed the behavior of the HTML5 placeholder acts strangely on my Android emulator. The placeholder looks great until you click on it and it becomes black with your cursor to the right of the word. Granted, if you type it will disappear, but it's not intuitive.So I wrote some jQuery to fix it (where's my HTML5/jQuery badge?

) $(document). Ready(function() { $('inputplaceholder'). Focus(function() { if (!$(this).val()) $(this).

Val(''); }); }).

I wrote this example which I—for lack of a better name—called persistent placeholders. It requires a little more markup, a div wrapping a label and input, but that solves a lot of other problems (like placeholders getting into your form data or password fields not working) and the actual markup is very clean to read. You end up with something like this: Username and after including the CSS and JS, it just works.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.