icon
icon

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

初心者向けにHTMLの入力フォームにplaceholder属性を使ってユーザビリティを向上する方法について解説しています。placeholder属性を使用することで、フォームの入力欄に補助文を設定することが可能です。具体的な使い方の例を見てみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

 

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

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

入力フォームにplaceholder属性を使ってユーザビリティを向上する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

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など多岐にわたる。

 

大石ゆかり

placeholder属性でユーザビリティを向上する方法について理解できたので良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

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

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