HTMLのプレースホルダーって？意味や使い方、SQL攻撃の回避方法を解説

「入力欄に薄い灰色の文字を表示する方法を知りたい」「入力欄の灰色文字のカスタマイズ方法を知りたい」方に向けて、HTML属性のひとつであるプレースホルダーの使い方や注意点を解説します。

プレースホルダー（placeholder）はHTML属性のひとつで、入力フォームに初めから表示されている薄い灰色の文章の実装に使います。プレースホルダーは入力すべき内容がわかって便利ですが、使い方を誤るとユーザーの利便性を低下させることがあるため注意が必要です。

そこで本記事では、「入力欄に薄い灰色の文字を表示させる方法を知りたい」「入力欄の灰色文字のカスタマイズ方法を知りたい」方に向け、プレースホルダーの使い方や注意点を解説します。Webサイト制作の学習をしている方は、ぜひ参考にしてください。

HTMLのプレースホルダー属性って何？

「HTML」におけるプレースホルダーとは、入力フォームのテキストボックスの中にあらかじめ記入されている薄い灰色の文章や値です。

たとえば名前を入力するフォームではあらかじめ仮名が入力されていたり、パスワードの入力フォームでは文字数の指定や入力できる文字や記号の種類が記入されていたりします。この入力されている文字や記号が、プレースホルダーです。

プレースホルダーにあらかじめ記入されている文字は、ユーザーが入力し始めたタイミングで自動的に消え、文字が入力できる状態に変わります。

プレースホルダーを使用する項目を確認！

プレースホルダーは、一般的に以下のような項目で使用されます。

• 氏名
• パスワード
• メールアドレス
• 電話番号
• 郵便番号

たとえば氏名の場合、テキストボックスの中に「田中太郎」といったようなテキストが薄い文字で表示されているのがプレースホルダーです。基本的にユーザーが入力をおこなうような上記の項目などで使用されています。

HTMLのプレースホルダーの使い方を解説！

プレースホルダーは、「HTML」の中で「input要素」や「textarea要素」に対する属性として使用します。

ここでは具体例として、「input要素」にプレースホルダーを使用する場合を見てみましょう。

記述例は以下のとおりです。

<input type=”text” placeholder=”田中 太郎”>

このように「input要素」に「placeholder属性」を指定すると、テキストボックスの中にあらかじめ薄い灰色の文字が表示されます。

HTMLのプレースホルダーを設定するメリット

プレースホルダーはさまざまな場面で活用されていますが、活用するとどのようなメリットがあるのでしょうか。

主なメリットは、以下の2つです。

• ユーザーに入力すべき内容を伝えられる
• Webページのデザイン性を損なわずに済む

事前にプレースホルダーを使用するメリットを知ることで、どのような場面で使うべきか判断しやすくなります。ここからはそれぞれのメリットを、詳しく解説します。

ユーザーに入力すべき内容を伝えられる

プレースホルダーを設定するメリットのひとつは、ユーザーに入力すべき内容を伝えられる点です。

たとえばユーザーに氏名を入力してもらいたい場合、「田中 太郎」といったように具体的な氏名の例をプレースホルダーに設定します。そうすれば苗字だけを入力するのかフルネームを入力するのかが明確になり、希望の入力形式へ自然と誘導することが可能です。

そのため、ユーザーにどのように入力すべきかを一目で理解してもらえるでしょう。

Webページのデザイン性を損なわずに済む

Webページのデザイン性を損なわずに済む点も、プレースホルダーを設定するメリットです。入力内容の説明欄を入力フォームの枠の外側に設ける必要がなくなるため、Webページ全体のデザインがすっきりします。

また、Webページのスペースを有効活用できる点もメリットです。

このように入力フォームを確認するだけで入力内容に関する説明を完結できる点は、ユーザーの利便性を高めるメリットとなります。

HTMLのプレースホルダーを設定するデメリット

「HTML」のプレースホルダーを設定すると、どのようなデメリットがあるのでしょうか。

プレースホルダーを使用するデメリットを知ることで、使うべきではないケースを判断しやすくなります。主なデメリットは、以下の2つです。

