socialmedian: Web Form Design: Labels Within Inputs

Hi there. I'm Jason, one of the founders of socialmedian.

socialmedian delivers the news, filtered by your network.

We'd love to have you join in.

You can use facebook connect to sign in.

Add News Flash

User-submitted headlines for this story

Clips

Web Form Design: Labels Within Inputs

Source: Functioning Form: Interface Design

Jun 02, 2008

Summary

I’ve written extensively about the differences between top, right, and left aligned labels on Web forms. While these considerations account for the majority of form layout options, they don’t cover all the possible ways form labels could be presented on a page. One alternative I get asked about quite regularly is labels within input fields.

In cases where available screen real estate is scant, combining labels and input fields into a single user interface element may be a tempting way to conserve precious space. However, there are a number of considerations worth calling out.

A reliable interaction for labels within forms requires the label to disappear quickly when people place their cursor into the input field so they can easily provide their answer. Otherwise, the label might stay and become part of someone’s answer.

I recently encountered this situation on LinkedIn, a professional networking site. A friend set me an invitation with a personal message stating: “Write a personal note to all the recipients you have selected.” Naturally, that wasn’t how he had ...Read the full article

Comments (0)

Add Your Comment