HTMLの入力フォームにplaceholder属性を使ってユーザビリティを向上する方法を現役デザイナーが解説【初心者向け】

HTMLの入力フォームにplaceholder属性を使ってユーザビリティを向上する方法について解説します。

また、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

placeholder属性の説明と使い方

placeholder属性は、入力フォームへの入力をユーザーに促がすための補助文を表示するための属性です。placeholder属性の値は、入力フォームに補助文として表示され、その入力フォームに入力を試むタイミングで非表示になります。

このユーザーインタフェースの仕様は、ユーザーに適切な内容をあらかじめ提示することで、ユーザビリティの向上につなげられるものです。

また、placeholder属性に値を記述しなかったとしても、文法の違反とはならないため、ブラウザに不具合は滅多に出ません。

placeholder属性は入力フォームに対する付加価値の1つとして使用されています。

 

placeholder属性に入力する内容

placeholder属性を活用する場合、ユーザーが入力フォームへ適切に入力するための手助けとなるような内容を記述しましょう。

また、視覚障害者向けのブラウザでは、音声で読み上げられる対象になります。そのため、誤解を招く表現は避け、placeholder属性の値を補助文に活用することが重要です。

以下、補助文の例となります。

[例：携帯電話番号の桁推測]

090-xxxx-xxxx

 

[PR] Webデザインで副業する学習方法を動画で公開中

placeholder属性を使って入力フォームを作ってみよう

以下は、placeholder属性を使用した入力フォームのコード例です。

<form>

  <input type="search" placeholder="検索キーワードを入力" value="" >

  <input type="text" placeholder="自由入力" value="" >

</form>

このコードは下図のように表示されます。入力フォームが未入力の状態では、placeholder属性に設定した値が表示されます。

そして、入力を試みた場合、一文字でも入力があると補助文は非表示になります。

placeholder属性は、HTML5に対応したブラウザで有効になります。また、HTML5に対応していない古いブラウザでは、JavaScriptによるプログラムの処理と制御で実現されていました。加えて、placeholder属性の値として記述してあるHTML文書は、古いブラウザに不具合を与えることは滅多にありません。

そのため、積極的に使用して、Webサイトのユーザビリティの向上に活用しましょう。

 

以下は、placeholder属性の色を変えるコードの例です。

CSS

input::placeholder {

  color: red;

}

このように色を指定すると入力フォームのプレースホルダーの文字色を変更することもできます。

 

監修してくれたメンター

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。