SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

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

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では、文字が入力されるまで表示されるようになっていました。さりげないですがよい変更だと思います。

参考

【html5】フォーム要素サンプル(input編)

関連するメモ

コメント