プレースホルダーとは？

プレースホルダー（placeholder）とは、HTMLフォームにおいて、ユーザーが入力する内容が予想される場所に一時的に表示されるヒントのテキストです。ユーザーがフィールドに入力を開始すると、このテキストは自動的に消えます。プレースホルダーは、フォームの使い方を明確にし、ユーザーエクスペリエンスを向上させるために非常に有用です。

基本的な例

プレースホルダーを設定するには、HTMLのタグに「placeholder」属性を追加します。例えば、次のコードでは、名前を入力するためのフォームフィールドに「名前を入力してください」というプレースホルダーが表示されます。

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

この例では、入力フィールドにフォーカスする前に「名前を入力してください」というテキストが表示され、ユーザーが入力を開始すると消えます。

複数の入力フィールドにプレースホルダーを設定

HTMLフォームには複数の入力フィールドを含めることができます。それぞれに個別のプレースホルダーを設定することが可能です。以下のコードでは、名前、メールアドレス、パスワードのフィールドにプレースホルダーを設定しています。

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

    <label for="email">メールアドレス</label>
    <input type="email" id="email" placeholder="メールアドレスを入力してください">

    <label for="password">パスワード</label>
    <input type="password" id="password" placeholder="パスワードを入力してください">
</form>
        

このコードでは、それぞれのフィールドに異なるプレースホルダーが設定されており、ユーザーは入力が必要な情報の種類を簡単に理解できます。

プレースホルダーのスタイル調整

プレースホルダーは、CSSを使ってスタイルを調整することができます。例えば、フォントサイズや色を変更することが可能です。次の例では、プレースホルダーのテキストを赤色にし、フォントサイズを大きくしています。

<style>
    input::placeholder {
        color: red;
        font-size: 16px;
    }
</style>

<input type="text" placeholder="ここに入力">
        

プレースホルダーのスタイルを変更するには、`::placeholder`セレクターを使用します。これにより、プレースホルダーの表示テキストに対して直接スタイルを指定できます。

JavaScriptでプレースホルダーを操作

プレースホルダーの内容をJavaScriptで動的に変更することも可能です。例えば、フォームがロードされた後に、プレースホルダーを変更したい場合などです。次のコードでは、ページが読み込まれたときに、プレースホルダーのテキストを変更します。

<input type="text" id="input1" placeholder="初期プレースホルダー">

<script>
    document.getElementById("input1").placeholder = "新しいプレースホルダー";
</script>
        

このように、JavaScriptを使ってフォームのプレースホルダーを動的に変更することができます。ユーザーの操作に応じて、プレースホルダーを変更することも可能です。