textareaはフォームの機能のひとつで、複数行の文章を入力できる入力ボックスです。改行するような長い文章の入力にも対応できます。今回はtextareaとはどのような役割をするのか、またどのような使い方があるのかを詳しくお伝えしていきます。
＼参加者満足度99％！／
無料カウンセリングに申し込む
※最短1分で申し込み可能
textareaとは？どのような役割をする機能か？
textareaとは、フォーム機能のひとつで複数行の文章を入力、送信できる入力機能です。ブラウザには四角い入力欄として表示され、inputタグのテキストボックスと違い改行もできます。複数行にわたって入力できるので、長い文章をデータで送信するときにも便利です。
textareaはtextareaタグにさまざまな属性を設定して使います。長さや行数、使用不可、読み取り専用など、さまざまな属性を設定可能です。またhtml5になってから大幅に属性が追加され、よりさまざまな用途に使用できるようになりました。
テキストボックス
----------------------------------------------------------------------------------------------------------------------------------
転職成功率98%の【DMM WEBCAMP】で需要の高まるITエンジニアに転職しよう！
フルタイムのコミット型学習と手厚いキャリアサポート！
万が一転職できない場合は、全額返金の転職保証付き！
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!
＼参加者満足度99％！／
エンジニア転職のプロに無料で相談する！
※最短1分で申し込み可能
textareaの属性をご紹介
1行あたりの文字数を指定する
cols属性はtextareaの入力ボックスの1行あたりに入力できる文字数を設定します。入力できる文字数をcols属性の値に設定することで、1行に入力できる文字の最大値を設定可能です。初期値は20文字となっています。
<textarea col=”50”>
一方表示できる行数を指定する属性はrows属性です。表示したい行数の値をrows属性の値に設定することで、入力ボックスの縦の幅を制御できます。初期値は2行です。
<textarea row=”5”>入力不可にする（可にする）
disabled属性をtextareaタグの中にそのまま書き込むことで、textareaが使用不可になります。使用可にしたい場合は、disabledを消去します。
<textarea disabled>
読み取り専用にする
readonly属性をtextareaタグの中にそのまま書き込むことで、textareaが読み取り専用になります。文字列を選択することはできますが、消去や書き込みができなくなります。
<textarea readonly>固有の名称をつける
name属性に値を設定することで、textareaに固有の名称を与えることが可能です。name属性の値は文字列を設定します。データをサーバサイドに送信すると、サーバサイドでは固有の名前も同時に送信されてくるので、このtextareaのデータだと判断できるようになります。
<textarea name=”test01”>＼オンラインでプログラミング学習／
DMM WEBCAMPの詳細をみる
※教室利用も可能
html5から追加された属性はこちら
autocomplete
autocomplete属性に値を設定することで、自動的に入力文字列を補填する機能を使うことが可能になります。属性値がonのときは入力補填が使用可能に、offのときは入力補填が使用不可になります。
<textarea autocomplete=”off”>autofocus
autofocus属性をtextareaタグの中にそのまま書き込むと、ページが表示されたときに最初からフォーカスが設定されるようになります。
<textarea autofocus>dirname
dirnameで設定された値にテキストの入力方向が入力されています。右向きの場合はltr左向きの場合はrtlです。日本語は右向きなのでltr、アラビア語は左向きなのでrtlという値が入力されています。
<textarea dirname=”test01”>form
textareaのデータを送信するときにどのformに関連付けるのかを指定することができます。
<textarea form=”test01”>maxlength、minlength
textareaに入力可能な最大文字数と最小文字数を設定します。maxlengthの値が最大文字数でminlengthの値が最小文字数です。
<textarea maxlength=”1000” minlength=”100”>placeholder
placeholderに値を設定することで、入力のヒントを表示させることができます。
<textarea placeholder=”入力ヒントです”>required
textareaタグにrequired属性が設定されていると、未入力のままデータ送信できなくなります。空白のままsubmitボタンをクリックすると、警告が表示されます。
<textarea required>wrap
データ送信をするときに入力データの改行を行うかどうかを設定できます。wrapの値にsoftと設定すると改行せずに送信され、hardと設定すると改行されて送信されます。
初期値はsoftなので、改行して送信してほしい場合はhardと設定しておくといいでしょう。
<textarea wrap=”hard”>----------------------------------------------------------------------------------------------------------------------------------
国内最大級のプログラミングスクール【DMM WEBCAMP】
手厚いキャリアサポートと高品質の学習カリキュラムで驚異の転職成功率98%！
あなたも、IT業界で輝くエンジニアになりませんか？
本気で人生を変えたい方は、ぜひ無料カウンセリングへ！
＼参加者満足度99%／
エンジニア転職のプロに無料で相談する！
※最短1分で申し込み可能
まとめ
いかがでしたか？textareaの役割や使い方についてご理解いただけましたか？
textareaはinput属性のテキストボックスと役割が似ていますが、1行しか入力できないテキストボックスと異なりtextareaは複数行のテキストが入力可能です。
また属性もさまざまなものがあるので、多様な使い方ができます。textareaは長い文章を入力することができるので、多くの文章を入力してもらいたい場合に有効です。
自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談！
DMM WEBCAMPは転職成功率98％※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます！
外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。
キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか？
自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう！この機会を活用し、ぜひDMM WEBCAMPの無料カウンセリングをご利用ください。
＼オンラインで実施中／
【無料】キャリア相談の日程を見る
※ 1 2020年４月時点