form 要素 (HTML)

[23] HTML の form 要素は、フォームの包含子です。フォームの配置と提出先・提出方法を記述します。

[24] 仕様書:

HTML 4 (Web Forms 1.0)
- 17.3 FORM element IW:HTML4:"interact/forms.html#edef-FORM"
XHTML 1.0 http://www.w3.org/TR/xhtml1/#prohibitions
Web Forms 2.0
- 2.3. Changes to existing controls IW:WF2:"#changes"
- 2.18. Handling unexpected elements and values IW:WF2:"#handling"
- http://www.whatwg.org/specs/web-forms/current-work/#additions

状態: W3C 勧告
名前空間URI: http://www.w3.org/1999/xhtml
局所名: form (フォーム (form) より)
開始タグ: 必須
終了タグ: 必須
内容モデル: 零個以上のブロック水準要素 (例外規定あり: >>39)
出現できる文脈: ブロック水準要素が認められる場所、または head の子供として

[29] HTML 4 DTD 注釈 (参考) では interactive form (対話的フォーム) と説明されています。

属性

[12] form 要素の内容属性

属性名	属性値	既定値	説明	状態	出典
`accept`	`%ContentTypes`		受入れ媒体型	[HTML 4]
`accept-charset`	`%Charsets`		受入れ charset	[HTML 4]
`action`	`%URI`	(必須)	フォーム処理器	[HTML 4]
`autocomplete`			自動補完	非標準	WinIE
`class`			級	[HTML4] %coreattr
`dir`			書字方向	[HTML4] %i18n
`enctype`	`%ContentType`		提出媒体型	[HTML 4]
`id`			一意識別子	[HTML4] %coreattr
`lang`			自然言語	[HTML4] %i18n
`xml:lang`			自然言語	[XHTML1]
`lcs`				非標準	iモード
`measure`				非標準	EMOBILE
`method`		`get`	提出方式	[HTML 4]
`name`			フォーム名	[HTML 4]
`onclick`				[HTML4] %events
`ondblclick`				[HTML4] %events
`onkeydown`				[HTML4] %events
`onkeypress`				[HTML4] %events
`onkeyup`				[HTML4] %events
`onmousedown`				[HTML4] %events
`onmousemove`				[HTML4] %events
`onmouseout`				[HTML4] %events
`onmouseover`				[HTML4] %events
`onmouseup`				[HTML4] %events
`onreset`	`%Script`		フォーム再設定時	[HTML 4]
`onsubmit`	`%Script`		フォーム提出時	[HTML 4]
`runat`	`server`			非標準
`style`			スタイル情報	[HTML4] %coreattr
`subject`	`%Text`		主題
`target`	`%FrameTarget`		対象フレーム	[HTML 4] 非推奨
`title`			注釈的題	[HTML4] %coreattr
`utn`	(ブール型属性)	(偽)	製造番号送信	非標準	iモード

[59] とほほでは urn 属性が紹介されていますが、 utn の誤りと見られます。

<form> - フォーム (2006-10-01 23:42:22 +09:00 版) http://www.tohoho-web.com/html/form.htm

内容

[26] form 要素の内容としては、フォームの配置 (layout) を記述します HTML 4 17.3。具体的には、フォーム外同様の通常の内容・マークに加えて、フォーム制御子やフォーム制御子の札 (ラベル) を記述できます。

[11] input 要素などは行内要素扱いですから、直接内容に持つことは出来ませんので注意が必要です。 (Transitional とかだと話は別ですが。) form の直接の子供になれるのは p 要素などのブロック水準要素です。

[31] HTML Working Group Voyager Issue Tracking System - Modularization-abstractions/591 http://hades.mn.aptest.com/cgi-bin/voyager-issues/Modularization-abstractions?id=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] 2006-02-15 08:59:39 +00:00)

HTML 5 内容モデル

[39] Web Forms 2.0 では、次の内容が認められています WF2 2.3:

空要素にする。
- form は空にして構いません。
- head 内の form は空にしなければなりません。
ブロック水準要素だけを子供とする。
- 原則として、 form の子供はブロック水準要素としなければなりません。
行内水準内容だけを子供とする。
- form 要素の祖先の1つがブロック水準要素と行内水準内容の両方を認めていて、
- しかもそれが div 要素ではない場合。

空要素

[32] Web Forms 2.0 では、 form 要素は空にして構いません。また、空のとき、 head 内に入れることができます (>>33)。 WF2 2.3

`form` の入れ子

[16] form 要素の子孫に form 要素は存在できません XHTML 1.0。

[36] Web Forms 2.0 では、 form を form の子孫にすることが認められています。 WF2 2.3

[37] HTML 直列化

(XHTML ではなく) HTML では、 form 要素内の <form> 開始タグは虫されるのが普通なので、 form の入れ子は認められていません。 WF2 2.3

HTML として構文解析した文書でも、 DOM を通じて form 内に form を入れることはできます。

