はじめに

前回の記事でJavascriptを用いて、テキストエリアの初期値をクリックで消す方法を見てみましたが、HTML5で同じようなことができます。というか、こっちのほうが楽なのに、こっちを後に知るという…笑

Contents

placeholder属性

テキストエリア内に初期値を設定し、入力で消える、ということをするためには、input要素のplaceholder属性を使います。
このブログではWordPressのテーマをダウンロードして使っているので気付いてませんでしたが、実はここの検索フォームもplaceholder属性で「Search the Site…」と設定してあります。

注意点としては、HTML5なので

IEに対応してない

ということです。この点気にしないならば使い勝手がよさそうですね！

それでは、サンプルとそのコードを見てみましょう。

完成サンプル・実装コード

↓サンプル↓

↓実装コード↓

<input type="text" placeholder="ここに入力">

非常に簡単ですね！笑
今後はこちらを使っていきます。

Javascriptでやる場合はこちらの記事を参考にしてください。

参考サイト