[html]placeholderを使いこなしてinputに入力サンプルを入れてみよう

みなさま、placeholderってご存知ですか？入力欄を入力しようとした時に、説明やこうやって入れてくださいねっていうサンプルが書いてあって入力しようとした時に消えるといったものを見たことはないでしょうか。まさにそれのことです。inputタグに設定することであのように灰色の文字を出すことができます。

placeholderを設定しておくことは、ユーザーが入力をする際にこうやってサンプルとして入れてくださいねということを促すことができます。入力サンプルを見ながらみなさまもいろんな書類を書いたりしますよね？まさにああいったことを再現していると言っても過言ではないでしょう。

では、そんなplaceholderを使い方について今回はご紹介していこうと思います。

inputタグでテキスト入力を作ってみよう

htmlを使ったまずは、inputタグでテキスト入力を作ってみようと思います。

テキスト入力を作るためには、inputタグにて、type=”text”を指定することで作ることができます。

作成したサンプルコードとサンプル実装例は次の通りです。

<p>テキスト入力のサンプル</p>
<input type="text" name="sample_text"></input>

テキスト入力タイプのサンプル実装例

上記のようにテキスト入力ができる入力欄ができあがりました。

inputタグで作ったテキスト入力にplaceholderを設定してみよう

上述で、テキストタイプの入力欄を作成して見ました。
しかし、この状態ではこちらに何を入力すればいいのかよくわからないですね。
placeholderを使ってサンプルの状態を入れてみようと思います。

下記にplaceholderを使った場合のサンプルコードとサンプル実装例を記載しておきます。

<p>テキスト入力のサンプル</p>
<input type="text" name="sample_text" placeholder="この入力はサンプルです。"></input>

テキスト入力欄にplaceholderを使って見た

上記のように入力欄に灰色の文字で、「この入力はサンプルです」と出てくるようになりましたね。入力しようとしますと見えなくなり、文字を全て削除するとまた出てくるようになります。

まとめ

今回は、htmlを使ってinputタグのテキストタイプのものにplaceholderを使って、サンプルの文字を表示させる方法をご紹介させていただきました。placeholderを使ってサンプルの文字を入れておくことは入力を促すことから非常に親切なことであります。無造作に入力してくださいとおいておくより、サンプルが表示されている方が入力するユーザーも入力をしやすくなりますよね。