[38] フォーム間の関係

入れ子にしても、フォーム間に意味的な関係はありません。フォーム制御子は通常直近の祖先であるフォームだけに関連付けられます。フォーム関連の属性や事象も、 (DOM で規定された通常通りの事象の泡立ちはありますが) どちらかのフォームだけに関係します。

メモ

文脈

`head` の子供

[33] form は、内容が空の場合に限り、 head の子供とすることができます。 WF2 2.3

[34] Web Forms 2.0 で導入された form 属性により、フォーム制御子は form 外であっても特定の form と関連付けることができるようになりました。従いまして、フォーム制御子は直接 body の子孫とし、それに対応する form 要素は head 要素に入れるという使い方ができます。

これは、 XForms のフォームの定義方法とも似ています。

[35] HTML 直列化との関係

(XHTML ではなく) HTML では、 <form> 開始タグが出現すると body 要素が開いていると構文解析されてしまいます。

例えば、

<html>
<head>
<title>空の form の例</title>
<form></form>
<h1>空の <code lang="en">form</code> の例</h1>
</body>
</html>

は

<html>
<head>
<title>空の form の例</title>
</head><body><form></form>
<h1>空の <code lang="en">form</code> の例</h1>
</body>
</html>

と解釈されてしまいます。

そう解釈されてもフォームとしての機能は変わりありませんが、 DOM による操作や CSS によるレンダリングなどでの扱いが変わります。また、他の要素のタグの位置によっては文書が不適合となります。

HTML として構文解析した文書でも、後から DOM により head 内に form を入れることはできます。

状態

[3]

constructing entry list
planned navigation
提出イベント群発火中

メンバー

[2]

requestAutocomplete

レンダリング

[57] head 内の非空 form

通常利用者エージェントは head 要素の内容をレンダリングしませんから、空でない form が head 内に含まれていても、特別な処理は必要ありません。 CSS 等により head 要素内の form をレンダリングすることにした場合、 form は通常通り (body 内と同じように) 動作しなければなりません。 WF2 2.18

安全性

フォームの安全性の項を参照。

例

[27] 単純なフォームの例 HTML 4 27.3、改

 <FORM action="http://somesite.example/prog/adduser" method="post">
 ...form contents...
 </FORM>

このフォームの場合、提出すると adduser というフォーム処理エージェントに HTTP POST を使ってフォームのデータを送信します。

実装

[21] 伝統的にフォームの各欄に入力していても、提出しないでブラウザを閉じたり他の頁に移動したりしたときに、ブラウザは何も言ってくれません。頁移動はともかく、閉じてしまったら、入力途中のデータは失われます。これって不親切だと思いませんか。っていうか、間違って終了させちゃったんだよなあ。。。書きかけのデータが水の泡。。。

[22] >>21 とりあえず著者ができることとして、 onunload で check して終了をとめられないかなあ。

[28] 途中で別の作業が入って、また後から続きを・・・と言うこともあるので、ブラウザに中途保存機能がついていると便利かも。最近のブラウザはフォームの自動補完機能がついているものが多いですから、利用者が意図的に保存できても良いはずです。

(嘆かわしいことですがブラウザや環境が突然動かなくなることがたまにありますから、こまめに保存できるといいですよね。自動保存だとなお良い。)

[60] IE6 Form Tag Orphans by jpsykes (2007-09-29 12:45:21 +09:00 版) http://jpsykes.com/92/ie6-form-tag-orphans (名無しさん)

不思議解釈

[14] form 要素の典型的な既定スタイル・シートでのレンダリングでは form 要素の周囲に余白が空くことがあるので、 td 要素の内容にするときには <form> タグを <td> タグの外に出すといい、という素晴らしき不思議マーク付けの裏技があるそうです。

[30] nodeType 8 and getElementsByTagName - Anne’s Weblog about Markup & Style http://annevankesteren.nl/2005/10/msn-sessions

WinIE 6 が form タグのところで (も) 滅茶苦茶な文書木 (のようなもの) を作るというお話。 (名無しさん 2005-10-31 00:10:13 +00:00)

メモ

[17] mailto: URI のとき、 NN2 はその宛先のメイル作成画面を開きますが、それ以上は何もしてくれません。 (入力欄の値はまったく反映されません。)

[18] >>17 NC4.01 で試してみたら、同じ結果になりました。でも電子メイルで送信します云々の警告は出るので、対応はしてるはずなんですが。謎です。

[20] >>17 のようなのはブラウザと MUA の相性で今でもよくあることみたいです。というわけで、 JavaScript を使って無理矢理送らせる方法 : フォームの送信について http://www.parkcity.ne.jp/~chaichan/qanda/qa4468.htm。非本質的で呆れて物も言えなくなるような汚いやり方で、よくもまあこんなの思いつくなあという感じではありますが、誰も form + mailto: を標準化しようとしない以上どうしようもないのかも。