• ユーザーがプレースホルダーの内容を忘れる可能性がある
• 自動入力されたデータだと勘違いさせるリスクがある

ここからは、それぞれのデメリットについて詳しく見ていきます。

ユーザーがプレースホルダーの内容を忘れる可能性がある

プレースホルダーは、ユーザーがフォームに入力している間は消えてしまいます。そのため、ユーザーはプレースホルダーに書かれていた内容を短時間で記憶しなければなりません。

とくに入力欄が多かったり長文の入力が必要だったりする場合に、プレースホルダーの内容を忘れてしまうことがあるため、ユーザーの利便性を低下させてしまう可能性がある点は、デメリットといえるでしょう。

自動入力されたデータだと勘違いさせるリスクがある

プレースホルダーは、ユーザーがフォームに入力する前に薄い灰色の文字が表示されています。この性質から、ユーザーはプレースホルダーに記入された文字が自動入力された値だと勘違いしてしまう可能性があります。

そのため、ユーザーがプレースホルダーの表示を自動入力だと勘違いした場合、必要な入力を飛ばして送信ボタンや完了ボタンを押すこともあるでしょう。しかし入力を飛ばした場合には再度入力が求められるため、利便性の低下が考えられます。

HTMLのプレースホルダーを設定する際の注意点って？

では「HTML」のプレースホルダーを設定する際の注意点には、どのようなものがあるのでしょうか。

主な注意点は、以下の3つです。

• ユーザーの記憶に残りやすい短い表記にする
• 書かなくてもわかることは書かない
• 重要な事柄を説明する際は使わない

それぞれの注意点を、さらに詳しく見ていきます。

ユーザーの記憶に残りやすい短い表記にしよう

プレースホルダーは一度入力し始めると消えてしまう性質から、ユーザーの短期記憶に負荷がかかりやすくなります。

そのためフォーム内には、「タナカ タロウ」のような短い表記をおこないましょう。

必要な情報はなるべく欄外に書き、ユーザーが常に確認できるようにすれば、利便性が低下することはありません。

書かなくてもわかることは書かないようにしよう

本当に必要なことだけをプレースホルダーに設定することも、ユーザーの利便性を維持する重要なポイントです。

たとえばメールアドレスの入力欄に、「●●@example.com」を書いたと仮定します。多くのメールアドレスはアットマーク（@）と半角英数字で書くため、わざわざ例を明記する必要はありません。むしろユーザーが入力時に迷う原因にもなるため、メールアドレスのプレースホルダー設定はおすすめできません。

重要な事柄を説明する際は使わないようにしよう

プレースホルダーを使って入力欄に重要な事柄を書くこともおすすめできません。プレースホルダーはユーザーが入力し始めると表示されなくなるため、ユーザーが入力形式を確認できなくなります。

また、指定した入力形式でユーザーが情報を入力しなかった場合、エラーメッセージを表示することになるため、プレースホルダーではユーザーの手間が増えることも考えられるでしょう。

そのため全角カナや半角カナといった入力形式の指定がある場合は、ラベルタグを使用して枠外への記載をおすすめします。

プレースホルダーで表示すべき項目は、ユーザーが意識して覚えなくても良い内容にするべきです。入力形式といった重要な事柄を指定する場合は、プレースホルダーではなく枠外に記載してください。

HTMLのプレースホルダーを使う具体例

ここからは具体的にどのような場面で「HTML」のプレースホルダーを使うのか、プレースホルダーを使うべきケースを3つ紹介します。

わかりやすい入力例を表示するケース

名前や住所など簡潔な入力例を表示する場合は、プレースホルダーを使ってもユーザーの利便性は維持できるため問題ありません。

たとえば名前の入力の場合、入力フォームにプレースホルダーで「タナカ タロウ」のように入力形式を示すことで、ユーザーは直感的にカナ入力すればよいとわかるため、わかりやすいフォームになります。

もし入力形式に「半角カナ」「スペースを入れない」といった指定がある場合は、枠外にラベルタグを使って明記しましょう。

入力欄がひとつだけのケース

入力欄がひとつだけの場合は、プレースホルダーを使って入力内容を表示してもユーザーが迷いにくいため使用できます。

