HTML <textarea>

フォームの中にテキスト入力フィールドを配置します。<input> のテキスト入力フィールドとは異なり、複数行のテキストを入力することができます。

テキスト入力フィールドに入力フォーカスが来たときにIME（日本語変換）を自動的にオンにしたい場合は、CSSスタイルシート属性 ime-mode を使用します。

構文

textareaはformの子要素である。

<form>
  <textarea>
    <!-- テキストエリアに表示する初期値 -->
  </textarea>
</form>

コンテンツモデル

textarea 要素の開始タグと終了タグの間には、テキストエリアに表示する初期値を指定する。初期値がない場合は省略できる。

タグの省略

textarea 要素の開始タグと終了タグは共に省略できない。

属性

textarea要素には、次の属性を指定できる。

autocomplete

フォームオートフィル機能のヒントを指定する。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定することもできる。

cols

１行の最大文字数を指定する。

<textarea cols="10" name="cols10"></textarea>

<textarea cols="20" name="cols20"></textarea>

Google Chromeでは、テキストエリアの右下をマウスでドラッグすることで、大きさを変えることができる。

dirname

フォーム送信時に要素の方向性を送信するために使用するフォームコントロールの名前を指定する。

disabled

disabled属性を指定したtextarea要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したtextarea要素の値は、サブミット時にフォームデータを送信しない。

<textarea name="disabled1" disabled></textarea>

form

要素をフォーム要素に関連付ける。

id

要素の識別子

maxlength

値の最大長を指定する。

minlength

値の最小の長さを指定する。

name

名前を指定します。フォームデータを受け取ったモジュール（サーブレットや JSP など）でこのデータを識別するための名前です。

onchange

テキストが（部分的にでも）選択されたときに実行するJavaScript

ondblclick

要素がダブルクリックされたときに実行するJavaScriptを指定する。

onfocus

要素がフォーカスを得たときに実行するJavaScript

onselect

テキストが（部分的にでも）選択されたときに実行するJavaScript

placeholder

何も入力していないときにキストエリアに表示される説明の文字列を指定する。

<textarea cols="25" placeholder="ここに説明を入力します。"></textarea>

readonly

ユーザーによる値の編集を許可しない。

disabled属性とは異なり、フォーカスを得ることはでき、サブミット時に値を送信する。

disabled属性とreadonly属性の違い

	disabled	readonly
ユーザによる入力が	できない	できない
フォーカスの受け手と	ならない	なる
タブキーによるフォーカスの移動	飛び越される	できる
サブミット時にフォームデータを	送信しない	送信する

<textarea name="ro1" readonly>入力できません。</textarea>

入力できません。

required

フォーム送信に必要なコントロールであることを指定する。required 属性が指定されたテキストエリアを空欄のままサブミット（送信）ボタンをクリックすると、ウェブブラウザによってエラーメッセージが表示され、送信先の画面へ遷移しない。

<form action="/php/get.php">
  <textarea name="req1" required></textarea>
  <div>
    <input type="submit">
  </div>
</form>

rows

表示する行数を指定する。表示上の高さを指定するものであり、入力できる行数を制限するものではない。

<textarea rows="1" name="rows1"></textarea>

<textarea rows="2" name="rows2"></textarea>

Google Chromeでは、テキストエリアの右下をマウスでドラッグすることで、大きさを変えることができる。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。

<textarea style="color: red" name="s1"></textarea>

title

要素の使用に関するラベルや指示など、その要素に対する助言的な情報を指定する。ウェブブラウザによっては、ツールチップとして表示されることがある。

<textarea title="ここにコメントを入力してください。" name="t1"></textarea>

wrap

自動改行するか否かを指定します。

wrap 属性

値	意味
off	自動改行しません
hard	表示上も送信するデータも自動改行します
soft	表示上は自動改行しますが、送信するデータは自動改行しません（規定値）

<form action="/php/get.php">
  <textarea name="wo" wrap="off"></textarea>
  <textarea name="wh" wrap="hard"></textarea>
  <textarea name="ws" wrap="soft"></textarea>
  <div>
    <input type="submit">
  </div>
</form>

イベント

イベント属性の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form name="form2">
<textarea cols="10" rows="2"
  onfocus="onEvent('onfocus')"
  onblur="onEvent('onblur')"
  onselect="onEvent('onselect')"
  onchange="onEvent('onchange')">
</textarea>
イベント: <input type="text" name="text2" readonly></input>
</form>

<script>
function onEvent(type) {
  document.form2.text2.value = type;
}
</script>

文字数

textareaに入力された文字数は、入力された文字列（value値）のlengthプロパティを参照する。なお、改行も1文字としてカウントされる。

<textarea onkeyup="countLength(value, 'len')"></textarea>

<p>文字数：<span id="len">0</span></p>

<script>
function countLength(val, id) {
  document.getElementById(id).innerHTML = val.length;
}
</script>

JavaScript

JavaScript からは HTMLTextAreaElement インタフェースを通じて、HTML の textarea 要素を参照できる。

参考文献

Web Hypertext Application Technology Working Group (2023) Form Elements HTML Living Standard