HTML <textarea>

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

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

構文

textareaはformの子要素である。

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

コンテンツモデル

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

タグの省略

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

属性

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

autocomplete
フォームオートフィル機能のヒントを指定する。
class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定することもできる。
cols
1行の最大文字数を指定する。
<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