formの名前はname? id?

質問

formの名前はnameかidのどちらでしょうか？

回答No.7

tanaka_otupai

「後方互換性～」の件を考慮するなら、将来廃止になる可能性を考えてid属性を使用します。
しかしHTML5ではformのname属性が非推奨でなくなる可能性があるように思えるのです。
その理由と、name属性が非推奨でない場合にどう使い分けるかを述べます。
あくまで臆測なので、実際に今から開発するならid属性を使用します。

■formのname属性が非推奨でなくなる可能性
ANo2にあるように、HTML4の仕様書には「この属性は後方互換性～」の注意書きがあります。
しかし、現在草案段階のHTML5の仕様書にはそれが見つかりません。
また、HTML4であってもformのname属性は「非推奨」ではありません。あくまでANo2さんが紹介している「注意書き」だけです。
XHTMLでは非推奨だったり廃止だったりしますが、XHTMLとHTMLは別物と思った方がいいでしょう。実際、W3CはXHTML2の策定を打ち切りHTML5の標準化に注力しています。
そこで、注意書きが無くなったから注意する必要がなくなった(非推奨ではなくなった)、という推測が立つわけです。

「HTML5 における HTML4 からの変更点」の「3.4. 変更された属性」項には「以前は非推奨だったが非推奨でなくなった」属性が記述されています。もともと非推奨でないname属性はこの中にはありませんが、このような変更があるということが先の推測を後押しします。
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/

■id属性とname属性の使い分け
ANo6にあるように、HTML5からid属性とname属性には明確な違いが出来ました。それを基に考えます。

【命名】
「formのname属性はform内で一意になればよい」この範囲の狭さは命名をする上でid属性より有利に働きます。
「id属性は全要素内で一意にならなければならない」これはすべての要素を考慮した名前を付ける必要があるということです。
例えば、ユーザー登録画面にformと登録ボタンがあるとします。
登録ボタンのidをentryとすれば、formのidをentryには出来なくなります。なのでentryButton, entryFormのように命名したりします。
名前というのは長くなるほど決めずらいものです。entryFormにしても、他にentryFrmやfrmEntryというパターンが考えられます。どのような命名規則にするかのルール決めが必要で、これがなかなか面倒なのです。
それがname属性であれば、どちらもentryと名付けられるのです。シンプルです。cssからの指定はform[name="entry"]のようにします。

【指定】
先の命名から続いて登録画面を考えます。「ボタンを一意に指定して色付けしたい」となったときそれぞれcssでは以下のように指定します。
#entryButton {color: red}
form[name="entry"] button[name="entry"] {color: red}

idの利点は短いことです。説明の必要はないでしょう。

nameの利点は要素を明確にせざるを得ないことです。
例えば以下のおかしなcss
#entryButton td {color: red}
form[name="entry"] button[name="entry"] td {color: red}

これをバグだと判断できるのはname属性の方だけです。(button要素の下にtd要素は置けない)
id属性の方はそれがtr要素に付いている可能性もあり、htmlを見ないことには判断ができません。
name属性の方がバグ探索に掛る手間が少ないのです。
id属性の方でもbutton#entryButtonとすれば同じですが、name属性の方はそれを強制できるという点が利点とも欠点とも言えます。
また、これはバグについていえば利点ですが、変更し易さでいえば欠点になります。(<button>ではなく<inputtype="button">に変更した場合とか)

【手段と目的】
formを一意にするためにはid属性を使用します。name属性ではありません。
このことはHTML5で登場する「form属性」が示唆を与えてくれます。
これはform要素外にinput要素などを配置可能にしてくれる属性です。
以下のようにすることで、input要素をform外に置くことが出来るのです。
<form id="entryForm"></form>
<input type="text" name="userName" form="entryForm" />
http://www.marguerite.jp/Nihongo/WWW/RefHTML5/Attrs/form.html
このform属性にはform要素のidを指定しなければなりません。nameは指定できないのです。
このことから、form要素を一意にする為にはid属性を使うべきだと思われます。

ではform要素のname属性は何に使うかですが、あえて使い分けるなら「id属性に出来ることをしないことを示す」為に利用します。
id属性ではなくname属性を使う事で、form外にinput要素が無い事を示せます。これはソースコードを読む上で役に立つ情報だと思います。

もう少し突き進めるなら、コードには表れない含意になりますが、「form要素の子要素を一意にする」為だけに利用します。
こうすることで、id属性と意味が重なっていた「form要素を一意にする」という部分が大幅に薄れます。
実際のコード上では以下のように利用することはあっても、
form[name="entry"] button[name="entry"]{ color: red}

以下のようには利用しない、
form[name="entry"] {color: red}

ということを含意させるのです。
そうすれば例えば、submitボタンを押して画面が真っ白になるバグに遭遇したときに、「form要素のaction属性にjavascriptから変更が及ぶことはない」とか考えて、バグの探索を短縮できるかもしれません。

【結論】
「form属性」のようなid指定が必要な属性が将来的に増えてくることを考えると、form要素を一意にする為にはid属性を使った方が無難だと思います。

■蛇足 - inputのname属性について
HTML5から新属性としてlabel要素にfor属性が加わりました。
このfor属性にidを指定することで、label要素外に対象となる要素を配置可能にします。
以下のような形です。
<label for="chk">ラベル</label>
<input type="checkbox" id="chk" />

