はじめに
前回の記事でJavascriptを用いて、テキストエリアの初期値をクリックで消す方法を見てみましたが、HTML5で同じようなことができます。というか、こっちのほうが楽なのに、こっちを後に知るという…笑
Contents
placeholder属性
テキストエリア内に初期値を設定し、入力で消える、ということをするためには、input要素のplaceholder属性を使います。
このブログではWordPressのテーマをダウンロードして使っているので気付いてませんでしたが、実はここの検索フォームもplaceholder属性で「Search the Site…」と設定してあります。
注意点としては、HTML5なので
IEに対応してない
ということです。この点気にしないならば使い勝手がよさそうですね!
それでは、サンプルとそのコードを見てみましょう。
完成サンプル・実装コード
↓サンプル↓
↓実装コード↓
<input type="text" placeholder="ここに入力">
非常に簡単ですね!笑
今後はこちらを使っていきます。
Javascriptでやる場合はこちらの記事を参考にしてください。
参考サイト
- HTMLクイック リファレンス「<input placeholder>」
1 Pingback