564

HTMLタグを使用する場合、属性と属性<input>の使用の違いは何ですか。特に、同じ名前が付けられていることがあります。nameid

4

13 に答える 13

294

HTML4.01 では:

名前属性

  • 、、、、、、、、<a>でのみ有効<form>_ <iframe>_ <img>_ <map>_<input><select><textarea>
  • 名前は一意である必要はなく、ラジオ ボタンやチェックボックスなどの要素をグループ化するために使用できます
  • URLで参照できませんが、JavaScriptとPHPはURLを見ることができるので回避策があります
  • JavaScript で参照されますgetElementsByName()
  • id属性と同じ名前空間を共有します
  • 文字で始まる必要があります
  • 仕様によると、大文字と小文字が区別されますが、最新のブラウザのほとんどはこれに従っていないようです
  • 情報を送信するためにフォーム要素で使用されます。属性を持つ入力タグのみnameがサーバーに送信されます

ID属性

  • <base>、<html>、<head>、<meta>、<param>、<script>を除くすべての要素<style>で有効<title>
  • 各 ID は、ブラウザでレンダリングされるページ内で一意である必要があります。すべてが同じファイル内にある場合とそうでない場合があります。
  • URL のアンカー参照として使用できます
  • #符号付きの CSS または URL で参照されている
  • JavaScript ではgetElementById()で、jQuery では で参照されます$(#<id>)
  • name 属性と同じ名前空間を共有します
  • 少なくとも 1 文字が含まれている必要があります
  • 文字で始まる必要があります
  • _文字、数字、アンダースコア ( )、ダッシュ ( -)、コロン ( :)、ピリオド ( .)以外は使用できません
  • 大文字と小文字を区別しない

(X)HTML5 では、以下を除いてすべて同じです。

名前属性

  • <form>これ以上有効ではありません
  • XHTML はすべて小文字でなければならないと言っていますが、ほとんどのブラウザはそれに従っていません

ID属性

  • どの要素でも有効
  • XHTML はすべて小文字でなければならないと言っていますが、ほとんどのブラウザはそれに従っていません

この質問は、HTML4.01 が標準であり、多くのブラウザーと機能が今日とは異なっていたときに書かれました。

于 2011-09-19T11:38:16.483 に答える
191

name 属性は、Web サーバーなどへの投稿に使用されます。idは主に CSS (および JavaScript) に使用されます。次の設定があるとします。

<input id="message_id" name="message_name" type="text" />

フォームを投稿するときに PHP で値を取得するには、次のようにname属性を使用します。

$_POST["message_name"];

id は、前に述べたように、特定の CSS コンテンツを使用する場合のスタイリングに使用されます。

#message_id
{
    background-color: #cccccc;
}

もちろん、id属性とname属性に同じ単位を使用できます。この 2 つは互いに干渉しません。

また、ラジオボタンを使用している場合など、より多くの項目に名前を使用できます。名前はラジオ ボタンのグループ化に使用されるため、これらのオプションの 1 つだけを選択できます。

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />

この非常に特殊なケースでは、さらにidがどのように使用されるかを説明できます。おそらく、ラジオ ボタンにラベルが必要になるからです。ラベルにはfor属性があり、入力のidを使用してこのラベルを入力にリンクします (ラベルをクリックすると、ボタンがチェックされます)。例を以下に示します

<input id="button_1" type="radio" name="option" /><label for="button_1">Text for button 1</label>
<input id="button_2" type="radio" name="option" /><label for="button_2">Text for button 2</label>
于 2011-09-19T11:45:56.153 に答える
72

IDは一意である必要があります

...ページ内のDOM要素ツリー。これにより、各コントロールは、クライアント側（ブラウザページ内）で個別にアクセスできます。id

  • ページに読み込まれたJavaScriptスクリプト
  • ページで定義されたCSSスタイル

ページに一意でないIDがある場合でもページはレンダリングされますが、確かに有効ではありません。無効なHTMLを解析する場合、ブラウザは非常に寛容です。しかし、それが機能しているように見えるという理由だけでそれをしないでください。

名前は非常に多くの場合一意ですが、共有することができます

...同じタイプの複数のコントロール間のページDOM内（ラジオボタンを考えてください）。したがって、データがサーバーにPOSTされると、特定の値のみが送信されます。したがって、ページに複数のラジオボタンがvalueある場合、同じの関連するラジオボタンコントロールがいくつかある場合でも、選択したものだけがサーバーにポストバックされますname。

サーバーへのデータ送信の補足：データがサーバーに送信されると（通常はHTTP POSTリクエストによって）、すべてのデータは名前と値のペアとして送信されます。ここで、名前はname入力HTMLコントロールの名前であり、値はvalue入力/選択されたとおりです。ユーザー。これは、Ajax以外のリクエストには常に当てはまります。Ajaxリクエストでは、開発者はサーバーに必要なものを送信できるため、名前と値のペアはページ上のHTML入力コントロールから独立させることができます。多くの場合、値は入力コントロールからも読み取られますが、必ずしもそうとは限りません。

名前を複製できる場合

任意のフォーム入力タイプのコントロール間で名前を共有すると便利な場合があります。でもいつ？サーバープラットフォームが何であるかについては述べていませんが、ASP.NET MVCのようなものを使用した場合は、自動データ検証（クライアントとサーバー）の利点が得られ、送信されたデータを強力な型にバインドすることもできます。つまり、これらの名前はタイププロパティ名と一致する必要があります。

ここで、次のシナリオがあるとします。

  • 同じタイプのアイテムのリストを含むビューがあります
  • ユーザーは通常、一度に1つのアイテムを操作するため、1つのアイテムのみでデータを入力し、サーバーに送信します。

したがって、ビューのモデル（リストが表示されるため）はタイプIEnumerable<SomeType>ですが、サーバー側はタイプの単一のアイテムのみを受け入れますSomeType。

では、名前の共有はどうですか？

各アイテムは独自のFORM要素内にラップされ、その中の入力要素は同じ名前を持っているため、データが（任意の要素から）サーバーに到達すると、コントローラーアクションで予期される文字列タイプに正しくバインドされます。

この特定のシナリオは、私のクリエイティブストーリーミニサイトで見ることができます。言語はわかりませんが、これらの複数のフォームと共有名を確認することはできます。IDsも重複していることを気にしないでください（これはルール違反です）が、それは解決できます。この場合は問題ではありません。

于 2011-09-19T11:35:56.767 に答える
35
  • nameフォームフィールドを識別します* ; そのため、そのようなフィールド（ラジオボタン、チェックボックス）の複数の可能な値を表すために立つコントロールで共有できます。フォーム値のキーとして送信されます。
  • idDOM要素を識別します。そのため、CSSまたはJavaScriptのターゲットにすることができます。

*名前'はローカルアンカーを識別するためにも使用されますが、これは非推奨であり、現在では'id'が推奨される方法です。

于 2013-01-22T16:56:38.273 に答える
13

name値が (URL または投稿されたデータで) 渡されるときに使用される名前です。CSS スタイルと JavaScript の要素を一意idに識別するために使用されます。

idアンカーとしても使用できます。昔は<a nameが使われていましたが、idアンカーにも を使うべきです。nameフォームデータを投稿するだけです。

于 2011-09-19T11:36:27.573 に答える
10

nameは、DOM (Document Object Model)でのフォーム送信に使用されます。

IDは、特に JavaScript と CSS で、DOM 内の HTML コントロールの一意の名前に使用されます。

于 2016-05-03T10:12:40.023 に答える
9

名前は、フォームが送信されるとすぐに属性の名前がどのようになるかを定義します。したがって、後でこの属性を読みたい場合は、POSTまたはGETリクエストの「名前」の下にあります。

idは、JavaScriptまたはCSSのフィールドまたは要素をアドレス指定するために使用されます。

于 2011-09-19T11:36:14.397 に答える
3

入力の属性は、その要素をリクエストの HTTP フォームのメンバーとして、またはリクエストのクエリ文字列として含めるためにname、その親 HTML によって使用されます。<form>POSTGET

はid、操作のために DOM 内の要素を選択するために JavaScript によって使用され、CSS セレクターで使用される必要があるため、一意である必要があります。

于 2011-09-19T11:36:17.900 に答える
3

次の簡単な例が参考になることを願っています。

<!DOCTYPE html>
<html>
<head>
  <script>
    function checkGender(){
      if(document.getElementById('male').checked) {
         alert("Selected gender: "+document.getElementById('male').value)
      }else if(document.getElementById('female').checked) {
         alert("Selected gender: "+document.getElementById('female').value)
      }
      else{
         alert("Please choose your gender")
      }
    }
  </script>
</head>
<body>
<h1>Select your gender:</h1>

<form>
  <input type="radio" id="male" name="gender" value="male">Male<br>
  <input type="radio" id="female" name="gender" value="female">Female<br>
  <button onclick="checkGender()">Check gender</button> 
</form> 
</body>
</html>

コードでは、「男性」または「女性」の間の任意性を定義するために両方の「名前」属性が同じですが、「ID」はそれらを区別するために等しくないことに注意してください。

于 2014-09-29T14:09:47.230 に答える
1

同じ名前を使用する興味深いケース: 次のようなinput型の要素checkbox:

<input id="fruit-1" type="checkbox" value="apple"  name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">

少なくとも応答が PHP によって処理される場合、両方のボックスをチェックすると、POST データは次のように表示されます。

$myfruit[0] == 'apple' && $myfruit[1] == 'orange'

nameそのような配列の構築が他のサーバー側言語で発生するのか、それとも属性の値が文字列としてのみ扱われ、0 から始まる配列が取得されるのは PHP 構文のまぐれなのかはわかりません。 POST 応答のデータの順序に基づいて作成されます。これは次のとおりです。

myfruit[]       apple
myfruit[]       orange

ID でそのようなトリックを行うことはできません。HTML の id 属性の有効な値は何ですか?のいくつかの回答 HTML 4 の仕様を引用しているように見えます (ただし、引用はしていません)。

ID および NAME トークンは文字 ([A-Za-z]) で始まり、その後に任意の数の文字、数字 ([0-9])、ハイフン ("-")、アンダースコア ("_") が続く場合があります、コロン (":")、およびピリオド (".")。

そのため、HTML4 の ID または名前では文字[と]は有効ではありません (HTML5 では問題ありません)。しかし、多くの html と同様に、有効でないからといって、それが機能しない、または非常に有用ではないという意味ではありません。

于 2015-01-10T15:47:31.577 に答える
-1

JavaScript/CSS を使用している場合は、コントロールの「id」を使用して CSS/JavaScript を適用する必要があります。

nameを使用すると、CSS はそのコントロールに対して機能しません。たとえば、テキスト ボックスにアタッチされた JavaScript カレンダーを使用する場合、テキスト コントロールのIDを使用して JavaScript カレンダーを割り当てる必要があります。

于 2014-06-19T13:20:56.160 に答える