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

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

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

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

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

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

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

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

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

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

入力ボックス

「input」タグに記述するとグレーのテキストが表示され、入力ボックス内をクリックするとテキストの編集が可能です。「value」と「placeholder」の両方が記述されていた場合、「value」が優先されます。

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

入力ボックス

JavaScripを使用する方法もありますが、「placeholder」「value」の方が実装が簡単です。

以上「htmlの入力ボックスにグレー文字の初期値を設定する方法！」でした！

それではまた。