Input form label alignment top or left?

Although I have researched on input form label alignment, I need solid suggestion on when to use form label alignment top and when to use left and why?

For example in the below form username and password is left align.

Here user name and password is top align.

Answer

Luke Wroblewski is the guru on this field.

He has written an entire book on web form design (Web Form Design) and he published an interesting article on the label-issue some years ago.

You can read the full article here: http://www.lukew.com/resources/articles/web_forms.html

Summarization of the article:

Should be used when:

• The time to complete a form needs to be minimized


• The data being collected is mostly familiar to users

Should be used when:

• The data being collected by a form is unfamiliar


• The data does not fall into easy to process groups


• The data being collected is mostly familiar to users [...]

The distance between the [left justified] labels and input fields is often elongated by long labels. [...] An alternative layout, right aligns the input field labels so the association between input field and label is clear.