Textarea

textarea 要素 (HTML)

目次

  1. textarea 要素型 (HTML, XHTML 1)
    1. 内容
      1. 構文解析 (SGML 構文)
      2. 構文解析 (HTML 構文)
  2. レンダリング
    1. フォーム制御子
      1. 制御子名
      2. 初期値
    2. 現在値
      1. メモ
    3. 可用性
      1. メモ
  3. 処理
    1. clone
  4. 実装
    1. 不思議解釈
    2. 他との関係
  5. 歴史
    1. HTML4
    2. HTML5

textarea 要素型 (HTML, XHTML 1)#

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

[20] 仕様書:

[21]

名前空間名
http://www.w3.org/1999/xhtml
局所名
textarea
開始タグ
必須
終了タグ
必須
出現できる文脈
%formctrl な文脈
内容模型
#PCDATA
属性
属性名属性値既定値説明状態出典
accesskey%Character[HTML 4]
align配置[WinIE 4] 未実装
class(なし)[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] CoreCommon
colsNUMBER(必須)[HTML 4]
datafldデータ列名[WinIE 4]
datasrcデータ源[WinIE 4]
dir書字方向[HTML 4] %i18n ⊂ %attrs, [XHTML 1] I18N ⊂ Common
disabled(真偽値属性)(偽)無効[HTML 4]
format入力書式[au]
idID(なし)一意識別子[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]
rowsNUMBER(必須)[HTML 4]
styleスタイル情報[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Style ⊂ Common
submit_dir方向性提出の有無()W3C WDhtml-bidi
tabindexNUMBER(自動)タブ順[HTML 4]
title注釈的題[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common
tooltipTexttooltip非標準
value初期値非標準
wrap行送り[Web Forms 2.0]

内容#

構文解析 (SGML 構文)#

[16] SGML base の (正確には KEEPRSRE NO の) HTML では、 タグの前後の記録開始記録終了が無視されるなどの問題があります。 (どの要素型でもそうですが、 textareapre では問題になり得ます。) 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] 幅と高さ

rowscolsレンダリングの項

[42] 空白と改行

wrapレンダリングの項

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

[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

処理#

clone#

[5] clone 時には、利用者が入力している値も複製されます。

cloning steps 参照。

実装#

[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

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

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

OperaWinIE ではそういうことはないようです。

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

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

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

(名無しさん)

不思議解釈#

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

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

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

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

他との関係#

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

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

[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, , https://github.com/whatwg/html/commit/b8e512670542d102eedf8f8b0de34f22e783b8bd

[70] HTML要素概説
要素名
textarea
日付
説明
HTML5textarea が追加された。
出典

[86] [whatwg] Request for new DOM property textarea.selectionText ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-June/036248.html

[87] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( ( 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L229

[88] ncsa-mosaic/libhtmlw/HTMLformat.c at master · alandipert/ncsa-mosaic ( ( 版)) 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. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8576&to=8577

[2] Bug 28517 – origin of the rule for textarea cols=0/rows=0 ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=28517

[3] Remove the concept of CSS Bindings (annevk著, ) https://github.com/whatwg/html/commit/6c96beabfa41d6d28ab23633966b82c5cdb9fd94

[4] Add cloning steps for textarea (domenic著, ) https://github.com/whatwg/html/commit/957fd0c91c6ee3abd77538be3a2b4c5531754f62

[6] Change minlength/maxlength behavior around linebreaks (domenic著, ) https://github.com/whatwg/html/commit/163703186794c21daa92cc2718218afa44f26071

[7] Don't serialize an extra LF in <pre>, <textarea>, <listing> (zcorpan著, ) https://github.com/whatwg/html/commit/2aa0000433f8c34263d29cee31bc95b1efdfef46

[9] Clean up selection direction handling (domenic著, ) https://github.com/whatwg/html/commit/af9fa0ff11d07a341f6404d4578017d68fafc8c7

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

[11] Update textarea textContent/defaultValue/value interaction (domenic著, ) https://github.com/whatwg/html/commit/5afbba1cf62ee01bc6af3fd220d01f3f7591a0fc

[13] "When the textarea element's textContent IDL attribute changes" · Issue #2750 · whatwg/html () https://github.com/whatwg/html/issues/2750

[14] Update textarea textContent/defaultValue/value interaction by domenic · Pull Request #2766 · whatwg/html () https://github.com/whatwg/html/pull/2766

[15] Refine the inputmode attribute, and expose it on contenteditable (dtapuska著, ) https://github.com/whatwg/html/commit/d430f275f4e253956a5965c8b90885d3ac4e90c1

[50] Add the autocapitalize attribute (rlanday著, ) https://github.com/whatwg/html/commit/f1f0af83e320f14a59dc4e552ee82aab7908f00c

[51] Add the autocapitalize attribute (rlanday著, ) https://github.com/whatwg/html/commit/f1f0af83e320f14a59dc4e552ee82aab7908f00c

[52] Fix form inheritance behavior for autocapitalize (rlanday著, ) https://github.com/whatwg/html/commit/b7c21b1b56d77215d3d85ae14a072c090dbe6266

[53] Queue a task to run all the autofocusing steps (domenic著, ) https://github.com/whatwg/html/commit/185190cac859144cfcd78248b906f3adae1f0594

[54] Clamp selection and text entry cursor position on value changes (domenic著, ) https://github.com/whatwg/html/commit/3d2719ab8d8f6efa06eef2475270b3ae0b01b8b0

[55] selectionStart/selectionEnd behavior needs to be specified · Issue #2424 · whatwg/html () https://github.com/whatwg/html/issues/2424

[56] Text selection after updating textContent of TEXTAREA · Issue #2411 · whatwg/html () https://github.com/whatwg/html/issues/2411

[57] Textarea/text input text cursor position is not updated by reset algorithm · Issue #3468 · whatwg/html () 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 () https://github.com/whatwg/html/pull/3472

[59] Change textarea's relevant value to its API value (domenic著, ) 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 () https://github.com/whatwg/html/pull/2437

[61] Editorial: clarify some text selection/cursor concepts (domenic著, ) https://github.com/whatwg/html/commit/2e8be71869f7c1e67f2aecd31c7ea3eaeff22b54

[62] Add the enterkeyhint="" attribute (dtapuska著, ) https://github.com/whatwg/html/commit/a5422d984d9b7b8a4e0ad7a0ad237b07f190cc93

[63] Treat CR, LF, CRLF the same for alert/confirm/prompt (domenic著, ) https://github.com/whatwg/html/commit/76638126838951c21aee4a1220cd0a4e57f3081d

[64] Do not inherit text-transform (et al.) on form controls (jugglinmike著, ) https://github.com/whatwg/html/commit/b9997b7488a3b35515c30bb1627d361053cf2c2f

[65] Define what tabIndex returns when the tabindex attribute is not set (rakina著, ) https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab

[66] Align with DOM's children changed steps (annevk, , ) https://github.com/whatwg/html/commit/928f862788e5d1d3fef905fd36bb55ea1939b0c1