* [CODE(HTMLe)@en[form]] 要素 (HTML) [23] [[HTML]] の [DFN[[CODE(HTMLe)[form]] 要素]]は、 [[フォーム]]の[[包含子]]です。フォームの配置と提出先・提出方法を記述します。 [24] 仕様書: - [[HTML 4]] ([[Web Forms 1.0]]) -- 17.3 [CODE(HTMLe)[FORM]] element - [[XHTML 1.0]] - [[Web Forms 2.0]] -- [CSECTION@en[2.3. Changes to existing controls]] -- [CSECTION@en[2.18. Handling unexpected elements and values]] [25] :状態:[[W3C]] [[勧告]] :[[名前空間URI]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]] :[[局所名]]:[CODE(HTMLe)@en[[[form]]]] ([Q@en[[RUBYB[[[フォーム]]] [[[form]]]]より)]] :[[開始タグ]]:必須 :[[終了タグ]]:必須 :[[内容モデル]]:零個以上の[[ブロック水準要素]] (例外規定あり: >>39) :出現できる文脈: [[ブロック水準要素]]が認められる場所、または [CODE(HTMLe)@en[[[head]]]] の[[子供]]として :[[属性]]: ,[[属性名]] ,[[属性値]] ,[[既定値]] ,説明 ,状態 ,出典 ,[CODE(HTMLa)[[[accept]]]] ,[CODE(SGML)[%[[ContentTypes]]]] , ,受入れ媒体型 ,[HTML 4] ,[CODE(HTMLa)[[[accept-charset]]]] ,[CODE(SGML)[%[[Charsets]]]] , ,受入れ [[charset]] ,[HTML 4] ,[CODE(HTMLa)[[[action]]]] ,[CODE(SGML)[%[[URI]]]] ,(必須) ,フォーム処理器 ,[HTML 4] ,[CODE(HTMLa)@en[[[autocomplete]]]] , , ,[[自動補完]] ,非標準 ,[[WinIE]] ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML4] %[[i18n]] ,[CODE(HTMLa)[[[enctype]]]] ,[CODE(SGML)[%[[ContentType]]]] , ,提出媒体型 ,[HTML 4] ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1] ,[CODE(HTMLa)@en[[[lcs]]]] , , , ,非標準 ,[[iモード]] ,[CODE(HTMLa)@en[[[measure]]]],,,,非標準,[[EMOBILE]] ,[CODE(HTMLa)[[[method]]]] , ,[CODE(HTML)[[[get]]]] ,提出方式 ,[HTML 4] ,[CODE(HTMLa)[[[name]]]] , , ,フォーム名 ,[HTML 4] ,[CODE(HTMLa)[[[onclick]]]] , , , ,[HTML4] %[[events]] ,[CODE(HTMLa)[[[ondblclick]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeydown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeypress]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeyup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousedown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousemove]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseout]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseover]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onreset]]]] ,[CODE(SGML)[%[[Script]]]] , ,フォーム[[再設定]]時 ,[HTML 4] ,[CODE(HTMLa)[[[onsubmit]]]] ,[CODE(SGML)[%[[Script]]]] , ,フォーム[[提出]]時 ,[HTML 4] ,[CODE(HTMLa)@en[[[runat]]]] ,[CODE(HTML example)@en[[[server]]]] , , ,非標準 ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[subject]]]] ,[CODE(SGML)[%[[Text]]]] , ,主題 , ,[CODE(HTMLa)[[[target]]]] ,[CODE(SGML)[%[[FrameTarget]]]] , ,対象フレーム ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML4] %coreattr ,[CODE(HTMLa)@en[[[utn]]]] ,([[ブール型属性]]) ,([[偽]]) ,製造番号送信 ,非標準 ,[[iモード]] ,[CODE(HTMLa)@en[[[z]]]] ,([[真偽値属性]]) ,([[偽]]) , ,非標準 ,[Vodafone] [29] HTML 4 DTD [[注釈]] (参考) では [Q[interactive form]] (対話的フォーム) と説明されています。 [59] [[とほほ]]では [CODE(HTMLa)@en[[[urn]]]] [[属性]]が紹介されていますが、 [CODE(HTMLa)@en[[[utn]]]] の誤りと見られます。 ;; [CITE[
- フォーム]] ([CODE[2006-10-01 23:42:22 +09:00]] 版) ** 内容 [26] [CODE(HTMLe)[form]] 要素の内容としては、 フォームの[RUBYB[配置] [layout]]を記述します [SRC[HTML 4 17.3]]。 具体的には、フォーム外同様の通常の[[内容]]・[[マーク]]に加えて、 フォーム[[制御子]]やフォーム制御子の[RUBY[札] [ラベル]]を記述できます。 [11] [CODE(HTMLe)[[[input]]]] 要素などは[[行内要素]]扱いですから、 直接内容に持つことは'''出来ません'''ので注意が必要です。 (Transitional とかだと話は別ですが。) [CODE(HTMLe)[[[form]]]] の直接の子供になれるのは [CODE(HTMLe)[[[p]]]] 要素などの[[ブロック水準要素]]です。 [31] [CITE[HTML Working Group Voyager Issue Tracking System - Modularization-abstractions/591]] > Should we intentionally attempt to support the legacy content models in the legacy redecl module? > No - it _could_ break compatibility, and we don't want to do that in a second edition. ([[名無しさん]] [sage] [WEAK[2006-02-15 08:59:39 +00:00]]) [[#comment]] *** HTML 5 内容モデル [39] [[Web Forms 2.0]] では、次の[[内容]]が認められています [SRC@en[WF2 2.3]]: - [[空要素]]にする。 -- [CODE(HTMLe)@en[[[form]]]] は[[空]]に[['''して構いません''']]。 -- [CODE(HTMLe)@en[[[head]]]] 内の [CODE(HTMLe)@en[[[form]]]] は[[空]]にしなければなりません。 - [[ブロック水準要素]]だけを[[子供]]とする。 -- 原則として、 [CODE(HTMLe)@en[[[form]]]] の[[子供]]は[[ブロック水準要素]]と[['''しなければなりません''']]。 - [[行内水準内容]]だけを[[子供]]とする。 -- [CODE(HTMLe)@en[[[form]]]] [[要素]]の[[祖先]]の1つが [[ブロック水準要素]]と[[行内水準内容]]の両方を認めていて、 -- しかもそれが [CODE(HTMLe)@en[[[div]]]] [[要素]]では''ない''場合。 [[#comment]] *** 空要素 [32] [[Web Forms 2.0]] では、 [CODE(HTMLe)@en[[[form]]]] [[要素]]は[[空]]に[['''して構いません''']]。 また、[[空]]のとき、 [CODE(HTMLe)@en[[[head]]]] 内に入れることができます (>>33)。 [SRC@en[WF2 2.3]] [[#comment]] *** [CODE(HTMLe)@en[form]] の入れ子 [16] [CODE(HTMLe)[form]] 要素の子孫に [CODE(HTMLe)[form]] 要素は存在できません [SRC[XHTML 1.0]]。 [36] [[Web Forms 2.0]] では、 [CODE(HTMLe)@en[[[form]]]] を [CODE(HTMLe)@en[[[form]]]] の[[子孫]]にすることが認められています。 [SRC@en[WF2 2.3]] [37] '''HTML 直列化''' ([[XHTML]] ではなく) [[HTML]] では、 [CODE(HTMLe)@en[[[form]]]] [[要素]]内の [CODE(HTML)@en[<[CODE(HTMLe)@en[[[form]]]]>]] [[開始タグ]]は虫されるのが普通なので、 [CODE(HTMLe)@en[[[form]]]] の[[入れ子]]は認められていません。 [SRC@en[WF2 2.3]] ;; [[HTML]] として[[構文解析]]した[[文書]]でも、 [[DOM]] を通じて [CODE(HTMLe)@en[[[form]]]] 内に [CODE(HTMLe)@en[[[form]]]] を入れることはできます。 [38] '''フォーム間の関係''' [[入れ子]]にしても、[[フォーム]]間に意味的な関係はありません。 [[フォーム制御子]]は通常直近の[[祖先]]である[[フォーム]]だけに関連付けられます。 [[フォーム]]関連の[[属性]]や[[事象]]も、 [WEAK[([[DOM]] で規定された通常通りの[[事象]]の[[泡立ち]]はありますが)]] どちらかの[[フォーム]]だけに関係します。 [[#comment]] *** メモ [[#comment]] ** 文脈 *** [CODE(HTMLe)@en[head]] の子供 [33] [CODE(HTMLe)@en[[[form]]]] は、[[内容]]が[[空]]の場合に限り、 [CODE(HTMLe)@en[[[head]]]] の[[子供]]とすることができます。 [SRC@en[WF2 2.3]] [34] [[Web Forms 2.0]] で導入された [CODE(HTMLa)@en[[[form]]]] [[属性]]により、[[フォーム制御子]]は [CODE(HTMLe)@en[[[form]]]] 外であっても特定の [CODE(HTMLe)@en[[[form]]]] と関連付けることができるようになりました。 従いまして、[[フォーム制御子]]は直接 [CODE(HTMLe)@en[[[body]]]] の子孫とし、それに対応する [CODE(HTMLe)@en[[[form]]]] [[要素]]は [CODE(HTMLe)@en[[[head]]]] [[要素]]に入れるという使い方ができます。 ;; これは、 [[XForms]] の[[フォーム]]の定義方法とも似ています。 [35] '''HTML 直列化との関係''' ([[XHTML]] ではなく) [[HTML]] では、 [CODE(HTML)@en[<[CODE(HTMLe)@en[[[form]]]]>]] [[開始タグ]]が出現すると [CODE(HTMLe)@en[[[body]]]] [[要素]]が[[開いている]]と[[構文解析]]されてしまいます。 例えば、 [PRE(HTML example code)[ 空の form の例

空の form の例

]PRE] は [PRE(HTML example code)[ 空の form の例 ''''''

空の form の例

]PRE] と解釈されてしまいます。 ;; そう解釈されても[[フォーム]]としての機能は変わりありませんが、 [[DOM]] による操作や [[CSS]] による[[レンダリング]]などでの扱いが変わります。 また、他の[[要素]]の[[タグ]]の位置によっては[[文書]]が[[不適合]]となります。 ;; [[HTML]] として[[構文解析]]した[[文書]]でも、 後から [[DOM]] により [CODE(HTMLe)@en[[[head]]]] 内に [CODE(HTMLe)@en[[[form]]]] を入れることはできます。 [[#comment]] *** メモ [[#comment]] ** レンダリング [57] '''[CODE(HTMLe)@en[head]] 内の非空 [CODE(HTMLe)@en[form]]''' 通常[[利用者エージェント]]は [CODE(HTMLe)@en[[[head]]]] [[要素]]の[[内容]]を[[レンダリング]]しませんから、 [[空]]でない [CODE(HTMLe)@en[[[form]]]] が [CODE(HTMLe)@en[[[head]]]] 内に含まれていても、 特別な処理は必要ありません。 [[CSS]] 等により [CODE(HTMLe)@en[[[head]]]] [[要素]]内の [CODE(HTMLe)@en[[[form]]]] を[[レンダリング]]することにした場合、 [CODE(HTMLe)@en[[[form]]]] は通常通り ([CODE(HTMLe)@en[[[body]]]] 内と同じように) 動作[['''しなければなりません''']]。 [SRC@en[WF2 2.18]] [[#comment]] ** 安全性 [[フォーム]]の安全性の項を参照。 ** 例 [27] 単純なフォームの例 [SRC[HTML 4 27.3、改]] [PRE(HTML)[
...form contents...
]PRE] このフォームの場合、提出すると [SAMP(URI)[adduser]] というフォーム処理エージェントに [[HTTP]] [CODE(HTTP)[[[POST]]]] を使ってフォームのデータを送信します。 [[#comment]] ** 実装 [21] 伝統的にフォームの各欄に入力していても、 提出しないでブラウザを閉じたり他の頁に移動したりしたときに、 ブラウザは何も言ってくれません。頁移動はともかく、閉じてしまったら、 入力途中のデータは失われます。これって不親切だと思いませんか。 [WEAK[っていうか、間違って終了させちゃったんだよなあ。。。書きかけのデータが水の泡。。。]] [22] >>21 とりあえず[[著者]]ができることとして、 [CODE(HTMLa)[[[onunload]]]] で check して終了をとめられないかなあ。 [28] 途中で別の作業が入って、また後から続きを・・・ と言うこともあるので、ブラウザに中途保存機能がついていると便利かも。 最近のブラウザはフォームの自動[[補完]]機能がついているものが多いですから、 利用者が意図的に保存できても良いはずです。 (嘆かわしいことですがブラウザや環境が突然動かなくなることがたまにありますから、 こまめに保存できるといいですよね。自動保存だとなお良い。) [60] [CITE[IE6 Form Tag Orphans by jpsykes]] ([CODE[2007-09-29 12:45:21 +09:00]] 版) ([[名無しさん]]) [[#comment]] ** 不思議解釈 [14] [CODE(HTMLe)[form]] 要素の典型的な[[既定スタイル・シート]]でのレンダリングでは [CODE(HTMLe)[form]] 要素の周囲に余白が空くことがあるので、 [CODE(HTMLe)[[[td]]]] 要素の内容にするときには [CODE(HTML)[<[CODE(HTMLe)[form]]>]] [[タグ]]を [CODE(HTML)[<[CODE(HTMLe)[td]]>]] タグの外に出すといい、 という素晴らしき[[不思議マーク付け]]の[[裏技]]があるそうです。 [30] [CITE@en[nodeType 8 and getElementsByTagName - Anne’s Weblog about Markup & Style]] [[WinIE 6]] が [CODE(HTMLe)@en[[[form]]]] [[タグ]]のところで (も) 滅茶苦茶な[[文書木]] (のようなもの) を作るというお話。 ([[名無しさん]] [WEAK[2005-10-31 00:10:13 +00:00]]) [[#comment]] ** メモ - [17] [CODE(URI)[[[mailto:]]]] URI のとき、 [[NN2]] はその宛先のメイル作成画面を開きますが、それ以上は何もしてくれません。 (入力欄の値はまったく反映されません。) [18] >>17 [[NC]]4.01 で試してみたら、同じ結果になりました。でも電子メイルで送信します云々の警告は出るので、対応はしてるはずなんですが。謎です。 - [20] >>17 のようなのはブラウザと MUA の相性で今でもよくあることみたいです。というわけで、 [[JavaScript]] を使って無理矢理送らせる方法 : ''フォームの送信について'' 。非本質的で呆れて物も言えなくなるような汚いやり方で、よくもまあこんなの思いつくなあという感じではありますが、誰も [CODE(HTML)[form]] + [CODE(URI)[mailto:]] を標準化しようとしない以上どうしようもないのかも。 [[#comment]] * [CODE(HTMLa)@en[form]] 属性 (HTML) [40] [[HTML]] の[[フォーム制御子]]等の [DFN[[CODE(HTMLa)@en[form]] [[属性]]]]は、 [[フォーム制御子]]が所属する[[フォーム]]を指定します。 [41] :状態:[[WHATWG]] [[WD]] :[[要素型]]:[[フォーム制御子]]、[CODE(HTMLe)@en[[[fieldset]]]] :[[属性名]]:[CODE(HTMLa)@en[[[form]]]] ([Q@en[[[form]]]] ([Q@en[[[フォーム]]]]) より) :[[属性値]]:[CODE@en[[[IDREFS]]]] (>>42) :[[既定値]]:([[先祖]]により決定) (>>43) [44] 仕様書: - [[Web Forms 2.0]] -- [CSECTION@en[2.8. The [CODE(HTMLa)@en[[[form]]]] attribute]] ** 属性値 [42] [CODE(HTMLa)@en[[[form]]]] [[属性値]]は、 零個以上の [CODE(HTMLe)@en[[[form]]]] [[要素]]の [CODE(XML)@en[[[ID]]]] の[[空白]]区切り[[並び]]です。 [SRC@en[WF2 2.8]] [43] [[フォーム制御子]]は通常[[先祖]]の [CODE(HTMLe)@en[[[form]]]] と関連付けられますが、 [CODE(HTMLa)@en[[[form]]]] [[属性]]はこれを上書きし、 関連付ける[[フォーム]]を明示的に指定します。 [SRC@en[WF2 2.8]] [46] 指定された [CODE(XML)@en[[[ID]]]] のうち、 [[文書]]中の[[要素]]を[[識別]]しないものや、 [CODE(HTMLe)@en[[[form]]]] [[要素]]を[[識別]]しないものは、 無視[['''しなければなりません''']]。 [SRC@en[WF2 2.8]] [47] [[空文字列]]を[[属性値]]として指定する (か、 >>46 の無視の結果 [CODE(XML)@en[[[ID]]]] が1つも含まれない) と、 [[フォーム制御子]]はどの[[フォーム]]にも関連付けられていない状態となります。 [SRC@en[WF2 2.8]] [48] [CODE(HTMLe)@en[[[fieldset]]]] [[要素]]に指定した場合は、 その[[子孫]]の[[フォーム制御子]]を関連付ける[[フォーム]]を指定します。 [SRC@en[WF2 2.8]] ;; [[子孫]]の[[フォーム制御子]]や [CODE(HTMLe)@en[[[fieldset]]]] で更に [CODE(HTMLa)@en[[[form]]]] が指定されている場合は、 そちらが優先します。 [[#comment]] ** フォームの決定 [49] [[利用者エージェント]]は、[[フォーム制御子]]や [CODE(HTMLe)@en[[[fieldset]]]] [[要素]]に関連付ける[[フォーム]]を次のように決定[['''しなければなりません''']] [SRC@en[WF2 2.8]]: = [CODE(HTMLa)@en[[[form]]]] [[属性]]があれば、 それに従います。 = [[直近]]の[[先祖]]である [CODE(HTMLe)@en[[[form]]]] [[要素]]か、 [CODE(HTMLa)@en[[[form]]]] [[属性]]がある [CODE(HTMLe)@en[[[fieldset]]]] [[要素]]があれば、 その[[フォーム]]とします。 = なければ、どの[[フォーム]]にも関連付けないとします。 [[#comment]] ** フォーム操作との関係 [50] [[提出]][[ボタン]] ([CODE(HTML)@en[[[submit]]]]) や[[画像]] ([CODE(HTMLe)@en[[[image]]]]) は、 関連付けられた最初の[[フォーム]]のみを[[提出]][['''しなければなりません''']]。 [SRC@en[WF2 2.8]] [51] [[再設定]][[ボタン]] ([CODE(HTML)@en[[[reset]]]]) は、関連付けられたすべての[[フォーム]]を[[再設定]][['''しなければなりません''']]。 [SRC@en[WF2 2.8]] [[#comment]] ** 誤り処理 [52] [[文書]]中に複数現れる [CODE(XML)@en[[[ID]]]] が [CODE(HTMLa)@en[[[form]]]] に指定された時に選択される[[フォーム]]は、 [CODE(DOMm)@en[[[getElementById]]]] [[メソッド]]と同じものと[['''しなければなりません''']]。 [SRC@en[WF2 2.8]] ;; [CODE(DOMm)@en[[[getElementById]]]] [[メソッド]]は、 その場合の動作は[[未定義]]としています。 しかし、 [CODE(HTMLa)@en[[[form]]]] もそれと同じように動作しなければならない、ということです。 [53] [CODE(HTMLa)@en[[[form]]]] [[属性値]]中に同じ[[フォーム]]を複数回指定[['''してはなりません''']]。 [[利用者エージェント]]は、その場合、 最初の指定を除き、無視[['''しなければなりません''']]。 [SRC@en[WF2 2.8]] [[#comment]] ** 歴史 [56] この[[属性]]は [[Web Forms 2.0]] で導入されました。 [61] [CITE[Cougar: ideas for ,]] ([TIME[2004-08-06 01:45:46 +09:00]] 版) [CODE(HTMLa)@en[[[form]]]] [[属性]]に相当する [CODE(HTMLa)@en[[[for]]]] [[属性]]が提案されていました。 ([[名無しさん]]) [[#comment]] ** 例 [54] [PRE(HTML example code)[
Name Value Action
]PRE] [[列]]ごとに別の[[フォーム]]になっています。 [SRC@en[WF2 2.8]] [CODE(HTMLe)@en[[tbody]]]] の[[内容モデル]]の定義から、 [[Web Forms 1.0]] ではこのように[[表]]と[[フォーム]]を組合せることができませんでした。 [55] [PRE(HTML example code)[
]PRE] テキスト欄は2つの[[フォーム]]に関連付けられています。 また、[[フォーム]]が3つあり、それぞれが[[提出]][[ボタン]]を持っています。 [SRC@en[WF2 2.8]] [Q@en[Google]] と [Q@en[Yahoo]] の2つのボタンは、 それぞれ別の[[フォーム処理エージェント]]に、 同じテキスト欄の内容を[[提出]]します。 最初の [Q@en[Test]] は、 [[Web Forms 2.0]] に適合した[[利用者エージェント]]では、 テキスト欄の内容を[[提出]]しません。 未対応の[[利用者エージェント]]はテキスト欄の内容を[[提出]]します。 これは古い[[利用者エージェント]]のための fallback として使うことができます。 [58]
wwwmakingyourichercom
www makingyouricher com
wwwmakingyouricher
www makingyouricher
([[www makingyouricher com]] [uoptimer@yahoo.com] [WEAK[2007-05-26 17:50:56 +00:00]]) [[#comment]] ** メモ [[#comment]] * メモ [62] [CITE@en[(X)HTML5 Tracking]] ([TIME[2009-08-23 15:37:15 +09:00]] 版)