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

web開発

2017/03/28

web開発

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に設定するテキストは、ユーザーが何を記入すれば良いのかが一目でわかるようなものを心がけましょう。

udemyでは、HTML/CSS初心者でも学習できるWeb開発講座を用意しています。

30万人以上が学習している人気講座なので、ぜひ受講してこれを機にWeb開発ができるようになってみませんか?

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事