これでも通常のラベルと同じように動作するのです。(画面に表示された「ラベル」という文字をクリックすることでチェックボックスのOnOffを切り替えられる)
これはデザインをする上で便利だったりするのですが、form属性と同じようにname属性は指定できません。id属性しかだめなのです。
それは当然のことです。inputのname属性はformが違えば名前を重複できるのですから、一意に指定する際には利用できないのです。
このことに対して私は憤りを感じました。

inputのname属性は便利です。
例えば、ユーザー登録画面とログイン画面が一体化したような画面では、登録用とログイン用の2つのformが必要になります。
それぞれの中には同じようにuserNameとpasswordがあるわけですが、これがinputにid属性しか使えないとなるとuserNameは2つあるのでuserName, userName2なんていう命名をしなくてはならない羽目になります。これは中々に面倒です。
どちらもuserNameと命名したいのが人情です。それをname属性は満たしてくれます。
cssで以下のようにして一括でデザインが与えられるのです。
input[name="userName"]{ color: red }
つまりformが違えば同じnameを使えるというのは私にとっては大きな利点なのです。

その上で一意指定もしたい。一意指定が必要な機会は中々に多くある。と考えると、inputのname属性を活かす為に、form要素に名前を付けることは必然のことだ、と思われました。
そのためにこそ、id属性という汎用属性ではなく、name属性という固有の属性が生き残ったのではないかと思ったのです。
もしform属性とfor属性が以下のように指定できれば、私の期待は達成されたでしょう。しかし現実は違いました。
<form name="frm"></form>
<label form="frm" for="chk">ラベル</label>
<input type="checkbox" form="frm" name="chk" />

現状、for属性がこんなことでありながら、input要素のname属性は残り続けています。
fieldset要素なんてのも出てきました。将来的にはチェックボックスのグループ化の為に同じnameを付ける必要がなくなるかもしれません。
HTMLでもname属性はid属性に乗っ取られる予定なのかもしれません。

回答No.6

think49

#5 です。某所で指摘を受けまして一部訂正します。

HTML Standard (HTML5) で規定されるform要素におけるname属性はform要素群の中で一意でなければなりません。(#3 の方が指摘された通りです)

そして、document.forms['foo'] が NodeList となり、document.forms['foo'][0] で参照する挙動は Google Chrome 18, Opera 11.61 のバグでした。
DOM4 では初めに検出したform要素を返す仕様であり、Firefox11, IE8 はこの仕様に準拠しています。
http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-htmlcollection
http://togetter.com/li/291230

id属性値は全ての要素の中で一意でなければなりませんが、form要素のname属性値はform要素の中で一意であればよい、という違いがあります。
<form name="hoge"> と <img name="hoge"> のように要素毎に同じ名前を付与する使い方が考えられますが、後方互換性のための属性ですし、特別な事情がなければあえてname属性を採用する理由はないと思います。

回答No.5

think49

まず、「formの名前」を定義してください。
その質問に至るまでの前提となるものがあると思いますが、それによって回答内容が変わってきます。

JavaScript で意識することがあるとすれば、document.forms[name] で辿れる名前が思いつきますが、document.forms ではID属性でもname属性でも同じように辿れます。
(※このことは HTML Standard (HTML5) で規定されており、http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-form-name の form[name] で説明されています。)

<form id="hoge" name="piyo"></form>
<script type="text/javascript">
console.log(document.forms['hoge']);
console.log(document.forms['piyo']);
</script>
http://jsfiddle.net/eGHD2/

ただし、name属性値はユニーク(唯一の名前)ではありません。

<form id="hoge1" name="foo"></form>
<form id="hoge2" name="foo"></form>
<script type="text/javascript">
console.log(document.forms['hoge1']);
console.log(document.forms['foo'][0]); // name="foo" は2つ存在するので index 値を指定しなければならない
</script>
http://jsfiddle.net/eGHD2/1/

用語定義としてはid属性はグローバル属性(全ての要素に定義できる属性)ですので、「要素の名前」ともいえます。
http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-id-attribute
form要素におけるname属性はform要素特有の名前ですので「form要素の名前」という解釈も出来ると思います。

いずれにしても質問に至るまでの経緯を知らない現状では、form要素の名前がid属性ともname属性とも断定できません。

回答No.4

b0a0a

id

回答No.3

神崎 渉瑠（@taloo）

http://dictionary.goo.ne.jp/srch/je/%E5%90%8D%E5%89%8D/m0u/

nameです。

回答No.2

ORUKA1951

idとnameは、似ているようですが、意味が違います。
idは、HTML内の特定の要素を一意に指定するものです。一方nameの値は重複しても構いません。
formに名前をつける場合に、nameを使うのは後方互換のためです。

「この属性は後方互換性のために含められた。要素を識別する目的には、アプリケーションは id属性を用いる必要がある。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#adef-name-FORM )」
　この場合(form要素で使われる場合は、一意でなければなりません。)

　これはHTML5であっても同様です。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
The name attribute represents the form's name within the forms collection. The value must not be the empty string, and the value must be unique amongst the form elements in the forms collection that it is in, if any.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.10.3 The form element — HTML5( http://www.w3.org/TR/html5/the-form-element.html#attr-form-name )］より
　「name属性は、フォームコレクション内のフォームの名前を表します。値は空の文字列にすることはできません、任意の場合、この値は、複数のフォームコレクションが存在する場合、すべてのフォーム要素間で一意である必要がある。」

　そして、formのname属性は、コントロールのnameと異なりサーバーには送られませんから、nameを使う必要はないでしょう。

回答No.1

noname#182841

nameです。