入力のid属性とname属性の違いの例

長い間ウェブサイトを作ってきましたが、入力時のnameとidの違いがまだわかりません。最近jQueryを勉強していて、またこの問題に遭遇したので、インターネットで情報を収集しました。この記事を見たとき、後で使用するために整理しました。

Web 開発を行ったことがある人なら、ほとんど誰もが「要素の ID と名前の違いは何ですか?」と疑問に思ったことがあるでしょう。 ID があるのに、なぜ名前が必要なのでしょうか? 最も典型的な答えも得られます。ID は人の ID 番号のようなもので、名前は名前のようなものです。ID は明らかに一意ですが、名前は繰り返すことができます。

先週、ID と名前の問題にも遭遇しました。ページに input type="hidden" と入力し、ID='SliceInfo' のみを記述しました。値を割り当てて送信した後、バックグラウンドで Request.Params["SliceInfo"] を使用しましたが、値を取得できませんでした。後で、Name を使用してマークする必要があることに気付いたので、入力に Name='SliceInfo' を追加したところ、すべて問題ありませんでした。

最初の段落の ID と名前に対する回答は一般的すぎます。もちろん、クライアント側の HTML 要素のアイデンティティである ID については、その説明は完全に正しいです。名前は実際にははるかに複雑です。名前には多くの用途があるため、ID で完全に置き換えてキャンセルすることはできません。具体的な用途は次のとおりです。

目的 1: input、select、textarea、button など、サーバーとデータを交換できる HTML 要素のサーバー側マーカーとして。サーバー側では、要素の名前に基づいて、Request.Params を通じて要素によって送信された値を取得できます。
使用法 2: HTML 要素 Input type='radio' のグループ化。ラジオボタンコントロールは同じグループクラスにあり、チェック操作は mutex であることがわかっています。一度に選択できるラジオボタンは 1 つだけです。このグループ化は、同じ Name 属性に基づいて実現されます。
使用方法 3: ページにアンカーを作成します。<a href="URL">link</a> はページハイパーリンクを取得するために使用します。href 属性を使用せず、代わりに Name (例: <a name="PageBottom"></a>) を使用すると、ページアンカーが取得されます。
アプリケーション 4: アプレット、オブジェクト、埋め込み、その他の要素などのオブジェクトの ID として。たとえば、Applet オブジェクトのインスタンスでは、その名前を使用してオブジェクトを参照します。
使用方法 5: IMG 要素を MAP 要素に関連付けるときに、IMG のホットスポット領域を定義する場合は、その属性 usemap を使用して、usemap="#name" (関連付けられている MAP 要素の名前) にする必要があります。
使用法 6: attribute、meta、param などの特定の要素の属性。たとえば、オブジェクトのパラメータ <PARAM NAME = "appletParameter" VALUE = "value"> を定義したり、Meta でパラメータ <META NAME = "Author" CONTENT = "Dave Raggett"> を定義したりします。

当然ながら、これらの用途は単純に ID に置き換えることはできません。そのため、HTML 要素の ID と名前の違いは、ID 番号と名前の違いとは異なり、基本的には機能が異なるものとなります。

もちろん、HTML 要素の Name 属性はページ内の ID としての役割も少し果たすことができます。これは、DHTML オブジェクトツリーでは、document.getElementsByName を使用して、ページ内の指定されたすべての Name 要素を含むオブジェクト配列を取得できるためです。 Name 属性には別の問題があります。Name 属性を含めることができる要素を動的に作成する場合、単純に element.name = "..." という割り当てを使用してその Name を追加することはできません。代わりに、要素を作成するときに document.createElement('<element name = "myName"></element>') を使用して要素に Name 属性を追加する必要があります。これはどういう意味ですか？理解するには次の例を見てください。

コードをコピー

コードは次のとおりです。

<スクリプト言語="JavaScript">
var input = document.createElement('INPUT');
入力ID = 'myId';
入力名 = 'myName';
アラート(input.outerHTML);
</スクリプト>

メッセージボックスに表示される結果は、<INPUT id=myId> です。

コードをコピー

コードは次のとおりです。

< スクリプト言語="JavaScript">
var input = document.createElement('<INPUT name="myName">');
入力ID = 'myId';
アラート(input.outerHTML);
</スクリプト>

メッセージボックスに表示される結果は、<INPUT id=myId name=myName> です。
Name プロパティを初期化する設計は、MSDN でそうするように言われているため IE の欠陥ではありませんが、この設計の原則は何ですか?まだ分かりません。

ところで、ページ上に同じ ID を持つ HTML 要素が n 個 (n>1) ある場合はどうなるでしょうか? DHTML オブジェクトでそれらを参照するにはどうすればよいでしょうか? ASPX ページを使用する場合、aspnet プロセスは aspx ページを処理するときに一意でない ID を許可しないため、この状況が発生する可能性は低くなります。この場合、ページで例外がスローされ、正常にレンダリングできません。動的ページではなく、ID を繰り返す必要がある場合、IE はどのような処理をすればよいでしょうか?現時点では、引き続き document.getElementById を使用してオブジェクトを取得することはできますが、重複した ID を持つオブジェクトのうち、HTML レンダリングに表示される最初のオブジェクトしか取得できません。この時、重複したIDは参照時に自動的に配列となり、重複したIDを持つ要素はRenderの順番に配列内に存在することになります。

フォーム要素（フォーム入力テキストエリア選択）とフレーム要素（iframeフレーム）は名前を使用します
これらの要素はすべてフォームの送信に関係します（フレーム要素はフォームの対象に作用します）。フォームの受信ページでは名前を持つ要素のみが受信されます。ID を持つ要素はフォームを通じて値を受け取ることはできません。これは自分で確認できます。
例外が1つあります。Aにはアンカーとして名前を割り当てることも、IDを割り当てることもできます。

もちろん、上記の要素にも ID 値を割り当てることができます。ID 値を割り当てる場合は、これらの要素を参照する方法を変更する必要があります。
名前の割り当て: document.formName.inputName document.frames("frameName")
ID の割り当て: document.getElementById("inputID") document.all.frameID

ID のみ割り当て可能で名前は割り当てられない要素: (ID のみ割り当て可能なフォーム関連要素を除く)
body li table tr td th p div span pre dl dt dd font b など。

<<: CSS における px、rem、em、vh、vw の違いを簡単に分析します

>>: Linux C++ マルチスレッド同期の非常に詳細な説明