View source for Using @placeholder on input

==Technique Category==

[[Category:HTML5 Techniques]]

== Status==
* [https://www.w3.org/2002/09/wbs/35422/htmltechs-20120409/results#x2596 Surveyed by TF April 9, 2012]

== User agent and assistive technology support notes ==

Supported in Chrome 17, Firefox 11, Opera 11 and Safari on Windows. In Chrome 18, Firefox 13, Opera 11 and Safari on Mac OS.

Supported in Jaws 13 in Internet Explorer 9... TBC.
== Description ==

The objective of this technique is to use the placeholder attribute to assist users with data entry. The placeholder attribute is applied to the input element, and must have a value that is a short hint, word or phrase.

The placeholder attribute is not a substitute for the label element. Placeholder text can help people with cognitive disabilities see an example of the type of data they can enter. Placeholder text disappears visually when the input field is given focus, so the information is not persistent.

== Examples ==

=== Example 1: A text input field ===

The text input field in the example below is for a product search. The placeholder attribute is used to provide a helpful hint.

<code>
<label for="search">Search for a product:</label>
<input type="text" id="search" placeholder="For example apples, bread or milk">
</code>

== Related techniques ==

[http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G131 G131: Providing descriptive labels]

== Tests ==
=== Procedure ===

# Identify the purpose of the input field.
# Check the label element is present and correctly associated with the input field.
# Check the placeholder text provides additional help for completing the input field.

=== Expected results ===

* Checks 2 and 3 are true.

LW Note: Not sure whether the label check can/should be included here?