* [CODE(HTMLe)[textarea]] 要素型 (HTML, XHTML 1) [19] [[HTML]] の [DFN[[CODE(HTMLe)[textarea]] 要素]]は、 [DFN[複数行文章入力制御子]]を作成します。 [20] 仕様書: - [[SI 4281]]:1998 -- [CSECTION[6.1.4 Elements with no directionality]] -- [CSECTION[8.2 The Keyboard]] -- [CSECTION[8.3 Rendering the Form]] - [[HTML 4]] ([[Web Forms 1.0]]) -- [CITE[text input]] -- [CITE[17.7 The [CODE(HTMLe)[TEXTAREA]] element]] - [[Web Forms 2.0]] -- [CSECTION@en[12.14. Extensions to the [CODE(HTMLe)@en[[[textarea]]]] element]] -- [CSECTION@en[2.18. Handling unexpected elements and values]] [21] :[[名前空間名]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] :[[局所名]]:[CODE(HTMLe)[textarea]] :[[開始タグ]]:必須 :[[終了タグ]]:必須 :出現できる文脈:[CODE(SGML)[%[[formctrl]]]] な文脈 :[[内容模型]]:[CODE(SGML)[#[[PCDATA]]]] :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,状態 ,出典 ,[CODE(HTMLa)[[[accesskey]]]] ,[CODE(SGML)[%[[Character]]]] , , ,[HTML 4] ,[CODE(HTMLa)[[[align]]]] , , ,配置 ,[WinIE 4] 未実装 ,[CODE(HTMLa)[[[class]]]] , ,(なし) ,[[級]] ,"[HTML 4] %[[coreattrs]] ⊂ %[[attrs]], [XHTML 1] [[Core]] ⊂ [[Common]]" ,[CODE(HTMLa)[[[cols]]]] ,[CODE(SGML)[[[NUMBER]]]] ,(必須) ,列 ,[HTML 4] ,[CODE(HTMLa)[[[datafld]]]] , , ,データ列名 ,[WinIE 4] ,[CODE(HTMLa)[[[datasrc]]]] , , ,データ源 ,[WinIE 4] ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,"[HTML 4] %[[i18n]] ⊂ %attrs, [XHTML 1] [[I18N]] ⊂ Common" ,[CODE(HTMLa)[[[disabled]]]] ,([[真偽値属性]]) ,(偽) ,無効 ,[HTML 4] ,[CODE(HTMLa)[[[format]]]] , , ,入力書式 ,[au] ,[CODE(HTMLa)[[[id]]]] ,[CODE(SGML)[[[ID]]]] ,(なし) ,一意識別子 ,"[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common" ,[CODE(HTMLa)[[[inputmode]]]] , , ,入力モード ,OMA 規格 ,[[XHTMLMP]] ,[CODE(HTMLa)@en[[[iprof]]]] , , ,[[自動補完]]名 ,非標準 ,[[iモード]] 7.0 ,[CODE(HTMLa)[[[istyle]]]] , , ,入力モード ,[iモード 2] ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML 4] %i18n ⊂ %attrs ,[CODE(HTMLa)[[[xml]]:[[lang]]]] ,[CODE(SGML)[%[[LanguageCode]]]] ,(継承) ,[[自然言語]] ,W3C 勧告 ,[XHTML 1] I18N ⊂ Common ,[CODE(HTMLa)@en[[[mode]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)[[[name]]]] , , ,制御子名 ,[HTML 4] ,[CODE(HTMLa)[[[onblur]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) ,失焦点時 ,[HTML 4] ,[CODE(HTMLa)[[[onchange]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) ,変更時 ,[HTML 4] ,[CODE(HTMLa)[[[onclick]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %[[events]] ⊂ %attrs, [XHTML 1] [[Events]] ⊂ Common" ,[CODE(HTMLa)[[[ondblclick]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common" ,[CODE(HTMLa)[[[onfocus]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) ,得焦点時 ,[HTML 4] ,[CODE(HTMLa)[[[onkeydown]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common" ,[CODE(HTMLa)[[[onkeypress]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common" ,[CODE(HTMLa)[[[onkeyup]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common" ,[CODE(HTMLa)[[[onmousedown]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common" ,[CODE(HTMLa)[[[onmousemove]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common" ,[CODE(HTMLa)[[[onmouseout]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common" ,[CODE(HTMLa)[[[onmouseover]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common" ,[CODE(HTMLa)[[[onmouseup]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) , ,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common" ,[CODE(HTMLa)[[[onselect]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) ,選択時 ,[HTML 4] ,[CODE(HTMLa)[[[readonly]]]] ,(真偽値属性) ,(偽) ,読取専用 ,[HTML 4] ,[CODE(HTMLa)[[[rows]]]] ,[CODE(SGML)[[[NUMBER]]]] ,(必須) ,行 ,[HTML 4] ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,"[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] [[Style]] ⊂ Common" ,[CODE(HTMLa)@en[[[submit_dir]]]],[[方向性]]の[[提出]]の有無,,([[偽]]),[[W3C]] [[WD]],[[html-bidi]] ,[CODE(HTMLa)[[[tabindex]]]] ,[CODE(SGML)[[[NUMBER]]]] ,(自動) ,タブ順 ,[HTML 4] ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,"[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common" ,[CODE(HTMLa)@en[[[tooltipText]]]],,,[[tooltip]],非標準 ,[CODE(HTMLa)@en[[[value]]]] , , ,[[初期値]] ,非標準 ,[CODE(HTMLa)[[[wrap]]]] , , ,行送り ,[Web Forms 2.0] [[#comment]] ** 内容 *** 構文解析 (SGML 構文) [16] [[SGML]] base の (正確には [CODE(SGML)[[[KEEPRSRE]] NO]] の) HTML では、 [[タグ]]の前後の[[記録開始]]・[[記録終了]]が無視されるなどの[Q[問題]]があります。 (どの要素型でもそうですが、 [CODE(HTMLe)[textarea]] や [CODE(HTMLe)[[[pre]]]] では問題になり得ます。) [[XHTML]] ではこの[Q[問題]]は起こりません。 参考: ''2004年2月15日 (日) - TEXTAREA要素のレンダリングについて'' [[数値文字参照]]か[[十六進数文字参照]]を使えばこの問題は回避できます。 (が、そこらのブラウザが対応しているかは知りませんよ。) 詳しくは [[SGML//空白]]あたりを参照されたし。 ([[名無しさん]] [WEAK[2004-03-17 10:15:35 +00:00]]) [[#comment]] *** 構文解析 (HTML 構文) [44] [[タグ]]は、[[文字データ]]として[[構文解析]][['''するべきです''']]。 [[注釈]]と[[実体参照]]は、適当に認知して処理[['''するべきです''']]。 [SRC@en[WF2 2.18]] [[#comment]] *** メモ [[#comment]] ** レンダリング [22] UA は、初期状態で[[内容]]をレンダリングするべきです。 [SRC[HTML 4 17.7]] [45] [[レンダリング]]は、 [[CSS]] 等で上書きされない限り、 [CODE(DOMa)@en[[[value]]]] [[DOM属性]]によります。 [SRC@en[WF2 2.18]] [41] '''幅と高さ''' → [CODE(HTMLa)@en[[[rows]]]] と [CODE(HTMLa)@en[[[cols]]]] の[[レンダリング]]の項 [42] '''空白と改行''' → [CODE(HTMLa)@en[[[wrap]]]] の[[レンダリング]]の項 [37] '''Bidi との関係''': [CODE(HTMLe)[[[textarea]]]] [[要素]]は、 [[bidi]] 的には方向性に関して[[中立]]な[[文字]]1[[文字]]であるかのように扱います。 方向について特に配慮が必要なら 前後に [CODE(char)[[[LRM]]]] や [CODE(char)[[[RLM]]]] を使えます。 [SRC[SI 4281 6.1.4]] - [[SI 4281]]:1998 -- [CSECTION[6.1.4 Elements with no directionality]] -- [CSECTION[8.2 The Keyboard]] [12] '''Bidi と提出値''': [[利用者]]が入力欄の[[基底方向性]]を上書きした時は、 それを [WEAK[([[提出]]する[[文字符号化方式]]で可能なら)]] [CODE(char)[[[LRM]]]] や [CODE(char)[[[RLM]]]] で囲んで示すべきです [SRC[SI 4281:1998 8.2]]。 [38] '''方向と入力モード''': [[ヘブライ語]]に対応した[[利用者エージェント]]の場合、 [[右]]から[[左]]の入力欄では、[[カーソル]]の初期位置は右側とし、 入力モード ([[鍵盤言語]]) は[[ヘブライ語]]とし、 [[左]]から[[右]]の入力欄では、[[カーソル]]の初期位置は左側とし、 入力モード ([[鍵盤言語]]) は異言語とするべきです。 [SRC[SI 4281:1998 8.2]] [[#comment]] ** フォーム制御子 *** 制御子名 [24] [CODE(HTMLa)[[[name]]]] 属性の値が[[制御子名]]として使われます。 [[#comment]] *** 初期値 [23] [[内容]]を[[初期値]]として使用するべきです。 [SRC[HTML 4 17.7]] [39] 非標準の[CODE(HTMLa)@en[[[value]]]][[属性]]を[[初期値]]に使う[[利用者エージェント]]があるらしいです。 [[#comment]] ** 現在値 [33] 制御子の値を編集すると、それが[[現在値]]となります。 [43] [CODE(HTMLa)@en[[[wrap]]]] [[属性]]との関係については、 [CODE(HTMLa)@en[[[wrap]]]] の項を参照。 [[#comment]] *** メモ [25] 提出についてはフォームの[[提出]]の説明をご覧ください。 [[#comment]] ** 可用性 [28] 多くの視覚 UA は自前の制御子やその環境の標準の制御子を組込んで使っていることが多いです。 どちらの場合にせよ、そのような制御子は貧弱であることが多く、 ウェブ日記や [[wiki]] のように文章編集を多く行うと粗が見えてきます。 とりわけ、独自の制御子を使っている場合には、その環境の制御子が持っている機能すらなかったり、 操作性が異なったり、拡張ソフトウェアを流用できなかったり不便なことがあります。 そこで、 UA 組込みの制御子ではなく、 外部のエディタを使って編集できる方が良いと考える人も少なくありません。 [32] 実装によっては、 [CODE(HTMLe)[textarea]] 制御子の内容の編集をブラウザ内部で\はなく完全に外部プログラムに任せているものもあります [SRC[例えば [[w3m]]]]。 実装方法や環境にもよりますが、この方法には外部プログラム起動が遅いとか、 外部プログラム起動中はフォームの頁にある情報を見ることができないとかの問題がある\場合もあります。 利用者エージェントは [CODE(HTMLe)[textarea]] の内容が十分短く簡単ならばブラウザ内で編集できるようにした方が便利です。 可能なら外部プログラムに渡すデータに頁内のの情報を含めて編集内容と一緒に表示して\もらうようにするといいでしょう。 フォームの設計者は、 [[[CODE(HTMLe)[input]]//[CODE(HTML)[text]]]] で十分なら [CODE(HTMLe)[textarea]] を使うべきではありません。 [40] 多くの[[Webブラウザ]]は[[Web頁]]内の検索機能を持っていますが、 なぜか[CODE(HTMLa)@en[[[textarea]]]]内の検索機能を持っていません。 [[wiki]]などで長文を編集するようになった昨今の情勢を鑑みると、 [CODE(HTMLa)@en[[[textarea]]]]内検索機能の実装が望まれます。 ([[名無しさん]] [WEAK[2006-04-16 04:04:21 +00:00]]) [[#comment]] *** メモ [31] 利用者が要素を[[活性化]]すると ([[焦点]]をあてると)、入力欄は編集可能な状態になります [SRC[HTML 4 17.11.2]]。 [[#comment]] ** 実装 [17] ''textarea - textareaとテキストエディタ連携'' WWW ブラウザの [CODE(HTMLe)[textarea]] 編集は貧弱なので外部エディタを使いたいという話。 [18] ''firefox からエディタを利用する方法'' ([[名無しさん]] [WEAK[2004-04-20 08:43:22 +00:00]]) [29] [[w3m]] のように、自前の編集機能が無く、 外部エディタで編集するブラウザもあります。 [30] 但し、外部エディタを使うという方法は、ウィンドウ環境などを持たないテキスト端末を使っていたり、 外部エディタ起動中は UA 本体を操作できなかったりすると文章入力制御子の周りの文章を同時に読めないなどの不都合が生じます。 UA の作者は、 UA の動作する環境に合わせて、 利用者が不便を感じずに編集を行えるように十分注意するべきでしょう。 [36] [CITE[Resizeable Textarea 0.1a - The Extensions Mirror]] [[Firefox]] で [CODE(HTMLe)[textarea]] の表示上の大きさを[[利用者]]が可変にする拡張。 ([[名無しさん]] [WEAK[2005-03-29 00:00:16 +00:00]]) [46] [[Firefox]] 2 はなぜか[[初期値]] ([CODE(DOMa)@en[[[defaultValue]]]]) に [CODE(charname)@en[[[NBSP]]]] があると[[現在値]] ([CODE(DOMa)@en[[[value]]]]) では [CODE(charname)@en[[[SP]]]] に置き換えるようです。 ;; [[Opera]] や [[WinIE]] ではそういうことはないようです。 ;; , ([[名無しさん]]) [47] >>46 [[スクリプト]]から [CODE(charname)@en[[[NBSP]]]] を代入しても、 [CODE(charname)@en[[[SP]]]] に変換されてしまうようです。 ;; ([[名無しさん]]) [48] [CODE(DOMa)@en[[[defaultValue]]]] に代入し、すぐに値を取得した場合、および [CODE(DOMa)@en[[[value]]]] に代入し、すぐに値を取得した場合: - [[WinIE 6]] は [CODE(charname)@en[[[NULL]]]] を削ります。 - [[WinIE 6]] でそれ以外の文字、[[Opera]] 9、[[Firefox]] 2 は素通しするようです。 ([[名無しさん]]) [49] [CODE(DOMa)@en[[[defaultValue]]]] に代入し、 [CODE(DOMm)@en[[[reset]]]] してから [CODE(DOMa)@en[[[value]]]] の値を取得した場合、 - [[Firefox]] 2 では、 [CODE(charname)@en[[[CR]]]]、 [CODE(charname)@en[[[LF]]]]、 [CODE(charname)@en[[[CR]]]] [CODE(charname)@en[[[LF]]]] が [CODE(charname)@en[[[LF]]]] に、 [CODE(charname)@en[[[NBSP]]]] が [CODE(charname)@en[[[SP]]]] に置き換わります。 - [[WinIE 6]] では [CODE(charname)@en[[[CR]]]], [CODE(charname)@en[[[LF]]]], [CODE(charname)@en[[[LF]]]] [CODE(charname)@en[[[CR]]]] が [CODE(charname)@en[[[CR]]]] [CODE(charname)@en[[[LF]]]] に置き換わります。[CODE(char)[[[U+FDD0]]]]〜[CODE(char)[[[U+FDEF]]]], [CODE(char)[[[U+FFF0]]]]〜[CODE(char)[[[U+FFF8]]]], [CODE(char)[[[U+FFFE]]]], [CODE(char)[[[U+FFFF]]]] が [CODE(char)[[[U+003F]]]] に置き換わります。 - [[Opera]] 9 では、 [CODE(charname)@en[[[NULL]]]] は除去され (要検証)、 [CODE(charname)@en[[[CR]]]], [CODE(charname)@en[[[LF]]]] は [CODE(charname)@en[[[CR]]]] [CODE(charname)@en[[[LF]]]] に置き換わります。先頭が [CODE(charname)@en[[[CR]]]] [CODE(charname)@en[[[LF]]]] なら、それらは除去されます。 [CODE(char)[[[U+000B]]]] も除去されます (要検証)。 ([[名無しさん]]) [[#comment]] ** 不思議解釈 [34] [[CSS]] の [CODE(CSS)[[[overflow]]]] のような仕組みが無かった時代には、 [[著者]]の使っている画面の大きさに整形済みの文章を収める時に (頁全体の横 scroll bar が出てしまわないようにするのに) 便利と考える人もいました。 [1] 著者からのメッセージ(謎)とかを、著者が使っている画面の大きさに収める時に大きさ合わせに使う。 (彼(女)は [[CSS]] は知らないか、マウスを乗せたらリンクの色が変わる[[タグ]]は知る。) とくに、[[What's New?]] を書くのに使うことが多い。 [35] [[Webブラウザ]]の機能が貧弱だった時代には、 プログラムのソース・コードなど[[クリップ板]]を通して複写されそうな文章片を [CODE(HTMLe)[textarea]] に入れるのがよいと考える人もいました ([CODE(HTMLe)[textarea]] はシステム標準の制御子が使われ、 ブラウザよりは使いやすくなっていたため)。 [[#comment]] ** 他との関係 [27] 複数行ではない文章入力制御子には、 [CODE(HTMLe)[[[input]]]] 要素型を使います。詳しくは [[[CODE(HTMLe)[input]]//[CODE(HTML)[text]]]] をご覧ください。 [28] [[WebTV]] の拡張では、 [CODE(HTMLe)[input]] 要素を使っても [CODE(HTMLa)[[[type]]]] を [CODE(HTML)[textarea]] とすることで複数行文章入力制御子を作成できます。 [8] かつて、 [[WinIE]] には [CODE(HTMLe)[[[htmlarea]]]] という [CODE(HTMLe)[textarea]] に似た要素型がありましたが、葬られました。 [[#comment]] ** 例 [26] 簡単な入力制御子の例 [SRC[HTML 4 17.7、改]] [PRE(HTML example)[

]PRE] この例では、20行80列の文章入力制御子を作成します。 その初期状態は、2行分の文字列が現在値となった状態です。 [[#comment]] ** メモ [[#comment]] * メモ [85] [CITE@ja[【楽天市場へ出店】無料資料請求はこちら!ネットショップ開店・運営のコツとは]] ([CODE[2007-07-04 19:49:40 +09:00]] 版) > [PRE(HTML invalid example code)[ ]PRE] おなじようなのが他にも1箇所。 ([[名無しさん]]) [86] [CITE[''''''[''''''whatwg'''''']'''''' Request for new DOM property textarea.selectionText]] ( ([TIME[2012-06-02 11:35:45 +09:00]] 版)) [87] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]] ( ([TIME[2014-04-07 05:30:01 +09:00]] 版)) [88] [CITE[ncsa-mosaic/libhtmlw/HTMLformat.c at master · alandipert/ncsa-mosaic]] ( ([TIME[2014-04-07 06:12:07 +09:00]] 版))