<textarea>タグの解説
<textarea>は、複数行に渡るプレーンテキストの編集項目を作成します。主に、ユーザーが大量の文字を扱うコメント欄やレビューの投稿画面などに使われます。
この要素は<form>に組み込まれる一部のパーツとして使用することが多く、データの入力と送信に関わります。そのため、有効に活用するにはクライアントのリクエストとサーバーのレスポンスを理解する必要があります。
似たような使われ方をする要素に<input>がありますが、こちらは一行に収まるような短いテキストを扱う項目に適しています。
<textarea>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- CSSの
displayは、既定値でinline-blockが適用されます。 - 視覚的な効果として枠に囲われた入力項目を表示します。横幅の既定値は
cols属性、高さの既定値はrows属性で指定されています。変更する場合は、各属性の値またはスタイルシートで調整します。 - この要素で作られた項目は、ユーザー側で大きさを変更できます。この機能は、CSS（スタイルシート）で固定することが可能です。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<textarea>要素に指定できる属性
cols- 一行あたりの最大の文字数を表します。既定値は
20です。正確な寸法はCSSで指定して下さい。 rows- テキストエリアの行数を表します。既定値は
2です。正確な寸法はCSSで指定して下さい。 maxlength- ユーザーが入力可能な文字の最大数を指定できます。この属性を指定しなかった場合、ユーザーは無制限に文字を入力できます。この値はUTF-16の単位を基準とします。
minlength- ユーザーが入力しなければならない最小の文字数を定義します。この値はUTF-16の単位を基準とします。
name- テキストエリアの名前を定義します。
form- 同じページに置かれた
<form>のid属性を参照する場合に指定します。この属性を使えば、フォームの外に置かれたテキストエリアも、データ送信時に連動します。 placeholder- テキストエリアの中に表示する助言や補足事項です。この内容はユーザーが入力を開始すると非表示となります。
disabled- テキストエリアをユーザー側で編集できないように操作不能にします。この属性が親要素の
<fieldset>に指定されていた場合は効果が継承します。どのような操作も受け付けず、値は送信されません。これは値のない論理属性です。 readonly- テキストエリアをユーザー側で編集できないように操作不能にします。
disabled属性との違いは、ユーザーがコントロールをクリックしたり選択することを妨げません。この属性が与えられている値も、フォームによって送信可能です。これは値のない論理属性です。 required- フォームを送信する前に値を入力しなければならない項目に指定します。
autofocus- ページを読み込んだ時に、あらかじめ入力項目にフォーカスするように指定します。これは値のない論理属性です。
autocapitalize- ユーザーが入力したテキストを自動的に大文字に変換するか否か、またどのように変換するかを制御します。これはWebKitの規格でHTMLの標準ではありません。
none：自動大文字化機能を無効にします。sentences：文の先頭文字を自動的に大文字化します。words：単語の先頭文字を自動的に大文字化します。characters：すべての文字を自動的に大文字化します。on：非推奨の値に変更されました。off：非推奨の値に変更されました。
autocomplete- ユーザーエージェント側で自動補完を提供するかどうかを指定します。
on：ユーザーが以前入力した値を元に、自動補完を行うことを許可します。off：自動補完を行いません。ユーザーはフォームを使用するたびに内容を入力しなければなりません。
spellcheck- ユーザーエージェント側でスペルチェックを行うかどうかを指定します。
true：スペルや文法のチェックを行うように要請します。false：スペルや文法のチェックを行わないように要請します。default：親要素から継承した値、または既定の動作を要請します。
warp- テキストの折り返しに関する制御方法を指定します。
hard：行の長さがテキストエリアの幅を超えた場合、ブラウザが自動的に改行を行います。これにはcols属性が必須となります。soft：入力値に含まれる改行を維持しますが、ブラウザ側では改行を追加しません。off：折返しを行いません。入力値が横幅を超えた場合、水平方向にスクロール可能とします。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<textarea>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。属性を何も指定しなければ閲覧環境の既定値で表示されます。対応しているブラウザでは、ユーザーがテキストエリアの寸法を任意で変更できるハンドルが表示されます。
<textarea></textarea>
テキストエリアの寸法を指定する
テキストエリアの寸法は、cols属性とrows属性の初期値で定義されています。これを変更する場合は、一行あたりの最大文字数をcols属性の値に、行数をrows属性の値に指定します。正確な寸法を定義したり親要素の幅に応じて寸法を可変させたい場合はCSSで調整して下さい。
<textarea cols="30" rows="5"></textarea>
入力できる最大文字数・最小文字数を指定する
テキストエリアが受け入れる最大の文字数はmaxlength属性で指定します。最小の文字数はminlength属性で指定します。入力された文字数が最大値を超えた場合は自動的に削除されます。minlength属性に指定された最小値は入力に不備があるかどうかの判定に使われますが、ユーザーの操作は制限しません。
<textarea minlength="10" maxlength="30">
10文字以上30文字以内
</textarea>
required属性で入力値の整合性を確認する
フォームを送信する前に入力された値が条件を満たしているかどうかを判定する場合は、required属性を指定します。以下の例では、minlength属性に指定した値を下回る文字数まで削った場合に送信ボタンを押しても中断する様子を確認できます。
<textarea minlength="10" maxlength="30" required>
10文字以上30文字以内
</textarea>
placeholder属性で事前に表示するテキストを指定する
テキストエリアの中にユーザーの補助となるテキストを表示させたい場合は、placeholder属性を使用します。この値に指定された内容はテキストエリアが空の時にのみ表示され、ユーザーが何らかの文字を入力した時点で非表示になります。
<textarea placeholder="placeholderの値です。"></textarea>
disabled属性でデータを無効にする
無効なテキストエリアを作る場合はdisabled属性を指定します。この属性を持つテキストエリアは、クリックやフォーカスなどのイベントが発生せず、フォームの送信に含まれません。何らかの条件に一致した項目を除外する機能などで活用できます。
<textarea disabled>disabled属性が指定されています。</textarea>
readonly属性で読み取り専用にする
読み取り専用のテキストエリアを作る場合はreadonly属性を指定します。この属性を持つテキストエリアは、編集を受け付けませんが、フォーカスの対象やフォームの送信に含まれます。ユーザーが入力したフォームの確認画面などで利用できます。
<textarea readonly>readonly属性が指定されています。</textarea>
テキストエリアのサイズ変更を無効にする
多くのブラウザは、ユーザー側の操作によるテキストエリアのサイズ変更を受け付けます。これを固定し、サイズの変更を行えないようにするには、CSSのresizeプロパティを使います。
<div class="sample-block">
<textarea>サイズ変更できません</textarea>
</div>
.sample-block textarea {
inline-size: 100%;
block-size: 5rem;
resize: none;
}