HTMLのプレースホルダーを活用する方法！7つのカスタマイズ方法も併せて紹介

はじめに
●HTMLプレースホルダーとは
- ○プレースホルダーの作り方
- ○プレースホルダーの使い方
●プレースホルダーのカスタマイズ方法
まとめ

はじめに

この記事を読めば、HTMLプレースホルダーの活用法が身につき、カスタマイズ方法も自在に使いこなせるようになります。

●HTMLプレースホルダーとは

HTMLプレースホルダーは、入力フォームに予め表示されるヒントテキストのことです。

ユーザーが入力フォームに何を入力すべきかを示す役割を果たしており、ユーザビリティの向上に役立ちます。

○プレースホルダーの作り方

プレースホルダーを作成するには、input要素やtextarea要素にplaceholder属性を追加します。

例えば、名前を入力するフォームの場合は以下のように記述します。

<input type="text" name="name" placeholder="名前を入力してください">

○プレースホルダーの使い方

プレースホルダーは、主にユーザーが入力すべき内容を示すために使用されます。

例えば、メールアドレスやパスワードの入力フォームにプレースホルダーを設定することで、ユーザーがどのような情報を入力すべきかを示すことができます。

下記のようなコードが一例です。

<input type="email" name="email" placeholder="メールアドレスを入力してください">
<input type="password" name="password" placeholder="パスワードを入力してください">

●プレースホルダーのカスタマイズ方法

プレースホルダーは、下記の方法でカスタマイズできます。

○方法1：テキストの変更

プレースホルダーのテキストは、placeholder属性の値を変更することで簡単に変更できます。

<input type="text" name="name" placeholder="お名前を入力してください">

○方法2：スタイルの変更

プレースホルダーのスタイルは、CSSで変更できます。

下記のようなコードで、プレースホルダーのテキスト色を変更できます。

::-webkit-input-placeholder { /* WebKitブラウザ用 */
  color: #999;
}
::-moz-placeholder { /* Mozillaブラウザ用 */
  color: #999;
}
:-ms-input-placeholder { /* IE11用 */
  color: #999;
}

○方法3：カスタム属性の追加

カスタム属性を追加して、プレースホルダーの挙動を変更することもできます。

例えば、data属性を使って独自の情報を付与することができます。

<input type="text" name="name" placeholder="お名前を入力してください" data-custom="example">

○方法4：イベントハンドラの設定

JavaScriptを使って、プレースホルダーにイベントハンドラを設定することができます。

下記の例では、フォーカス時にプレースホルダーを非表示にし、フォーカスが外れた際に再表示させる動作を実現しています。

<input type="text" name="name" placeholder="お名前を入力してください" onfocus="this.placeholder=''" onblur="this.placeholder='お名前を入力してください'">

○方法5：JavaScriptでの操作

JavaScriptを使って、プレースホルダーのテキストや属性を動的に変更することができます。

下記の例では、ボタンをクリックすることでプレースホルダーのテキストが変更されます。

<input type="text" name="name" placeholder="お名前を入力してください" id="nameInput">
<button onclick="changePlaceholder()">プレースホルダーを変更</button>
<script>
function changePlaceholder() {
  document.getElementById("nameInput").placeholder = "新しいプレースホルダー";
}
</script>

○方法6：レスポンシブ対応

メディアクエリを使って、画面サイズに応じてプレースホルダーのスタイルを変更することができます。

@media screen and (max-width: 480px) {
  ::-webkit-input-placeholder {
    font-size: 12px;
  }
  ::-moz-placeholder {
    font-size: 12px;
  }
  :-ms-input-placeholder {
    font-size: 12px;
  }
}

○方法7：ブラウザごとの対応

プレースホルダーは、ブラウザによって表示が異なる場合があります。

ブラウザごとの対応策を考慮して、スタイルやJavaScriptを設定することが重要です。

○応用例とサンプルコード

下記のサンプルコードは、プレースホルダーを使ったログインフォームの例です。

メールアドレスとパスワードの入力フォームにプレースホルダーを設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ログインフォーム</title>
  <style>
    /* プレースホルダーのスタイル設定 */
    ::-webkit-input-placeholder {
      color: #999;
    }
    ::-moz-placeholder {
      color: #999;
    }
    :-ms-input-placeholder {
      color: #999;
    }
  </style>
</head>
<body>
  <form>
    <input type="email" name="email" placeholder="メールアドレスを入力してください">
    <input type="password" name="password" placeholder="パスワードを入力してください">
    <button type="submit">ログイン</button>
  </form>
</body>
</html>

このコードでは、プレースホルダーが設定されたログインフォームが表示されます。

メールアドレスとパスワードの入力欄には、それぞれ「メールアドレスを入力してください」と「パスワードを入力してください」というプレースホルダーが表示されます。

また、下記のサンプルコードは、プレースホルダーを使用した検索フォームの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>検索フォーム</title>
</head>
<body>
  <form>
    <input type="search" name="search" placeholder="キーワードを入力して検索">
    <button type="submit">検索</button>
  </form>
</body>
</html>

このコードでは、プレースホルダーが設定された検索フォームが表示されます。

検索欄には、「キーワードを入力して検索」というプレースホルダーが表示されます。