`textarea` 要素型 (HTML, XHTML 1)

[19] HTML の textarea 要素は、複数行文章入力制御子を作成します。

[20] 仕様書:

SI 4281:1998 http://www.qsm.co.il/Hebrew/si4281e.htm
- 6.1.4 Elements with no directionality
- 8.2 The Keyboard
- 8.3 Rendering the Form
HTML 4 (Web Forms 1.0)
- text input IW:HTML4:"interact/forms.html#text-input"
- 17.7 The TEXTAREA element IW:HTML4:"interact/forms.html#edef-TEXTAREA"
Web Forms 2.0
- 12.14. Extensions to the textarea element IW:WF2:"#extensions"
- 2.18. Handling unexpected elements and values IW:WF2:"#handling"

[21]

名前空間名

http://www.w3.org/1999/xhtml

局所名

textarea

開始タグ

必須

終了タグ

必須

出現できる文脈

%formctrl な文脈

内容模型

#PCDATA

属性

属性名	属性値	既定値	説明	状態	出典
`accesskey`	`%Character`			[HTML 4]
`align`			配置	[WinIE 4] 未実装
`class`		(なし)	級	[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common
`cols`	`NUMBER`	(必須)	列	[HTML 4]
`datafld`			データ列名	[WinIE 4]
`datasrc`			データ源	[WinIE 4]
`dir`			書字方向	[HTML 4] %i18n ⊂ %attrs, [XHTML 1] I18N ⊂ Common
`disabled`	(真偽値属性)	(偽)	無効	[HTML 4]
`format`			入力書式	[au]
`id`	`ID`	(なし)	一意識別子	[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common
`inputmode`			入力モード	OMA 規格	XHTMLMP
`iprof`			自動補完名	非標準	iモード 7.0
`istyle`			入力モード	[iモード 2]
`lang`			自然言語	[HTML 4] %i18n ⊂ %attrs
`xml:lang`	`%LanguageCode`	(継承)	自然言語	W3C 勧告	[XHTML 1] I18N ⊂ Common
`mode`				非標準	[Vodafone]
`name`			制御子名	[HTML 4]
`onblur`	`%Script`	(なし)	失焦点時	[HTML 4]
`onchange`	`%Script`	(なし)	変更時	[HTML 4]
`onclick`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`ondblclick`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`onfocus`	`%Script`	(なし)	得焦点時	[HTML 4]
`onkeydown`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`onkeypress`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`onkeyup`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`onmousedown`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`onmousemove`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`onmouseout`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`onmouseover`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`onmouseup`	`%Script`	(なし)		[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
`onselect`	`%Script`	(なし)	選択時	[HTML 4]
`readonly`	(真偽値属性)	(偽)	読取専用	[HTML 4]
`rows`	`NUMBER`	(必須)	行	[HTML 4]
`style`			スタイル情報	[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Style ⊂ Common
`submit_dir`	方向性の提出の有無		(偽)	W3C WD	html-bidi
`tabindex`	`NUMBER`	(自動)	タブ順	[HTML 4]
`title`			注釈的題	[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common
`tooltipText`			tooltip	非標準
`value`			初期値	非標準
`wrap`			行送り	[Web Forms 2.0]

内容

構文解析 (SGML 構文)

[16] SGML base の (正確には KEEPRSRE NO の) HTML では、タグの前後の記録開始・記録終了が無視されるなどの問題があります。 (どの要素型でもそうですが、 textarea や pre では問題になり得ます。) XHTML ではこの問題は起こりません。

参考: 2004年2月15日 (日) - TEXTAREA要素のレンダリングについて http://www.hyuki.com/diary/dia0402.html#i15_16

数値文字参照か十六進数文字参照を使えばこの問題は回避できます。 (が、そこらのブラウザが対応しているかは知りませんよ。)

詳しくは SGML//空白あたりを参照されたし。 (名無しさん 2004-03-17 10:15:35 +00:00)

構文解析 (HTML 構文)

[44] タグは、文字データとして構文解析するべきです。注釈と実体参照は、適当に認知して処理するべきです。 WF2 2.18

レンダリング

[22] UA は、初期状態で内容をレンダリングするべきです。 HTML 4 17.7

[45] レンダリングは、 CSS 等で上書きされない限り、 value DOM属性によります。 WF2 2.18

[41] 幅と高さ

→ rows と cols のレンダリングの項

[42] 空白と改行

→ wrap のレンダリングの項

[37] Bidi との関係: textarea 要素は、 bidi 的には方向性に関して中立な文字1文字であるかのように扱います。方向について特に配慮が必要なら前後に LRM や RLM を使えます。 SI 4281 6.1.4

SI 4281:1998 http://www.qsm.co.il/Hebrew/si4281e.htm
- 6.1.4 Elements with no directionality
- 8.2 The Keyboard [12] Bidi と提出値: 利用者が入力欄の基底方向性を上書きした時は、それを (提出する文字符号化方式で可能なら) LRM や RLM で囲んで示すべきです SI 4281:1998 8.2。

[38] 方向と入力モード: ヘブライ語に対応した利用者エージェントの場合、右から左の入力欄では、カーソルの初期位置は右側とし、入力モード (鍵盤言語) はヘブライ語とし、左から右の入力欄では、カーソルの初期位置は左側とし、入力モード (鍵盤言語) は異言語とするべきです。 SI 4281:1998 8.2

フォーム制御子

制御子名

[24] name 属性の値が制御子名として使われます。

初期値

[23] 内容を初期値として使用するべきです。 HTML 4 17.7

[39] 非標準のvalue属性を初期値に使う利用者エージェントがあるらしいです。

現在値

[33] 制御子の値を編集すると、それが現在値となります。

[43] wrap 属性との関係については、 wrap の項を参照。

メモ

[25] 提出についてはフォームの提出の説明をご覧ください。

可用性

[28] 多くの視覚 UA は自前の制御子やその環境の標準の制御子を組込んで使っていることが多いです。どちらの場合にせよ、そのような制御子は貧弱であることが多く、ウェブ日記や wiki のように文章編集を多く行うと粗が見えてきます。とりわけ、独自の制御子を使っている場合には、その環境の制御子が持っている機能すらなかったり、操作性が異なったり、拡張ソフトウェアを流用できなかったり不便なことがあります。そこで、 UA 組込みの制御子ではなく、外部のエディタを使って編集できる方が良いと考える人も少なくありません。

[32] 実装によっては、 textarea 制御子の内容の編集をブラウザ内部で\はなく完全に外部プログラムに任せているものもあります例えば w3m。実装方法や環境にもよりますが、この方法には外部プログラム起動が遅いとか、外部プログラム起動中はフォームの頁にある情報を見ることができないとかの問題がある\場合もあります。

利用者エージェントは textarea の内容が十分短く簡単ならばブラウザ内で編集できるようにした方が便利です。可能なら外部プログラムに渡すデータに頁内のの情報を含めて編集内容と一緒に表示して\もらうようにするといいでしょう。

フォームの設計者は、 input//text で十分なら textarea を使うべきではありません。

[40] 多くのWebブラウザはWeb頁内の検索機能を持っていますが、なぜかtextarea内の検索機能を持っていません。 wikiなどで長文を編集するようになった昨今の情勢を鑑みると、 textarea内検索機能の実装が望まれます。

(名無しさん 2006-04-16 04:04:21 +00:00)

メモ

[31] 利用者が要素を活性化すると (焦点をあてると)、入力欄は編集可能な状態になります HTML 4 17.11.2。

実装

[17] textarea - textareaとテキストエディタ連携 http://www.hyuki.com/yukiwiki/wiki.cgi?textarea

WWW ブラウザの textarea 編集は貧弱なので外部エディタを使いたいという話。

[18] firefox からエディタを利用する方法 http://www.mew.org/~kazu/toy/firefox-editor.html (名無しさん 2004-04-20 08:43:22 +00:00)

[29] w3m のように、自前の編集機能が無く、外部エディタで編集するブラウザもあります。

[30] 但し、外部エディタを使うという方法は、ウィンドウ環境などを持たないテキスト端末を使っていたり、外部エディタ起動中は UA 本体を操作できなかったりすると文章入力制御子の周りの文章を同時に読めないなどの不都合が生じます。 UA の作者は、 UA の動作する環境に合わせて、利用者が不便を感じずに編集を行えるように十分注意するべきでしょう。

[36] Resizeable Textarea 0.1a - The Extensions Mirror http://www.extensionsmirror.nl/index.php?showtopic=2796

Firefox で textarea の表示上の大きさを利用者が可変にする拡張。 (名無しさん 2005-03-29 00:00:16 +00:00)

[46] Firefox 2 はなぜか初期値 (defaultValue) に NBSP があると現在値 (value) では SP に置き換えるようです。

Opera や WinIE ではそういうことはないようです。

http://suika.suikawiki.org/~wakaba/-temp/test/dom/form/textarea/value/nbsp-default-value-1, http://suika.suikawiki.org/~wakaba/-temp/test/dom/form/textarea/value/nbsp-value-1 (名無しさん)

[47] >>46 スクリプトから NBSP を代入しても、 SP に変換されてしまうようです。

http://suika.suikawiki.org/~wakaba/-temp/test/dom/form/textarea/value/nbsp-value-2 (名無しさん)

[48] defaultValue に代入し、すぐに値を取得した場合、および value に代入し、すぐに値を取得した場合:

WinIE 6 は NULL を削ります。
WinIE 6 でそれ以外の文字、Opera 9、Firefox 2 は素通しするようです。 (名無しさん)

[49] defaultValue に代入し、 reset してから value の値を取得した場合、

Firefox 2 では、 CR、 LF、 CR LF が LF に、 NBSP が SP に置き換わります。
WinIE 6 では CR, LF, LF CR が CR LF に置き換わります。U+FDD0〜U+FDEF, U+FFF0〜U+FFF8, U+FFFE, U+FFFF が U+003F に置き換わります。
Opera 9 では、 NULL は除去され (要検証)、 CR, LF は CR LF に置き換わります。先頭が CR LF なら、それらは除去されます。 U+000B も除去されます (要検証)。

(名無しさん)

不思議解釈

[34] CSS の overflow のような仕組みが無かった時代には、著者の使っている画面の大きさに整形済みの文章を収める時に (頁全体の横 scroll bar が出てしまわないようにするのに) 便利と考える人もいました。

[1] 著者からのメッセージ(謎)とかを、著者が使っている画面の大きさに収める時に大きさ合わせに使う。 (彼(女)は CSS は知らないか、マウスを乗せたらリンクの色が変わるタグは知る。)

とくに、What's New? を書くのに使うことが多い。

[35] Webブラウザの機能が貧弱だった時代には、プログラムのソース・コードなどクリップ板を通して複写されそうな文章片を textarea に入れるのがよいと考える人もいました (textarea はシステム標準の制御子が使われ、ブラウザよりは使いやすくなっていたため)。

他との関係

[27] 複数行ではない文章入力制御子には、 input 要素型を使います。詳しくは input//text をご覧ください。

[28] WebTV の拡張では、 input 要素を使っても type を textarea とすることで複数行文章入力制御子を作成できます。

[8] かつて、 WinIE には htmlarea という textarea に似た要素型がありましたが、葬られました。

歴史

HTML4

[26] 簡単な入力制御子の例 HTML 4 17.7、改

<FORM action="http://somesite.example/prog/text-read" method="post">
   <P>
   <TEXTAREA name="thetext" rows="20" cols="80">
   First line of initial text.
   Second line of initial text.
   </TEXTAREA>
   <INPUT type="submit" value="Send"><INPUT type="reset">
   </P>
</FORM>

この例では、20行80列の文章入力制御子を作成します。その初期状態は、2行分の文字列が現在値となった状態です。

[85] 【楽天市場へ出店】無料資料請求はこちら!ネットショップ開店・運営のコツとは (2007-07-04 19:49:40 +09:00 版) http://www.rakuten.co.jp/ec/

<td bgcolor="#FFFFFF"><textarea cols="40" rows="1" type="text" wrap="soft" id="00N10000000EZL2" name="00N10000000EZL2"></textarea></td>

おなじようなのが他にも1箇所。

HTML5

[71] [] (0) WF2: <textarea> element summary., Hixie, 2008-09-05 07:31:33 +09:00, 2024-09-04T13:13:31.000Z https://github.com/whatwg/html/commit/b8e512670542d102eedf8f8b0de34f22e783b8bd

[70]

HTML要素概説

要素名

textarea

日付

2008-09-04

説明

2008-09-04、 HTML5 に textarea が追加された。

出典

HTML5 r2153, Hixie, 2008-09-05 07:31:33 +09:00, 2024-09-04T13:13:31.000Z https://github.com/whatwg/html/commit/b8e512670542d102eedf8f8b0de34f22e783b8bd

[86] [whatwg] Request for new DOM property textarea.selectionText ( (2012-06-02 11:35:45 +09:00 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-June/036248.html

[87] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( (2014-04-07 05:30:01 +09:00 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L229

[88] ncsa-mosaic/libhtmlw/HTMLformat.c at master · alandipert/ncsa-mosaic ( (2014-04-07 06:12:07 +09:00 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/libhtmlw/HTMLformat.c#L4128

[89] Web Applications 1.0 r8577 Fix prose around the <textarea> value / maxlength issues to be slightly less confusing and ambiguous. Clean up some text around MutationObservers. ( (2014-04-24 00:38:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=8576&to=8577

[2] Bug 28517 – origin of the rule for textarea cols=0/rows=0 (2015-04-22 22:48:30 +09:00 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=28517

[3] Remove the concept of CSS Bindings (annevk著, 2016-07-08 02:00:41 +09:00) https://github.com/whatwg/html/commit/6c96beabfa41d6d28ab23633966b82c5cdb9fd94

[4] Add cloning steps for textarea (domenic著, 2016-09-16 02:47:41 +09:00) https://github.com/whatwg/html/commit/957fd0c91c6ee3abd77538be3a2b4c5531754f62

[6] Change minlength/maxlength behavior around linebreaks (domenic著, 2016-08-26 16:10:16 +09:00) https://github.com/whatwg/html/commit/163703186794c21daa92cc2718218afa44f26071

[7] Don't serialize an extra LF in <pre>, <textarea>, <listing> (zcorpan著, 2016-09-24 18:47:14 +09:00) https://github.com/whatwg/html/commit/2aa0000433f8c34263d29cee31bc95b1efdfef46

[9] Clean up selection direction handling (domenic著, 2017-03-16 07:51:53 +09:00) https://github.com/whatwg/html/commit/af9fa0ff11d07a341f6404d4578017d68fafc8c7

[10] Chrome 58 で、 textarea からフォーカスが外れて再び戻ってきた時に、カーソル位置が完全に復元されずに少し前後にずれるようになったようです。 (細かい条件は謎。) 2017-05-22T12:30:52.300Z

[11] Update textarea textContent/defaultValue/value interaction (domenic著, 2017-06-16 05:46:10 +09:00) https://github.com/whatwg/html/commit/5afbba1cf62ee01bc6af3fd220d01f3f7591a0fc

[13] "When the textarea element's textContent IDL attribute changes" · Issue #2750 · whatwg/html (2017-06-29 17:18:20 +09:00) https://github.com/whatwg/html/issues/2750

[14] Update textarea textContent/defaultValue/value interaction by domenic · Pull Request #2766 · whatwg/html (2017-06-29 17:20:45 +09:00) https://github.com/whatwg/html/pull/2766

[15] Refine the inputmode attribute, and expose it on contenteditable (dtapuska著, 2017-12-15 03:35:19 +09:00) https://github.com/whatwg/html/commit/d430f275f4e253956a5965c8b90885d3ac4e90c1

[50] Add the autocapitalize attribute (rlanday著, 2017-12-16 08:17:00 +09:00) https://github.com/whatwg/html/commit/f1f0af83e320f14a59dc4e552ee82aab7908f00c

[51] Add the autocapitalize attribute (rlanday著, 2017-12-16 08:17:00 +09:00) https://github.com/whatwg/html/commit/f1f0af83e320f14a59dc4e552ee82aab7908f00c

[52] Fix form inheritance behavior for autocapitalize (rlanday著, 2018-01-25 08:58:12 +09:00) https://github.com/whatwg/html/commit/b7c21b1b56d77215d3d85ae14a072c090dbe6266

[53] Queue a task to run all the autofocusing steps (domenic著, 2018-03-07 14:32:39 +09:00) https://github.com/whatwg/html/commit/185190cac859144cfcd78248b906f3adae1f0594

[54] Clamp selection and text entry cursor position on value changes (domenic著, 2018-02-17 09:11:50 +09:00) https://github.com/whatwg/html/commit/3d2719ab8d8f6efa06eef2475270b3ae0b01b8b0

[55] selectionStart/selectionEnd behavior needs to be specified · Issue #2424 · whatwg/html (2018-03-17 17:51:35 +09:00) https://github.com/whatwg/html/issues/2424

[56] Text selection after updating textContent of TEXTAREA · Issue #2411 · whatwg/html (2018-03-17 17:53:46 +09:00) https://github.com/whatwg/html/issues/2411

[57] Textarea/text input text cursor position is not updated by reset algorithm · Issue #3468 · whatwg/html (2018-03-17 17:54:27 +09:00) https://github.com/whatwg/html/issues/3468

[58] Fix selection/text entry cursor position processing for input/textarea by domenic · Pull Request #3472 · whatwg/html (2018-03-17 17:54:52 +09:00) https://github.com/whatwg/html/pull/3472

[59] Change textarea's relevant value to its API value (domenic著, 2018-02-17 08:57:50 +09:00) https://github.com/whatwg/html/commit/a4cc0686025c99e901adf79515a18b334056ccab

[60] Do not change input/textarea text selection for the same value by domenic · Pull Request #2437 · whatwg/html (2018-03-17 17:57:23 +09:00) https://github.com/whatwg/html/pull/2437

[61] Editorial: clarify some text selection/cursor concepts (domenic著, 2018-02-17 08:55:18 +09:00) https://github.com/whatwg/html/commit/2e8be71869f7c1e67f2aecd31c7ea3eaeff22b54

[62] Add the enterkeyhint="" attribute (dtapuska著, 2018-09-13 05:53:59 +09:00) https://github.com/whatwg/html/commit/a5422d984d9b7b8a4e0ad7a0ad237b07f190cc93

[63] Treat CR, LF, CRLF the same for alert/confirm/prompt (domenic著, 2018-11-21 08:19:05 +09:00) https://github.com/whatwg/html/commit/76638126838951c21aee4a1220cd0a4e57f3081d

[64] Do not inherit text-transform (et al.) on form controls (jugglinmike著, 2019-08-29 19:14:53 +09:00) https://github.com/whatwg/html/commit/b9997b7488a3b35515c30bb1627d361053cf2c2f

[65] Define what tabIndex returns when the tabindex attribute is not set (rakina著, 2019-07-10 03:13:55 +09:00) https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab

[66] Align with DOM's children changed steps (annevk, 2019-12-06 20:24:46 +09:00, 2021-08-20T08:28:02.000Z) https://github.com/whatwg/html/commit/928f862788e5d1d3fef905fd36bb55ea1939b0c1

textarea 要素型 (HTML, XHTML 1)

内容