htmlの入力ボックスにグレー文字の初期値を設定する方法！

お問い合わせフォームの入力を分かりやすくするために、入力ボックス内に初期値としてグレー文字を表示させる方法を説明します。

↓こんな感じで初期値を設定

少しコードを加えるだけで簡単に対応できますので、ぜひ参考にしてみてください。

入力ボックスの初期値にグレー文字を表示させる2通りの方法

入力ボックスに初期値を表示させるには、

1. 「input」タグに「placeholder」を追加する
2. 「input」タグに「value」を追加する

の2通りの方法があります。

それぞれの方法について確認してみましょう。

【方法.1】「input」タグに「placeholder」を追加する

HTML5から導入された機能です(ほぼ全てのブラウザで対応)。「input」タグに記述するとグレーのテキストが表示されます。入力ボックス内に文字を入力するとテキストは消去されます。

<input type="text" placeholder="ボックス内に表示させたいテキストを記述">

「placeholderのテストフォーム

<input type="text" value="ボックス内に表示させたいテキストを記述">