HTML5

：

タグ（要素）

：

TEXTAREA

　編集：2022.06.28 by T.A.

→● mdn

テキスト入力欄（マルチラインテキスト制御）。

この要素を使用できる文脈

フレージング内容が期待される場所。

内容モデル

テキスト。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性

autocomplete ─ フォームオートフィル機能に対するヒント
cols ─ 行あたりの最大文字数
dirname ─ フォーム送信で、要素の方向を送信するために使用するフォーム制御の名前
disabled ─ フォーム制御が無効であるかどうか
form ─ FORM 要素とこの要素を関連付ける
maxlength ─ 値の最大長さ
minlength ─ 値の最小長さ
name ─ フォーム送信および form.elements API で使用する要素の名前
placeholder ─ フォーム制御内に配置されるユーザー可視ラベル
readonly ─ ユーザーによって編集される値を許可するかどうか
required ─ 制御がフォーム送信に要求されるかどうか
rows ─ 表示する行数
wrap ─ どのようにフォーム制御値がフォーム送信に対して包まれるか

解説

要素の生の値に対する複数行のプレーンテキスト編集コントロールを表す。コントロールのコンテンツは、コントロールのデフォルトの値を表す。

この要素は、双方向アルゴリズムに関わる要件をレンダリングを持つ。

例

この例において、テキスト制御は読み取り専用ファイルを表すので、読み取り専用としてマークされる：

Filename: <CODE>/etc/bash.bashrc</CODE>
<TEXTAREA name="buffer" readonly>
# System-wide .bashrc file for interactive bash(1) shells.

# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.

# If not running interactively, don't do anything
[ -z "$PS1" ] && return

...</TEXTAREA>

autocomplete属性

ユーザーエージェントへのヒントの手段に、または実際にそのような機能を提供するかどうかに使用できる。

`on`	ブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。
`off`

<FORM name=Nautocomplete0Form autocomplete=on action="○○.cgi" method=post target=Test style="border:1px solid black;">
 <TEXTAREA name=Test>
 </TEXTAREA><BR>
 <BUTTON type=submit>送信</BUTTON>
</FORM>

<FORM name=NautocompleteForm autocomplete=on action="○○.cgi" method=post target=Test style="border:1px solid black;">
 <TEXTAREA autocomplete=on name=NautocompleteTextarea>
 </TEXTAREA><BR>
 <BUTTON type=submit>送信</BUTTON>
</FORM>

dirname属性

要素の方向の送信を有効にし、フォーム送信の間にこの値を含むコントロール名を与える。

この属性が指定される場合、その値は空文字列であってはならない。

<FORM name=NdirnameForm autocomplete=on action="○○.cgi" method=post target=Test style="border:1px solid black;">
 <TEXTAREA dirname=ltr name=NTextarea>
文字列
 </TEXTAREA><BR>
 <BUTTON type=submit>送信</BUTTON>
</FORM>

¶送信すると、サーバーCGIではデータ「NTextarea=文字列;dir=ltr」を受け取る？

disabled属性

フォーム制御が無効であるかどうか。真偽属性。

 <TEXTAREA disabled>TEXTAREA
 </TEXTAREA><BR>

form属性

FORM 要素とこの要素を関連付ける。

この属性を持つ場合、その属性の値は、その要素のツリーで FORM 要素の ID でなければならない。

<FORM name=NformForm id=IdformForm action="○○.cgi" method=post target=Test style="border:1px solid black;">
 <TEXTAREA form=IdformForm name=NTextarea>
文字列
 </TEXTAREA><BR>
 <BUTTON type=submit>送信</BUTTON>
</FORM>

¶FORM内ならformは要らないかもしれない。FORM外ならformで関連付ける必要があるでしょう

maxlength属性

値の最大長さ。

TEXTAREA 要素が最大許容値の長さを持つ場合、その要素の子は、正規化された改行をもつ要素の子孫テキスト内容に属する値の長さに等しい、または要素の最大許容値の長さよりも小さくなるようにしなければならない。

 <TEXTAREA maxlength=20>TEXTAREA
 </TEXTAREA><BR>

minlength属性

値の最小長さ。

以下のCSSが組み込んであります：

 <TEXTAREA class=Test minlength=5>TEXTAREA
 </TEXTAREA><BR>

name属性

フォーム送信および form.elements API で使用する要素の名前。

