textareaはフォームの機能のひとつで、複数行の文章を入力できる入力ボックスです。改行するような長い文章の入力にも対応できます。今回はtextareaとはどのような役割をするのか、またどのような使い方があるのかを詳しくお伝えしていきます。
＼参加者満足度99％！／
無料カウンセリングに申し込む
※最短1分で申し込み可能
textareaとは？どのような役割をする機能か？
textareaとは、フォーム機能のひとつで複数行の文章を入力、送信できる入力機能です。ブラウザには四角い入力欄として表示され、inputタグのテキストボックスと違い改行もできます。複数行にわたって入力できるので、長い文章をデータで送信するときにも便利です。
textareaはtextareaタグにさまざまな属性を設定して使います。長さや行数、使用不可、読み取り専用など、さまざまな属性を設定可能です。またhtml5になってから大幅に属性が追加され、よりさまざまな用途に使用できるようになりました。
テキストボックス
「HTML・CSS」についてもっと詳しく学習しませんか？ ＼経済産業省認定の圧倒的カリキュラム！／
【DMM WEBCAMP】は受講生の97%が未経験！
ゼロからホームページやWEBアプリケーションを作成できるようになります！
受講内容の詳細はこちら
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”>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”>「HTML・CSS」についてもっと詳しく学習しませんか？ ＼経済産業省認定の圧倒的カリキュラム！／
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験からのスタート！
✔基礎知識をゼロから丁寧に学習できるコースを用意！
✔ホームページやWEBアプリケーション制作スキルを習得できる！
受講内容の詳細はこちら
まとめ
いかがでしたか？textareaの役割や使い方についてご理解いただけましたか？
textareaはinput属性のテキストボックスと役割が似ていますが、1行しか入力できないテキストボックスと異なりtextareaは複数行のテキストが入力可能です。
また属性もさまざまなものがあるので、多様な使い方ができます。textareaは長い文章を入力することができるので、多くの文章を入力してもらいたい場合に有効です。