プログラミングで飯を食え。腕をあげたきゃ備忘録!

PHP、JavaScript、HTML5、CSS3などWEB系言語を中心に基本テク、備忘録をまとめます。Android、Iphoneアプリ開発についても!

HTML5のplaceholder属性について!

サクウェブTVはコチラ↓↓↓
サクウェブTV

検索フォームや各種フォームなどで見かける入力前の薄い説明文字。

それをplaceholderと呼びます。

HTML5以前はこれをJavaScriptで実装していましたが、

HTML5にはこれを属性で指定できる機能が備わりました。

使い方は以下です。

<input type="text" placeholder="入力して下さい"/>
<textarea placeholder="入力して下さい"></textarea>

とっても簡単です。

もちろんHTML5対応でないブラウザでは使用することができませんので、どうしてもクロスブラウザを考えるならJavaScriptで実装するのが良いでしょう。

ただ、個人的な意見として、placeholderはそもそも入力の補助ですし、これがなければフォームに何を入力するのかわからないといったWEBサイトは構造上問題があります。

したがって、HTML5にplaceholder属性が入った今、わざわざJavaScriptで実装してまで実現する必要性は感じません。

まあ、JavaScriptを使っても特に難しいスクリプトにはならないですが。

案件や必要性の種類に鑑みて使い分けましょう。