Usability regarding input fields with place holders

Question

I have a simple question regarding usability.

Which is the preferred way of having place holders (empty texts) in text inputs:

A) Have them visible until user focuses the field.

B) Have them visible until user types the first character.

Most websites use the option A, probably because it's easier to do (just listen to focus event and clear the previous place holder text and reset text color to black).

However, I've seen option B also being used in a few random places. The way I see it, the pros are:

A

• Simple to implement
• Clear to the user

B

• If you navigate a form using tab key, users typically press the tab before reading the next field in which case the empty text is already gone and the user has harder time knowing what to type. They would need to shift-tab to get the empty text back, then read it, and tab to it.

Another question: if the option B was used, should the empty text come back after the user removes the text (and still has the focus)?

Answer 1

i would certainly make input fields like twitter login page.

it is like your B way and has a very nice animation.

Answer 2

In the spirit of usability and accessibility, you should have a <label> that is always present. In my opinion the placeholder text is most effective when used as a helper, or indication of formatting, etc.

For example, you could have a signin form that requests username and password where the username is an email address. The placeholder could then be a sample email address that is cleared on focus (but the 'username' label is still visible).

Example (using HTML5 placeholder attribute):

<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="myemail@email.com" />