HTML輸入 - 名稱與ID
[英]HTML input - name vs. id
問題描述
使用HTML <input>標簽時，使用name和id屬性有什么區別，特別是我發現它們有時被命名為相同？
13 個解決方案
解決方案1
275 2011-09-19 11:38:16
在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在瀏覽器中呈現的頁面中應該是唯一的，這可能是也可能不是全部在同一個文件中
- 可以在URL中用作錨引用
- 使用
#符號在CSS或URL中引用 - 在JS中用
getElementById()引用，jQuery用$(#<id>)引用 - 與name屬性共享相同的名稱空間
- 必須至少包含一個字符
- 必須以一封信開頭
- 不得含有字母，數字，下划線（其它什么
_），破折號（-冒號（:（），或句號.） - 不區分大小寫
在（X）HTML5中，除了以下內容之外，一切都是相同的：
名稱屬性
- 在
<form>不再有效 - XHTML表示它必須全部小寫，但大多數瀏覽器都不遵循這一點
Id屬性
- 適用於任何元素
- XHTML表示它必須全部小寫，但大多數瀏覽器都不遵循這一點
這個問題是在HTML4.01成為常態時編寫的，許多瀏覽器和功能都與今天不同。
解決方案2
165 2011-09-19 11:45:56
name屬性用於發布到例如web服務器。 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使用相同的面額。 這兩個不會相互干擾。
此外，名稱可用於更多項目，例如當您使用radiobuttons時。 然后使用名稱對您的單選按鈕進行分組，因此您只能選擇其中一個選項。
<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />
在這個非常具體的案例中，我可以進一步說明如何使用id，因為你可能想要一個帶有radiobutton的標簽。 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>
解決方案3
68 2011-09-19 11:35:56
ID必須是唯一的
...在頁面DOM元素樹中，因此每個控件都可以通過其在客戶端（在瀏覽器頁面內）的id來單獨訪問
- 頁面中加載了Javascript腳本
- 頁面上定義的CSS樣式
在您的網頁上擁有非唯一ID仍會呈現您的網頁，但它肯定無效。 解析無效的HTML時，瀏覽器非常寬容。 但不要因為看起來它有效而不這樣做。
名稱通常是唯一的，但可以共享
...在同一類型的幾個控件之間的頁面DOM內（想想單選按鈕），所以當數據被POST到服務器時，只發送一個特定的值。 因此，當您的頁面上有多個單選按鈕時，即使存在多個具有相同name相關單選按鈕控件，也只會將所選的一個value發回服務器。
向服務器發送數據的附錄 ：當數據發送到服務器時（通常通過HTTP POST請求），所有數據都作為名稱 - 值對發送，其中name是輸入HTML控件的
name， value是輸入/選擇的value由用戶。 對於非Ajax請求，這始終是正確的。 在Ajax請求中，名稱 - 值對可以獨立於頁面上的HTML輸入控件，因為開發人員可以將任何他們想要的內容發送到服務器。 通常也會從輸入控件中讀取值，但我只想說這不一定是這種情況。
名稱可以復制
在任何表單輸入類型的控件之間共享名稱有時可能是有益的。 但當？ 您沒有說明您的服務器平台可能是什么，但如果您使用像Asp.net MVC這樣的東西，您將獲得自動數據驗證（客戶端和服務器）以及將發送數據綁定到強類型的好處。 這意味着這些名稱必須匹配類型屬性名稱。
現在假設您有這種情況：
- 你有一個視圖與一個相同類型的項目列表
- 用戶通常一次使用一個項目，因此他們只能輸入一個項目的數據並將其發送到服務器
因此，您的視圖模型（因為它顯示列表）的類型為IEnumerable<SomeType>但您的服務器端只接受一個SomeType類型的SomeType 。
那么名字分享怎么樣？
每個項目都包含在自己的FORM元素中，並且其中的輸入元素具有相同的名稱，因此當數據到達服務器（來自任何元素）時，它將被正確綁定到控制器操作所期望的字符串類型。
這個特殊情況可以在我的Creative story迷你網站上看到。 您將無法理解該語言，但您可以查看這些多種表單和共享名稱。 不要緊， ID也是重復的（違反規則），但可以解決。 在這種情況下，這無關緊要。
解決方案4
27 2013-01-22 16:56:38
-
name標識表單字段*; 因此，它們可以由代表這種字段的多個可能值的控件共享（單選按鈕，復選框）。 它們將作為表單值的鍵提交。 -
id標識DOM元素; 所以他們可以成為CSS或Javascript的目標。
*名稱也用於標識本地錨點，但這已被棄用，“id”是目前這樣做的首選方式。
解決方案5
10 2011-09-19 11:36:27
name是傳遞值時使用的名稱（在url或發布的數據中）。 id用於唯一標識CSS樣式和JavaScript的元素。
id也可以用作錨。 在過去， <a name用於此，但您也應該使用id作為錨點。 name僅用於發布表單數據。
解決方案6
8 2016-05-03 10:12:40
name用於DOM （文檔對象模型）中的表單提交 。
ID用於DOM中html控件的唯一名稱 ，專門用於Javascript和CSS
解決方案7
8 2011-09-19 11:36:14
一旦提交表單，名稱就會定義屬性的名稱。 因此，如果您想稍后閱讀此屬性，您將在POST或GET請求中的“名稱”下找到它。
而id用於在javascript或css中添加字段或元素。
解決方案8
6 2017-09-24 06:16:31
id用於唯一標識JavaScript或CSS中的元素。
該名稱用於表單提交。 提交表單時，只會提交帶有名稱的字段。
解決方案9
3 2014-09-29 14:09:47
我希望您能找到以下有用的簡短示例：
<!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'不等於區分它們。
解決方案10
2 2016-10-21 02:24:18
添加對W3文檔的一些實際引用，這些文檔權威地解釋了'name'屬性在表單元素上的作用。 （為了它的價值，我來到這里，同時探究Stripe.js如何實現與支付網關Stripe的安全交互。特別是，什么原因導致表單輸入元素被提交回服務器，或阻止它被提交？ ）
以下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#constructing-the-form -data-set第4.10.22.4節構造表單數據集。
如其中所解釋的，當且僅當它具有有效的“名稱”屬性時，瀏覽器將提交輸入元素。
正如其他人所指出的，'id'屬性唯一地標識DOM元素，但不參與正常的表單提交。 （雖然'id'或其他屬性當然可以通過javascript使用來獲取表單值，然后javascript可以用於AJAX提交等等。）
關於先前的答案/評論者的一個奇怪的問題是關於id的值和名稱的值在同一名稱空間中。 到目前為止，我從規范中可以看出，這適用於某些已棄用的name屬性（不是表單元素）。 例如https://www.w3.org/TR/html5/obsolete.html ：
“作者不應該在元素上指定name屬性。如果屬性存在，則其值不能是空字符串，並且不能等於元素的home子樹中除元素自己的ID之外的任何ID的值，如果有的話，也不等於元素主子樹中元素的任何其他名稱屬性的值。如果該屬性存在且元素有ID，則屬性的值必須等於元素的ID。在該語言的早期版本中，此屬性旨在指定URL中片段標識符的可能目標。應使用id屬性。“
很明顯，在這種特殊情況下，'a'標簽的id和name值之間存在一些重疊。 但這似乎是處理片段ID的一個特點，而不是由於id和名稱的命名空間的一般共享。
解決方案11
2 2011-09-19 11:36:17
輸入的name屬性由其父HTML <form>用於將該元素包含為POST請求中的HTTP表單的成員或GET請求中的查詢字符串。
id應該是唯一的，因為JavaScript應該使用它來選擇DOM中的元素進行操作並在CSS選擇器中使用。
解決方案12
1 2015-01-10 15:47:31
使用相同名稱的一個有趣的例子：類型為checkbox input元素，如下所示：
<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
不能用ids做那種伎倆。 HTML中id屬性的有效值是什么？ 似乎引用了HTML 4的規范（雖然他們沒有給出引用）：
ID和NAME令牌必須以字母（[A-Za-z]）開頭，后面可以跟任意數量的字母，數字（[0-9]），連字符（“ - ”），下划線（“_”） ，冒號（“：”）和句號（“。”）。
因此，字符[和]在HTML4中的ID或名稱中都無效（在HTML5中它們可以正常使用）。 但是和html這么多東西一樣，只是因為它無效並不意味着它不起作用或者不是非常有用。
解決方案13
0 2014-06-19 13:20:56
如果您使用的是JavaScript / CSS，則必須使用控件的“id”來應用任何CSS / JavaScript內容。
如果使用name，則CSS不適用於該控件。 例如，如果您使用附加到文本框的JavaScript日歷，則必須使用文本控件的id為其分配JavaScript日歷。
一組div的HTML類與ID
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.