たとえば検索ボックスは、元から入力欄がひとつのことがほとんどなので、入力すべき内容や項目が明らかな場合が多いでしょう。そのため、わざわざ枠外にラベルタグを使って明記しなくても、ユーザーが迷うことは少ないためプレースホルダーを使っても問題ありません。

入力欄が少なく、入力すべき内容を判断しやすいケース

たとえばログイン画面の入力欄に、それぞれ「メールアドレス」と「パスワード」と書いたと仮定します。会員制サイトではログイン時にメールアドレスとパスワードの入力を求めることが多いため、プレースホルダーで書いた入力例が消えても入力方法で迷う可能性は低いでしょう。

「ログインするために、この欄にはメールアドレスを入力する」ことがユーザーに伝わればよいため、ログイン画面でメールアドレスの入力を求める際には、プレースホルダーを使っても問題ありません。

HTMLのプレースホルダーでSQLインジェクションを防ぐやり方とは？

Webアプリケーションでは、「SQLインジェクション」が問題になることがあります。

「SQLインジェクション」とは、開発者の裏をかいて「SQL」を組み立て、データベースに不正な動作をさせるサイバー攻撃です。

しかしプレースホルダーを設定していると、「SQLインジェクション」を防げます。ここでは、プレースホルダーで「SQLインジェクション」を防ぐ方法を詳しく解説します。

SQLインジェクションの具体例って？

ある「PHPプログラム」が、SQL文を実行する場合を例に考えてみましょう。

例文は以下のとおりです。

$sql = “SELECT * FROM users WHERE name=’$name’”;

ここでは、usersテーブルからnameが一致したデータを取り出す処理がおこなわれています。$nameという変数の中には、ユーザーが入力した値が入ります。

もし「SQLインジェクション」によって$nameに不正な値が入れられた場合、テーブルデータの削除や不正な変更など想定外の「SQL」が実行される可能性が考えられるでしょう。

そのため、「SQL文」の中に直接「PHP」の変数を記述することは非常に危険とされます。

プレースホルダーでSQLインジェクションを防げる！

プレースホルダーを使うことで、「SQLインジェクション」を防止できます。

プレースホルダーは、「SQL文」の値が変動する箇所（変数）に使用される場合がほとんどです。変数にプレースホルダーを設定しておけば、その部分は値としての処理がおこなわれます。もし不正な値を入力されても、「SQL」の命令に関わる「特殊文字」と呼ばれる文字は、エスケープ処理によって無効化されるのです。そのためプレースホルダーを使うことで、不正な値は「SQL文」として実行されなくなります。

一つひとつの値をチェックしてエスケープ処理を実行することは可能です。しかし、プレースホルダーを使用した方がはるかに効率よく簡単に「SQLインジェクション」を防げます。

プレースホルダーでSQLインジェクションを防ぐやり方

「プレースホルダー」で「SQLインジェクション」を防ぐためのステップは、主に以下の2つにわかれます。

1. 「SQL文」中の変動する箇所をプレースホルダーで指定する
2. 実際に入力された値を、bindValueを使ってプレースホルダーにバインドする

最初のステップでは、以下の「SQL」のように、変動箇所を「:」で始まる代替文字列で指定します。

$sql = “SELECT * FROM users WHERE name=:name”;

次のステップでは、bindValueメソッドを使い以下のように実際に入力された値をバインド（関連付け）してください。

bindValue(‘:name’, $name, PDO::PARAM_STR);

※書式…bindValue (‘プレースホルダーの名前’, ‘バインドするデータ’, ‘データの型名’);

HTMLのプレースホルダーを正しく使おう

プレースホルダーを使うことで、Webページのデザイン性を保ちつつユーザーに入力すべき内容をわかりやすく伝えたり、「SQLインジェクション」を防いだりできます。一方でユーザーにはプレースホルダーの内容が憶えにくかったり、データが自動入力されているという勘違いをしたりする可能性もあります。そのためプレースホルダーの特徴や注意点をしっかりと理解し、正しく使うことが大切です。

本記事を参考に適切にプレースホルダーを使い分け、Webサイトのユーザビリティを向上させてください。