textareaに初期値・プレースホルダーを設定する方法を解説!

textareaに初期値・プレースホルダーを設定する方法を解説します!textareaは主にフォームなどで用いられます。そしてtextareaに初期値・プレースホルダーを設定することで、何を記載すればいいのか一目で分かるようになります。

コンテンツ [表示]

  1. 1textareaに初期値を設定する方法
  2. 1.1valueでは初期値は設定できない!?
  3. 1.2textareaに初期値を設定するには!?
  4. 2textareaにプレースホルダーを設定する方法
  5. 3textareaに改行ありの初期値・プレースホルダーを設定する方法
  6. 4まとめ

textareaに初期値を設定する方法

textareaはよくフォーム(お問い合わせフォームなど)で用いられます。

そしてtextareaには初期値を設定する方法があります。初期値を設定することでデフォルトの値を設定することができ、RubyやPHPなどのプログラミング言語ではフォームから送信された値を初期値として表示する方法はよく使われます。

ではどうすれば初期値を設定できるのか見ていきましょう。

Photo bykreatikar

valueでは初期値は設定できない!?

textareaと同じくよくフォームで用いるinputタグではvalueを設定することで初期値を設けることができます。しかしtextareaではそれができません。

実際にサンプルコードで確認してみましょう。

このようにinputタグにvalueを設定した場合は、初期値が設定されているのに対してtextareaでは初期値が設定されていません。

textareaに初期値を設定するには!?

ではtextareaに初期値を設定する方法について解説します。

答えとしてはただtextareaの要素の中に初期値を書くだけです。

それとここでtextareaとよく一緒に用いる、labelタグについても簡単に解説します。
使い方としては「label for属性の値」と「textareaのid属性の値」で紐づけるだけです。

そうすることでlabelタグに囲まれているテキストをクリック(タップ)すると、紐づく入力欄にフォーカスがあたります。

それでは実際にサンプルコードで見てみましょう。

このようにtextareaの中に初期値が設定されていることが分かります。

またlabelタグに囲まれているテキストをクリック(タップ)し、textareaにフォーカスがあたるかどうかも確認してみてください。

1つめの「コメント」をタップしてもtextareaにフォーカスがあたらないが、2つめの「コメント」をタップするとtextareaにフォーカスがあたることが分かります。

textareaにプレースホルダーを設定する方法

上で紹介した初期値だとユーザーは使用する際に、わざわざ始めに削除しなければなりません。
ではどういった内容を書けばいいのか一目で分かるようにするにはどうすればいいでしょうか!?

その答えがプレースホルダーを設定するになります。
プレースホルダーだと中が空白の状態なので、わざわざ始めに削除する作業をしなくて済みます。

またプレースホルダーのデフォルトの色はグレーですが、この色をCSSで変えることができます。その方法はCSSで::placeholder擬似要素の中にcolorを設定するだけです。

では実際にサンプルコードで見てみましょう。

このようにplaceholderだと初期値と違い、中は空白になっており文字を消すことなく書くことができます。

また擬似要素を用いることで色を変えることができることも確認できます。

textareaに改行ありの初期値・プレースホルダーを設定する方法

こちらの方法についてChromeなどの新しいブラウザを使っている方は、改行して書いてあげることで適用されます。

ただSafariやIEなど古いブラウザを用いている方は、改行して書くだけでは適用されません。
そこで改行するにはいくつか方法がありますがここでは最も簡単に改行する方法を紹介します。

ではその方法を見ていきましょう。それは改行を表す特殊文字を使うという方法です。
その特殊文字とは
です。

では実際にプレビューで見てみましょう。

このようにtextareaのプレースホルダー、初期値ともに改行されていることが分かります。

まとめ

いかがでしたでしょうか?textareaはフォームを作成する時などに、非常によく使うHTMLタグです。

またここで紹介した初期値・placeholderlabelを設定することで、ユーザビリティを高める事ができます。

ぜひここでの知識を活かして使ってみてください。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次