HTML4.01の場合：
名前 属性
<a>、<form>、<iframe>、<img>、<map>、<input>、<select>、<textarea>でのみ有効です- 名前は一意である必要はなく、ラジオボタンやチェックボックスなどの要素をまとめてグループ化するために使用できます。
- URLでは参照できませんが、JavaScriptおよびPHPではURLを参照できますが、回避策があります。
- JSでは
getElementsByName()で参照されています id属性と同じ名前空間を共有します- 文字で始める必要があります
- 仕様によると大文字と小文字が区別されますが、ほとんどの最近のブラウザはこれに従っていないようです
- 情報を送信するためにフォーム要素で使用されます。
name属性を持つ入力タグのみがサーバーに送信されます
Id 属性
<base>、<html>、<head>、<meta>、<param>、<script>、<style>、<title>以外の任意の要素で有効- 各Idは、ブラウザに表示される page 内で一意である必要があります。これは、すべて同じ file に含まれる場合とそうでない場合があります。
- URLのアンカー参照として使用できます
- CSSまたはURLで
#記号で参照されている - JSでは
getElementById()、jQueryは$(#<id>)で参照されています。 - Name属性と同じ名前空間を共有します
- 少なくとも1文字含まれている必要があります
- 文字で始める必要があります
- 文字、数字、アンダースコア（
_）、ダッシュ（-）、コロン（:）、またはピリオド（.）以外のものを含めることはできません。 - 大文字と小文字は区別されません
（X）HTML 5では、すべてが同じです。
名前 属性
<form>では無効です- XHTMLはそれがすべて小文字でなければならないと言います、しかし、ほとんどのブラウザはそれに従いません
Id 属性
- 任意の要素に有効
- XHTMLはそれがすべて小文字でなければならないと言います、しかし、ほとんどのブラウザはそれに従いません
この質問はHTML4.01が標準であり、多くのブラウザと機能が今日とは異なるときに書かれました。
name属性は、例えばへの投稿に使用されます。ウェブサーバーidは主にcss（およびjavascript）に使用されます。この設定があるとします。
<input id="message_id" name="message_name" type="text" />
フォームを投稿するときにPHPで値を取得するには、次のようにname-attributeを使用します。
$_POST["message_name"];
Idは、前述のように、特定のCSSを使用したい場合に使用するスタイルに使用されます。
#message_id
{
background-color: #cccccc;
}
もちろん、あなたのidとname-attributeに同じ種類を使うことができます。これら2つは互いに干渉しません。
ラジオボタンを使用している場合のように、nameを他の項目にも使用できます。名前はラジオボタンをグループ化するために使われるので、あなたはそれらのオプションの1つだけを選択することができます。
<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />
そして、この非常に特殊なケースでは、idがどのように使われているかをさらに言うことができます。おそらくあなたのラジオボタン付きのラベルが必要になるでしょう。 Labelにはfor-attributeがあります。これはあなたの入力の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>
IDは一意である必要があります
...ページ内DOM要素ツリー内にあるので、各コントロールはクライアント側（ブラウザページ内）のidにより 個別にアクセス可能
- ページにロードされたJavaScriptスクリプト
- ページに定義されているCSSスタイル
あなたのページにユニークでないIDを持っていてもあなたのページをレンダリングするでしょう、しかしそれは確かに有効ではないでしょう。無効なHTMLを解析するとき、ブラウザは非常に寛容です。しかし、それらしいが機能するからといってそれをしないでください。
名前は非常に頻繁に一意ですが、共有することができます
...ページDOM内で同じタイプの複数のコントロール間（ラジオボタンを考える）、データがサーバーにPOSTされると特定の値のみが送信されます。そのため、ページ上に複数のラジオボタンがある場合、同じvalueを持つ関連ラジオボタンコントロールが複数あるにもかかわらず、選択されたnameのみがサーバーにポストバックされます。
サーバーへのデータ送信の補足 ：データがサーバーに送信されると（通常はHTTP POST requestによって）、すべてのデータは名前と値のペアとして送信されます。 name は入力HTMLコントロールの
nameであり、 value はユーザーが入力/選択したそのvalueです。これはAjax以外のリクエストにも常に当てはまります。 Ajaxでは、名前と値のペアcanがページ上のHTML入力コントロールとは無関係であることを要求します。開発者は必要なものをサーバーに送信できるからです。多くの場合、値も入力コントロールから読み取られますが、これは必ずしもそうとは言い切れません。
名前が重複できる場合
名前が任意のフォーム入力タイプのコントロール間で共有されていると有益な場合があります。でもいつ？あなたはあなたのサーバープラットフォームが何であるかについては述べなかった、しかしあなたがAsp.net MVCのような何かを使ったならばあなたは自動データ検証（クライアントとサーバー）そしてまた束縛されたデータを強い型に恩恵を受ける。つまり、それらの名前は型プロパティ名と一致する必要があります。
このシナリオがあるとしましょう：
- 同じ種類の項目のリストを含むビューがあります。
- 通常、ユーザーは一度に1つのアイテムを操作するので、1つのアイテムだけを使ってデータを入力し、それをサーバーに送信します。
そのため、ビューのモデルは（リストを表示するので）IEnumerable<SomeType>型ですが、サーバーサイドはSomeType型の単一の項目しか受け入れません。
では、名前の共有はどうですか。
各項目はそれ自身のFORM要素でラップされ、その中の入力要素は同じ名前を持つので、データが（任意の要素から）サーバーに到達すると、それはコントローラーアクションによって期待される文字列型に正しくバインドされます。
この特定のシナリオは私の クリエイティブストーリー mini-siteで見ることができます。あなたは言語を理解できませんが、あなたはそれらの複数の形式と共有名をチェックアウトすることができます。 IDsも重複しています（これはルール違反です）が、解決することができます。この場合は関係ありません。
nameは form fields *を識別します。そのため、そのようなフィールドに対して複数の可能な値を表すことができるコントロール（ラジオボタン、チェックボックス）でそれらを共有できます。それらはフォーム値のキーとして送信されます。idは _ dom _ 要素を識別します。そのため、それらはCSSまたはJavascriptによってターゲティングされる可能性があります。
*名前も ローカルのアンカーを識別するために を使用していましたが、これは推奨されなくなり、 'id'が現在はそうするための好ましい方法です。
nameは、値が渡されるときに使用される名前です（URLまたは投稿データ内）。 idは 一意に CSSスタイルとJavaScriptの要素を識別するために使用されます。
idはアンカーとしても使えます。昔はそのために<a nameが使われていましたが、アンカーにもidを使うべきです。 nameはフォームデータを投稿するだけです。
nameは、DOM（Document Object Model）のform送信に使用されます。
IDは、Javascript＆CSSのために、DOM内のHTMLコントロールのunique nameに使用されます。
名前は、フォームが送信されるとすぐに属性の名前が定義されます。そのため、後でこの属性を読みたい場合は、POSTまたはGETリクエストの "name"の下に見つけることができます。
Idはjavascriptまたはcssのフィールドまたは要素を表すために使用されます。
このIDは、JavaScriptまたはCSSの要素を一意に識別するために使用されます。
名前はフォーム送信に使用されます。フォームを送信すると、名前のあるフィールドのみが送信されます。
次の簡単な例が参考になると思います。
<!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>
コードでは、両方の 'name'属性が 'male'または 'female'の間の選択性を定義するために同じであることに注意してください。ただし、 'id'はそれらを区別するのに等しくありません。
入力のname属性は、その親HTMLの<form>sによって、その要素をPOSTリクエストのHTTPフォームのメンバーまたはGETリクエストのクエリー文字列として含めるために使用されます。
idは、DOMで操作用の要素を選択するためにJavaScriptで使用され、CSSセレクタで使用されるため、一意である必要があります。
フォーム要素における 'name'属性の役割を正式に説明したW3ドキュメントへの実際の参照を追加する。 Stripe.jsが支払いゲートウェイStripeとの安全な相互作用を実装するためにどのように機能するのかを詳しく調べながら、ここに着きました。特に、フォームのinput要素がサーバーに送信されたり、送信されなかったりする原因は何ですか。 ）
次のW3ドキュメントが関連性があります。
HTML 4： https://www.w3.org/TR/html401/interact/forms.html#control- name セクション17.2コントロール
HTML 5： https://www.w3.org/TR/html5/forms.html#form-submission-0 および https://www.w3.org/TR/html5/forms.html ＃construction-the-form-data-set 4.10.22.4フォームデータセットの構築.
そこで説明されているように、input要素はそれが有効な 'name'属性を持っている場合に限り、ブラウザによって送信されます。
他の人が指摘したように、 'id'属性はDOM要素を一意に識別しますが、通常のフォーム送信には関係しません。 （ただし、 'id'または他の属性はもちろんフォームの値を取得するためにjavascriptで使用できますが、その場合、javascriptはAJAX送信などに使用できます。）
以前の回答/コメント投稿者に関する1つの奇妙な点は、idの値とnameの値が同じ名前空間にあることに関するものです。仕様からわかる限り、これは（属性ではない）name属性のいくつかの非推奨の用途に適用されます。例えば https://www.w3.org/TR/html5/obsolete.html ：
"作成者は要素にname属性を指定してはいけません。属性が存在する場合、その値は空文字列であってはいけませんし、要素のホームサブツリー内の要素自身のID以外のIDの値と等しくてもいけませんこの属性が存在し、その要素がIDを持つ場合、その属性の値はその要素のIDと等しくなければなりません。この言語の以前のバージョンでは、この属性はURL内のフラグメント識別子のターゲット候補を指定するためのものでした。代わりにid属性を使用する必要があります。」
明らかにこの特別な場合では、 'a'タグのid値とname値の間にある程度の重複があります。しかし、これはフラグメントIDの処理の特殊性のように思われます。IDと名前の名前空間が一般的に共有されているためではありません。
同じ名前を使用する興味深いケースは、次のような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属性の値が文字列としてのみ扱われるのかどうか、そしてそれはPHP構文の偽物です0から始まる配列は、POST応答内のデータの順序に基づいて作成されます。
myfruit[] Apple
myfruit[] orange
そのようなトリックはIDでできません。 HTMLのid属性に有効な値は？ には、HTML 4の仕様が引用されています（ただし引用はしていません）。
IDおよびNAMEトークンは文字（[A-Za-z]）で始める必要があり、その後に任意の数の文字、数字（[0-9]）、ハイフン（ " - "）、下線（ "_"）を続けることができます。 、コロン（ "："）、およびピリオド（ "。"）。
そのため、[と]という文字は、HTML 4のIDと名前のどちらでも無効です（HTML 5では問題ありません）。しかし多くのHTMLと同じように、それが有効ではないという理由だけでそれが機能しないという意味でも極端に有用でもないというわけではありません。
あなたがJavaScript/CSSを使っているなら、あなたはそれにCSS/JavaScriptのものを適用するためにコントロールの 'id'を使わなければなりません。
名前を使用すると、CSSはそのコントロールに対して機能しません。たとえば、テキストボックスに添付されたJavaScriptカレンダーを使用する場合は、テキストコントロールのIDを使用してそれにJavaScriptカレンダーを割り当てる必要があります。