HTML5からの追加要素placeholderを利用して入力フォームに入力補助を設定しよう

HTML5から新しく追加された属性のひとつであるplaceholder。
placeholderはinputやtextareaで表示される入力フォームの空白部分に、あらかじめ文字を入力しておくことで、ユーザの入力補助として使用されます。

placeholderによってあらかじめ設定した文字は、実際に入力フォームに文字が入力されると消えます。また、文字が未入力のときにplaceholderで設定した文字がフォームから送られることはありません。
placeholderは以下の属性で使用可能です。

使い方は各属性の中にplaceholderを入れてあげるだけなので簡単です。

/*input typeに使用*/
<input type="text" placeholder="キーワードを入力してください">

/*textareaに使用*/
<textarea placeholder="300文字以内"></textarea>

サンプルページを表示

placeholderはFirefoxとChromeには対応していますが、IEが10以上の対応なので使用には注意が必要です。
jQuery plugin「ah-placeholder.js」を使うことでIE9以下でも対応可能になります。

ah-placeholder.jsに関しては以下のサイトが参考になると思うのでメモしておきます。