フォームの送信や FORM 要素の elements オブジェクトで使用されるような、フォーム制御の名前を与える。属性が指定される場合、その値は空の文字列またはで isindex あってはならない。

isindex 以外で、name に対して任意の空でない値が許可される。ASCII 大文字・小文字不区別で一致する名前 _charset_ は特別である： value 属性のない Hidden コントロールの名前として使用される場合、送信の間 value 属性は送信文字エンコーディングから成る送信の間の値を自動的に与えられる。

<FORM name=NnameForm action="○○.cgi" method=post target=Test style="border:1px solid black;">
 <TEXTAREA name=Ans>
文字列
 </TEXTAREA><BR>
 <BUTTON type=submit>送信</BUTTON>
</FORM>

placeholder属性

フォーム制御内に配置されるユーザー可視ラベル。

データ入力を伴うユーザーの支援を意図する短いヒント（単語や短いフレーズ）を表す。ヒントは、サンプル値または期待された形式の簡単な説明かもしれない。

この属性は、LABEL 要素の代替として使用すべきでない。より長いヒントまたは他の助言テキストの場合、title 属性がより適切である。

<TEXTAREA placeholder="初期表示"></TEXTAREA><BR>

readonly属性

テキストがユーザーによって編集できるかどうかを制御するために使用される。真偽属性。

<TEXTAREA readonly>テスト
</TEXTAREA><BR>

required属性

制御がフォーム送信に要求されるかどうか。真偽属性。

指定される場合、ユーザーがフォームを送信する前に値を入力する必要がある。

以下のCSSが組み込んであります：

<TEXTAREA class=Test2 required>テスト
</TEXTAREA><BR>

cols属性

行あたりの予想最大文字数を指定する。

この属性が指定される場合、その値は 0 より大きい妥当な非負整数でなければならない。

 <TEXTAREA cols=10>TEXTAREA
 </TEXTAREA><BR>
 <TEXTAREA cols=10 style="font-size:20px;">TEXTAREA
 </TEXTAREA><BR>
 <TEXTAREA cols=10 style="font-size:20px; font-family:ＭＳ Ｐ明朝;">TEXTAREA
 </TEXTAREA><BR>

等幅フォント以外では頼りにならないようだ

rows属性

表示する行数を指定する。

この属性が指定される場合、その値は 0 より大きい妥当な非負整数でなければならない。

 <TEXTAREA rows=4>TEXTAREA
 </TEXTAREA><BR>
 <TEXTAREA rows=4 style="font-size:20px; line-height:1.5">TEXTAREA
 </TEXTAREA><BR>

line-heightのことも考慮されているようだ

wrap属性

どのようにフォーム制御値がフォーム送信に対して包まれるか。真偽属性¶。

2 つのキーワードと状態をもつ。
soft キーワードは Soft 状態に対応し、hard キーワードは Hard 状態に対応する。欠損値のデフォルトおよび不正値のデフォルトは Soft 状態である。

キーワード	状態	備考
`soft`	Soft	テキストが送信されるとき、（レンダリングにおいてテキストが依然として包まれることはできるが）TEXTAREA でテキストが包まれないことを示す。
`hard`	Hard	TEXTAREA でテキストがユーザーエージェントによって追加される改行を持つので、テキストが送信されるときにテキストが包まれることを示す。

[Edge]：テキストの折り返しの制御法を示します。
`hard`	各行の長さがコントロールの幅を超えないように、ブラウザーが自動的に改行（CR＋LF）を挿入します。cols 属性を指定しなければなりません。
`soft`	ブラウザーは値に含まれる改行（CR＋LF のペア）をすべて維持しますが、改行の付加は行いません。
`off`	非標準。soft に似ていますが外観を white-space: pre に変更しますので、cols を超えた部分は折り返されず、水平方向にスクロール可能になります。

欠損値のデフォルトおよび不正値のデフォルトは Soft 状態である。

要素の wrap 属性が Hard 状態にある場合、cols 属性を指定しなければならない。

 <TEXTAREA wrap=hard cols=10 style="font-size:20px;">123456789
 </TEXTAREA><BR>

 <TEXTAREA wrap=soft cols=10 style="font-size:20px;">123456789
 </TEXTAREA><BR>

 <TEXTAREA wrap=off cols=10 style="font-size:20px;">123456789
 </TEXTAREA><BR>

テスト

ここに表示

スクリプト：

スクリプト：

表示内容：