HTML5のプレースホルダの属性についての考察

HTML 5の私のお気に入りの新しい作品の1つは、追加する機能です。 プレースホルダーテキスト 簡単に。プレースホルダテキストは、入力フィールドに表示されるグレーのテキストで、そのフィールドにどのような入力が想定されているかについてのヒントをユーザに提供するために使用されます。ユーザーが入力を開始したら 入力 このテキストは消えます.

昔は、これを普通にやっています JavaScriptを使って, 次のように;

このやり方に問題はありませんが、HTML5のほうが簡単です。.

HTML5は論理名を持つ新しい属性を導入しました。 プレースホルダー. これが一例です。

ブラウザで表示すると、入力は下のようにグレーのテキストになります。

注意すべきことがいくつかあります。仕様によると、 プレースホルダー 属性をaの代わりに使用しないでください。 ラベル また、この属性はにのみ適用されるべきであることも示唆されています。 入力 テキストを必要とする型. テキスト, パスワード, サーチ, Eメール, テキストエリア そして 電話.

追加中 プレースホルダー に 入力 タイプ： 無線 そして チェックボックス 違いはありません.

プレースホルダーとCSS

さらに、CSSを介してプレースホルダーのテキストをスタイル設定することも可能ですが、これを書いている時点ではまだFirefoxとWebkitのブラウザだけに制限されています。.

次の例は、WebkitとFirefoxの両方で、プレースホルダーテキストを緑色に変更する方法を示しています。

 input ::  -  webkit-input-placeholder 色：緑;入力：-moz-placeholder 色：緑;  

ただ覚えておくと :: - webkit-input-placeholder そして ：-moz-placeholder テキストにのみ影響し、並行して書くことはできません.

 input ::  -  webkit-input-placeholder、入力：-moz-placeholder 色：緑;  

このコードは機能しません.

属性セレクタ

CSS3はまた、この属性をサポートするようになりました。 [プレースホルダー] 属性セレクタ

 input [placeholder] border：1ピクセル緑色の点灯;  

上記の例では、すべてを選択します。 入力 それは持っています プレースホルダー 属性を設定して境界線を緑色に変更します。.

ブラウザの互換性

この新しいHTML 5機能は驚くことに古いブラウザではサポートされておらず、現在以下で完全にサポートされているだけです。 Firefox 4以降、Chrome 4以降、Safari 5以降、Opera 11.6 そして Internet Explorer 10 （まだ正式にはリリースされていません）.

プレースホルダポリフィル

それにもかかわらず、古いブラウザでプレースホルダを表示する必要があるが、それでも使用できる場合は プレースホルダー 属性、Polyfillsを使用できます。がたくさんあります プレースホルダポリフィル ただし、この例ではPlaceMe.jsを使用します。

PlaceMe.js, 上記のコードスニペットからわかるように、jQueryに依存しています。たとえば、Internet Explorer 9で表示すると、すべての入力にプレースホルダのテキストが表示されます。.

• デモを見る
• ソースをダウンロード

最終的な考え

の HTML5プレースホルダー 属性を使用すると、プレースホルダテキストを簡単に追加できます。 JavaScriptとHTML5のどちらを使用するかを選択するのは、Web開発者および設計者次第です。.

あなたが古いブラウザをサポートするためにPolyfillsとjQueryを使うことが冗長であると考えるならば、JavaScriptは明らかにその仕事により適しています。あなたが平和的に古いブラウザを無視することができればHTML5のプレースホルダーを使用することはおそらくよりよい方法です.