狼読

 
2020/05/31

[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を使ってサンプルの文字を入れておくことは入力を促すことから非常に親切なことであります。無造作に入力してくださいとおいておくより、サンプルが表示されている方が入力するユーザーも入力をしやすくなりますよね。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読