Placeholder attribute

Drupal 8 placeholder example.

by jacine

HTML

<h1>Placeholder attribute</h1>
<p>Specification: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-placeholder">WHATWG</a> | <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#the-placeholder-attribute">W3C</a></p>

<h2>Basic demo*</h2>
<pre>&lt;label for=&quot;search&quot;&gt;Search &lt;input type=&quot;search&quot; id=&quot;search&quot; placeholder=&quot;Enter keyword(s)&quot; /&gt;&lt;/label&gt;</pre>
<form method="post" action="#">
    <label for="search">Search <input type="search" id="search" placeholder="Enter keyword(s)" /></label>
</form>
<p><small>* Not Drupal markup.</small></p>

<h2>FAPI Usage</h2>
<pre>
$form['search'] = array(
  '#type' => 'search',
  '#title' => t('Search'),
  '#placeholder' => t('Enter keyword(s)'),
);
</pre>

CSS

body {
    font-family: sans-serif;
    font-size: 81.3%;
}
pre {
    font-family: Monaco, Consolas, monospace;
}