textareaに初期値・プレースホルダーを設定する方法を解説！
textareaに初期値・プレースホルダーを設定する方法を解説します！textareaは主にフォームなどで用いられます。そしてtextareaに初期値・プレースホルダーを設定することで、何を記載すればいいのか一目で分かるようになります。
textareaに初期値を設定する方法
textareaはよくフォーム(お問い合わせフォームなど)で用いられます。
そしてtextareaには初期値を設定する方法があります。初期値を設定することでデフォルトの値を設定することができ、RubyやPHPなどのプログラミング言語ではフォームから送信された値を初期値として表示する方法はよく使われます。
ではどうすれば初期値を設定できるのか見ていきましょう。
valueでは初期値は設定できない！？
textareaと同じくよくフォームで用いるinputタグではvalueを設定することで初期値を設けることができます。しかしtextareaではそれができません。
実際にサンプルコードで確認してみましょう。
このようにinputタグにvalueを設定した場合は、初期値が設定されているのに対してtextareaでは初期値が設定されていません。
textareaに初期値を設定するには！？
ではtextareaに初期値を設定する方法について解説します。
答えとしてはただtextareaの要素の中に初期値を書くだけです。
それとここでtextareaとよく一緒に用いる、labelタグについても簡単に解説します。
使い方としては「label for属性の値」と「textareaのid属性の値」で紐づけるだけです。
そうすることでlabelタグに囲まれているテキストをクリック（タップ）すると、紐づく入力欄にフォーカスがあたります。
それでは実際にサンプルコードで見てみましょう。
このようにtextareaの中に初期値が設定されていることが分かります。
またlabelタグに囲まれているテキストをクリック（タップ）し、textareaにフォーカスがあたるかどうかも確認してみてください。
1つめの「コメント」をタップしてもtextareaにフォーカスがあたらないが、２つめの「コメント」をタップするとtextareaにフォーカスがあたることが分かります。
textareaにプレースホルダーを設定する方法
上で紹介した初期値だとユーザーは使用する際に、わざわざ始めに削除しなければなりません。
ではどういった内容を書けばいいのか一目で分かるようにするにはどうすればいいでしょうか！？
その答えがプレースホルダーを設定するになります。
プレースホルダーだと中が空白の状態なので、わざわざ始めに削除する作業をしなくて済みます。
またプレースホルダーのデフォルトの色はグレーですが、この色をCSSで変えることができます。その方法はCSSで::placeholder擬似要素の中にcolorを設定するだけです。
では実際にサンプルコードで見てみましょう。
このようにplaceholderだと初期値と違い、中は空白になっており文字を消すことなく書くことができます。
また擬似要素を用いることで色を変えることができることも確認できます。
textareaに改行ありの初期値・プレースホルダーを設定する方法
こちらの方法についてChromeなどの新しいブラウザを使っている方は、改行して書いてあげることで適用されます。
ただSafariやIEなど古いブラウザを用いている方は、改行して書くだけでは適用されません。
そこで改行するにはいくつか方法がありますがここでは最も簡単に改行する方法を紹介します。
ではその方法を見ていきましょう。それは改行を表す特殊文字を使うという方法です。
その特殊文字とは です。
では実際にプレビューで見てみましょう。
このようにtextareaのプレースホルダー、初期値ともに改行されていることが分かります。
まとめ
いかがでしたでしょうか？textareaはフォームを作成する時などに、非常によく使うHTMLタグです。
またここで紹介した初期値・placeholder、labelを設定することで、ユーザビリティを高める事ができます。
ぜひここでの知識を活かして使ってみてください。
