Add support for HTML5 placeholder attribute

You could probably achieve this via some custom javascripting, but be careful that you don't remove the value if it's different from the original default (that is, if the user clicks on the field again after changing the value).

What you're describing isn't typical use of the "default" field, it's what HTML5 would call a "placeholder" attribute. Unfortunately placeholder attributes aren't supported in older browsers (IE8 and before), so you might want to look into these projects:

http://drupal.org/project/compact_forms
http://drupal.org/project/hint
http://drupal.org/project/placeholder

Note that I don't think any of these project have any direct support for Webform module.

I'm changing this to a feature request. I'd love to get some kind of built-in support for placeholder, though with browser support so limited at this point, I feel like we'd have to depend upon another module or JS library (possibly bundled) to provide backwards compatibility.

It looks like http://drupal.org/project/html5_tools already supports #placeholder, but I'll need to look into it further. There's also a good list at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills of libraries that support the placeholder attribute if we're looking into bundling one.

...spam :/

I created a patch to accomplish this. On both the email and textfield component forms, it adds a field under the width field. It specifies the #parent for those fields as ('extra', 'attributes', 'placeholder'). I updated the respective default values to also include this data under 'attributes'. Drupal automatically renders attributes as-is, so it worked perfectly fine in my current instance.

FYI: my ultimate goal was to create a form in a block that would allow someone to sign up for a newsletter, without leaving the page. With a combination of Webform, Webform AJAX, Rules, Simplenews, Webform Rules, I was able to do this. The only PHP code I wrote was this patch. Kinda cool in my opinion.

Thanks @celstonbg! It'd be nice to ensure browser compatibility here. The placeholder attribute isn't supported in IE7/8/9 as far as I know, which is still currently about 30-40% of all browser usage.

@quicksketch, as it's been explained to me by my front-end partner, if the placeholder attribute is present and the browser doesn't support it (IE7, IE8, etc.), it's simply ignored and there are no adverse effects. So while I can appreciate the need to support those browsers, this patch also doesn't break them.

On a case by case basis, the developer/site builder could choose to incorporate a "shim" that would implement support for this feature through jQuery or other means.

https://github.com/danielstocks/jQuery-Placeholder
http://drupal.org/node/1077878
https://github.com/bevanr/jquery-html5-placeholder-shim

Your call but we personally need this feature for the current sites we're working on.

On a case by case basis, the developer/site builder could choose to incorporate a "shim" that would implement support for this feature through jQuery or other means.

Right, yes I agree that many (even "most") browsers already support placeholders and they don't do any harm in older browsers. A shim indeed would fix the problem for the older browsers also. However as the maintainer of Webform, I'm *very* aware that bundling a feature that only worked in some browsers but not others would not only be very confusing to a lot of users, but also generate a lot of support requests here in the Webform queue. If we can detect and use available shims and not add our own, I think that would be great; but if we're going to add a feature it needs to work reliably in all current browsers.

I had to tackle a similar problem dealing with an exposed filter on a View. While digging, someone suggested the HTML5 Tools module which depends on the Elements module:

http://drupal.org/project/elements

It adds support for the "#placeholder" FAPI element on textfields. What would say if I augmented my patch to leverage this approach but only offered the configurable element in Webform admin UI if that module was enabled? That way the feature is supported but only for those who have the necessary requirements met.

Thoughts?

Added patch against 7.x-4.x-dev version, for textfield, textarea and email components.

Thanks! This looks pretty good. I'm back-pedaling on my previous statement:

I'm changing this to a feature request. I'd love to get some kind of built-in support for placeholder, though with browser support so limited at this point, I feel like we'd have to depend upon another module or JS library (possibly bundled) to provide backwards compatibility.

However I do feel like at least we should find a module that provides a shim for the placeholder attribute and make a note of it at least in the README.txt or project page. Are there any good candidates for this?

I'm getting "Notice: Undefined index: placeholder in _webform_edit_textfield() (line 75 of /Users/ME/Sites/MYSITE/sites/all/modules/webform/components/textfield.inc)." But I cannot see why it's saying that, and everything appears to be working. Any thoughts?

Nate,
I haven't used this module, but it looks straightforward: http://drupal.org/project/remysharp_html5shim

I like the approach of documenting the dependency without requiring another module.

Hope this helps,
Joy

remysharp_html5shim only makes IE detect new HTML5 elements like <article>, <footer>, <figcaption>, etc. Surely there are projects out there that add support for the placeholder attribute too.

Doh! I should have read more carefully! :-/
I need this for an upcoming project, so I'll do some more research and post back with an actual solution.

Just wanted to chime from the front-end developer perspective: it is a bit difficult to track down exactly where/how to add the placeholder attribute. You kind of have to get your head around drupal hooks/templates/render arrays before you can add this attribute, which keeps people busy digging through forums/documentation and generally frustrated with drupal ... but that's another issue ... It would be really cool and if for the component settings there was a little 'advanced settings' fieldset with the option to enable the html5 placeholder attribute. I think just having that default set to OFF would avoid confusion for end-users. The word 'Advanced' would be a clear sign to leave 'as is' for end-users. Maybe add a little warning/info in the description like 'Not supported by all browsers, check out such and such modules for compatibility.' could help also ... OR maybe help front-end devs know how you're supposed to do this in a theme :)

Well, I got a little php snippet working for this in my theme and added a page to the documentation for themers: http://drupal.org/node/1995746

btw @quicksketch this is an awesome epic module! right up there with views :)

Just add this snippet to the top of webform-form.tpl.php

foreach ($form['submitted'] as $key => $value) {
 if (isset($form['submitted'][$key])) {
   $types = array('textfield', 'webform_email', 'textarea');

   if (isset($value['#type']) && in_array($value['#type'], $types)) {
     $form['submitted'][$key]['#attributes']['placeholder'] = t($value['#title']);
   }
 }
}

This patch iterates on @sokru's patch in #13. It keeps the placeholder setting closer to the surface, in $component['extra']['placeholder'] instead of $component['extra']['attributes']['placeholder']. This makes it so that the default settings are merged in for all existing components, preventing PHP notices.

However I do feel like at least we should find a module that provides a shim for the placeholder attribute and make a note of it at least in the README.txt or project page. Are there any good candidates for this?

Unbelievably, I can't seem to find a module that provides this functionality. I think the Placeholder module would be the most appropriate candidate. There is an existing issue at #1161384: jQuery Placeholder Support. There are some excellent libraries out there these days that provide shim support for placeholders. Modernizr provides a most excellent list.

Revised patch that doesn't delete the attributes array line from each of the components.

Committed to 7.x-4.x branch. Thanks @celstonbg and @sokru!

How stable is 7.x-4.0-alpha9? I'm heavily considering using it for a project I'm working on. Would seriously like placeholder usage on this large webform.