1. トップ
  2. Webデザイン
  3. HTML placeholderとは?初心者向けに解説&使い方もわかる!

HTML placeholderとは?初心者向けに解説&使い方もわかる!

HTMLにおけるplaceholderについて、Web開発経験のある筆者がHTML初心者向けに丁寧に解説します。

※HTMLの基本についてもう一度学習したい人は、HTMLとは何かについて解説した記事をご覧ください。

placeholderを使えば、入力欄に初期表示する内容を指定することができます。(後に詳しく解説)

本記事では、見やすい図を使いながらplaceholerについて解説していきます。

ぜひ最後まで読んで、placeholerとは何かを理解してください!

 

HTML placeholderとは?

まずはplaceholderとはどんなものかを見てみましょう。

placeholderとは、以下の画像のように、フォームなどの入力欄にあらかじめ記入されている薄い灰色のテキストのことです。

placeholderとは何か

placeholderを使うことで、ユーザーはそのフォームにどんな内容を記入すれば良いのかがわかりやすくなります。

例えば、ユーザーの氏名を漢字で記入してほしいフォームを考えてみます。

上記の画像のように、フォームにあらかじめ薄いテキストで「佐藤 太郎」のように記入されていればユーザーも迷うことなく氏名が記入できますね。

placeholderのイメージができましたか?

では、次の章からは実際にplaceholderを使ってみましょう!

 

HTML placeholderの使い方

では、実際にplaceholderを使ってみましょう!

placeholderの使い方(書き方)は以下になります。

placeholderは、HTMLにおけるinput要素やtextarea要素に対して使う属性です。

したがって、HTMLファイルで、

のようにソースコードを記述します。

では、実際にplaceholderを使ってブラウザで確認してみましょう。

新たにHTMLファイルを作成し、以下のソースコードを記述してください。

※HTMLファイルの作り方がわからない人は、HTMLファイルの作り方について解説した記事をご覧ください。

以上の結果をブラウザで確認してみます。(下画像参照)

placeholderの適応結果

氏名のフォームに薄い灰色で「佐藤 太郎」というplaceholderが適応されていることが確認できますね。

 

placeholderは、入力すべき内容が一目でわかるものにしよう

placeholderには、入力すべき内容が一目でわかるようなテキストを設定しましょう。

例えば、氏名を記入してほしいフォームには、「佐藤 太郎」のように具体的な例をplaceholderに設定するのが良いでしょう。

「ここに氏名を記入してください」のようなplaceholderだと、ユーザーはどのように氏名を記入すれば良いのか(苗字だけを記入すれば良いのか、フルネームなのかなど)がわからないので、できるだけ具体例を設定するようにしましょう。

 

いかがでしたか?

placeholderとは何か・使い方が理解できましたか?

繰り返しになりますが、placeholderに設定するテキストは、ユーザーが何を記入すれば良いのかが一目でわかるようなものを心がけましょう。

 

WEBデザイン学習者が学ぶべきスキルセット

Webデザイナーを目指すなら

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。

イラレの基本~実践的なテクニックを学ぶ

【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材

グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?

Photoshopの技術を身につける

最新Photoshop CC 23時間の動画と演習でPhotoshopの全てを完全マスター 初心者がプロを目指すコース
最新Photoshop CC 23時間の動画と演習でPhotoshopの全てを完全マスター 初心者がプロを目指すコース

初心者レベルの方でもWEB、出版などのデザイナーとしてスタートできるスキルを持つことができます。

動画編集をマスターしよう!

業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版

動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。