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

WEB制作

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

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

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

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

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

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

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

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

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

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

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

「placeholderのテストフォーム

入力ボックス

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

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

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

「value」のテストフォーム

入力ボックス

最後に

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

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

それではまた。

コメント