WordPress.org

Make WordPress Core

Opened 11 years ago

Last modified 2 years ago

#14097 new enhancement

Idea for placeholder text

Reported by: markjaquith Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Administration Keywords:
Focuses: ui Cc:

Description

Placeholder text has a fatal flaw, in my mind: once the field is focused, that placeholder text is gone. This can be confusing, especially if you tabbed into that field or it was selected by default. You can actually use placeholder text instead of labels, for a minimalistic form layout, but only if you correct this flaw.

So here's a potential solution:

http://txfx.net/files/wordpress/labels/

It uses HTML 5's placeholder attribute (newest Safari and Chrome support it), with a jQuery plugin to handle that support for other browsers.

Thoughts?

Attachments (1)

14097.title-prompt.diff (3.4 KB) - added by shaunandrews 8 years ago.

Download all attachments as: .zip

Change History (20)

#1 @nacin
11 years ago

  • Keywords ux-feedback added

Looks cool. Didn't realize the placeholder attribute was already being supported.

#2 @scribu
11 years ago

I don't see the advantage of using the placeholder attribute if, in the end, it's going to take up as much space as a regular label would.

#3 @filosofo
11 years ago

I second what scribu says: if there's enough room for a label below the input, just put it there with CSS consistently. Then those with JS disabled and screen-readers don't miss out on labels.

Also note that the W3C HTML 5 working draft explicitly says

The placeholder attribute should not be used as an alternative to a label.


#4 @jane
11 years ago

When Mark and I first talked about this, it was re the Title field on the post editor, which uses placeholder text instead of a visual label for visual design reasons, though it has a "label" for screen readers. I need to read up on the accessibility issues, but if accessibility can be worked out, I think this approach has a lot of potential and would be worth doing some prototype screens and testing with users. I'm thinking specifically of media uploader or the Settings section.

#5 @nacin
11 years ago

  • Milestone changed from Awaiting Review to Future Release

#6 @sabreuse
8 years ago

  • Component changed from UI to Administration
  • Keywords ui-focus added; ux-feedback removed

#7 @shaunandrews
8 years ago

I worked up a concept based on the idea of keeping the label in view. When you first click on the input, the label slides off to the right, becoming slightly opaque. When you focus out of the field - and you typed something - the label disappears. If the field is left blank, the label slides back to its original place. You can see a video, and download a plugin to see it in action at: http://www.shaunandrews.com/wordpress/title-prompt/

#8 @shaunandrews
8 years ago

  • Cc shaun@… added

#9 follow-up: @alex-ye
8 years ago

In FireFox 23.0 the placeholder text is gone when the user start type into the input, It's not a big proplem for me..

#10 in reply to: ↑ 9 ; follow-up: @helen
8 years ago

Replying to alex-ye:

In FireFox 23.0 the placeholder text is gone when the user start type into the input

That's the problem, since we're using it in lieu of a label here, the user loses the cue as to what they're typing in that input.

Replying to shaunandrews:

That's pretty hot. I'm usually in the spec camp (don't use it as a substitute for a label), but this seems like a design decision that we'll just have to roll with. Code looks like it'll work out for screenreaders fine, although it'd be best to have somebody who really knows how to use one test it out.

#11 follow-up: @JustinSainton
8 years ago

Yeah, @shaunandrews plugin is quite sexy. The only thing I'd change is to have it fade out once the text is overwriting (or about to overwrite) the placeholder.

#12 in reply to: ↑ 10 ; follow-up: @alex-ye
8 years ago

Replying to helen:

That's the problem, since we're using it in lieu of a label here, the user loses the cue as to what they're typing in that input.

The placeholder attribute is not a replacement for a label,
Why not we simply show the Label in addition of the Placeboder ?!

#13 in reply to: ↑ 12 @helen
8 years ago

Replying to alex-ye:

The placeholder attribute is not a replacement for a label,
Why not we simply show the Label in addition of the Placeboder ?!

Feel free to mockup how that would look. I'm not seeing a place for it.

#14 @helen
8 years ago

#24042 was marked as a duplicate.

#15 @helen
8 years ago

lessbloat put a patch up on #24042, which I've now closed as a dupe.

#16 in reply to: ↑ 11 @shaunandrews
8 years ago

Replying to JustinSainton:

Yeah, @shaunandrews plugin is quite sexy. The only thing I'd change is to have it fade out once the text is overwriting (or about to overwrite) the placeholder.

Yup, fixed that. Working on a few more tweaks, and will submit a patch when done.

#17 follow-up: @nacin
8 years ago

The plugin by shaunandrews looks cool, but I'd also venture to guess that all of that animation is likely going to be pretty distracting after the 10th time you see it.

#18 in reply to: ↑ 17 @shaunandrews
8 years ago

The patch above ports the code over from the plugin and into core. I also updated the full screen title field/placholder to react the same way.

Replying to nacin:

The plugin by shaunandrews looks cool, but I'd also venture to guess that all of that animation is likely going to be pretty distracting after the 10th time you see it.

The animation is very quick, any quicker and its actually more distracting (I tried a bunch of timings). I aimed to get it out of your way with little annoyance. After using it for a few days, I don't even notice the animation.

#19 @chriscct7
6 years ago

  • Priority changed from lowest to normal
  • Severity changed from trivial to normal
Note: See TracTickets for help on using tickets.