【html5】placeholder属性（とりあえず入れてみよう）

Category html5 2012/06/15

HTML5にはplaceholder属性という属性があります。今から入れるようにして損はないと思います。

こんな感じでセットします。

記述例

<input type="text" name="company" value="" placeholder="例) 株式会社ソフテル">

<textarea name="memo" placeholder="なにか疑問点があればお書きください。"></textarea>

動作例

対応しているブラウザでは、上の動作例で見えますが、placeholder属性の文字列がうっすら表示されます。

入力をすると消えます。

valueではないのでsubmitされることもありません。

文字の色などは以下のようにCSSが適用できます。

/* webkit */
::-webkit-input-placeholder {
    color:    #999;
}

/* firefox */
:-moz-placeholder {
    color:    #999;
}

IEは10からの対応だそうですが、現状無視されるだけです。

IE9まででも同様に表示させたい場合は、javascriptで対応させることになります。

以前のChrome（16で確認）では入力フォーカスが当たったときにplaceholderが消えていたのですが、19では、文字が入力されるまで表示されるようになっていました。さりげないですがよい変更だと思います。

参考