HTML中屬性ID和屬性NAME有何區別？

今天出美工面試題的時候，David讓我加上一道題：HTML中id和name的區別。一聽對呀，HTML中id和name有什麼區別，只是平時在用，倒沒怎麼想過，只是那麼用了罷了，呵呵，其實在作網頁的時候有很東西都只是那麼的用了，而沒有考慮爲何那麼用了...
    有同道中人說「ID就像是一我的的身份證號碼，而Name就像是他的名字，ID顯然是惟一的，而Name是能夠重複的。」
    
    id 在HTML中的做用:
      一、用id選擇相應的style sheet(風格). 
      二、 <A ..> 連接的目的地
      三、腳本語言用它找目的地(找該id的標籤)
      四、做爲名字,用於聲明某OBJECT element
      五、做爲一個標籤或塊的區分標緻(用於從HTML網頁中取出數據放入數據庫或把HTML翻譯成別的格式,等狀況).

    name原來是爲了標識之用，可是如今根據規範，都建議用id來標識元素。可是name在如下用途是不能替代的：
      一、表單（form）的控件名，提交的數據都用控件的name而不是id來控制。由於有許多name會同時對應多個控件，好比checkbox和radio，而id必須是全文檔中惟一的。此外瀏覽器會根據name來設定發送到服務器的request。所以若是用id，服務器是沒法獲得數據的。  
      二、frame和window的名字，用於在其餘frame或window指定target。   
    
  如下二者能夠通用，可是強烈建議用id不要用name：   
  錨點，一般之前寫做<a   name="myname">，如今能夠用任何的元素id來指定：<div   id="myid">。   
    
    如下只能用id：   
     一、label與form控件的關聯，   
       <label   for="MyInput">My   Input</label>   
       <input   id="MyInput"   type="text">   
       for屬性指定與label關聯的元素的id，不可用name替代。   
     二、CSS的元素選擇機制，以#MyId的方式指定應用樣式的元素，不能用name替代。   
     三、腳本中得到對象：   
       IE支持在腳本中直接以id（而不是name）引用該id標識的對象。例如上面的input，要在腳本中得到輸入的內容，能夠直接以MyInput.value來得到。  

      若是用DOM的話，則用document.getElementById("MyInput").value，若是要用name的話，一般先獲得包含控件的form，例如document.forms[0]，而後從form再引用name，注意這樣獲得的是通過計算後將發送給服務器的值。

到此出自伊然的博客：http://biej.blog.sohu.com/28812867.html

 

 

網友A說:

在表單接收頁面裏只能接收到name屬性值;
  ID只是在當頁裏控件的惟一標識(不可重複);

  用到name的控件有   form   input   select   textarea   iframe   frame  
  其它的元素都用不着   name   
  ==========================================================     
  name是對象的名字,id是標識,用以惟一性的區分.就象人既要有名字,又須要身份證號.   
  能夠這麼簡單理解它們的使用區別:id用於DHTML,即客戶端腳本。而name則一般用在服務器端,例如    

  Request.for("")中就要用name。  
  你用<input   name=myinput   id=myinput>中,在客戶端   
  <script>   
  alert(myinput.value)//這裏是id   
  </script>   
  而提交後，用Request.form("myinput")，這裏就是name。

 

網友B說:

 

幾乎每一個作過Web開發的人都問過，到底元素的ID和Name有什麼區別阿？爲何有了ID還要有Name呢?而一樣咱們也能夠獲得最classical的答案：ID就像是一我的的身份證號碼，而Name就像是他的名字，ID顯然是惟一的，而Name是能夠重複的。　　上週我也遇到了ID和Name的問題，在頁面裏輸入了一個input type="hidden"，只寫了一個ID='SliceInfo'，賦值後submit，在後臺用Request.Params["SliceInfo"]卻怎麼也去不到值。後來恍然大悟因該用Name來標示，因而在input里加了個Name='SliceInfo'，就一切ok了。　　第一段裏對於ID和Name的解答說的太籠統了，固然那個解釋對於ID來講是徹底對的，它就是Client端HTML元素的Identity。而Name其實要複雜的多，由於Name有不少種的用途，因此它並不能徹底由ID來代替，從而將其取消掉。　　具體用途有：　　用途1:  做爲可與服務器交互數據的HTML元素的服務器端的標示，好比input、select、textarea、和button等。咱們能夠在服務器端根據其Name經過Request.Params取得元素提交的值。　　用途2:  HTML元素Input type='radio'分組，咱們知道radio button控件在同一個分組類，check操做是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的Name屬性來實現的。　　用途3:  創建頁面中的錨點，咱們知道<a href="URL">link</a>是得到一個頁面超級連接，若是不用href屬性，而改用Name，如：<a name="PageBottom"></a>，咱們就得到了一個頁面錨點。　　用途4:  做爲對象的Identity，如Applet、Object、Embed等元素。好比在Applet對象實例中，咱們將使用其Name來引用該對象。　　用途5:  在IMG元素和MAP元素之間關聯的時候，若是要定義IMG的熱點區域，須要使用其屬性usemap，使usemap="#name"(被關聯的MAP元素的Name)。　　用途6:  某些特定元素的屬性，如attribute，和param。例如爲Object定義參數<PARAM NAME = "appletParameter" VALUE = "value">。　　顯然這些用途都不是能簡單的使用ID來代替掉的，因此HTML元素的ID和Name的卻別並非身份證號碼和姓名這樣的區別，它們更本就是不一樣做用的東西。　　固然HTML元素的Name屬性在頁面中也能夠起那麼一點ID的做用，由於在DHTML對象樹中，咱們可使用document.getElementsByName來獲取一個包含頁面中全部指定Name元素的對象數組。　　在這裏順便說一下，要是頁面中有n(n>1)個HTML元素的ID都相同了怎麼辦？在DHTML對象中怎麼引用他們呢？若是咱們使用ASPX頁面，這樣的狀況是不容易發生的，由於aspnet進程在處理aspx頁面時根本就不容許有ID非惟一，這是頁面會被拋出異常而不能被正常的render。要是否是動態頁面，咱們硬要讓ID重複那IE怎麼搞呢？　　這個時候咱們仍是能夠繼續使用document.getElementById獲取對象，只不過咱們只能獲取ID重複的那些對象中在HTML Render時第一個出現的對象。而這時重複的ID會在引用時自動變成一個數組，ID重複的元素按Render的順序依次存在於數組中。

 

網友C說:

 

到底元素的id和name有什麼區別阿？爲何有了id還要有name呢?!

id的主要用途:
在客戶端頁面做爲對象的惟一表示,同一個頁面中不容許出現多個相同的id.可使用JavaScript的document.getElementById('id')來獲取對象.

name的具體用途有：

用途1: 
做爲可與服務器交互數據的HTML元素的服務器端的標示，好比input、select、textarea、和button等。咱們能夠在服務器端根據其name經過Request["name"]取得元素提交的值。

用途2: 
HTML元素input type='radio'分組，咱們知道radio button控件在同一個分組類，check操做是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的name屬性來實現的。

用途3: 
創建頁面中的錨點，咱們知道<a href="url">link</a>是得到一個頁面超級連接，若是不用href屬性，而改用name，如：<a name="PageBottom"></a>，咱們就得到了一個頁面錨點。

用途4: 
做爲對象的identity，如Applet、Object、Embed等元素。好比在Applet對象實例中，咱們將使用其name來引用該對象。

用途5: 
在img元素和map元素之間關聯的時候，若是要定義img的熱點區域，須要使用其屬性usemap，使usemap="#name"(被關聯的map元素的name)。

用途6: 
某些特定元素的屬性，如attribute，和param。例如爲Object定義參數<param name = "appletParameter" value= "value">。

用途7:
name屬性也能夠做爲客戶端對象的標識,可使用javascript的document.getElementByName('name')來獲取對象

 

網友D說:

在html中 id和name的區別：

ID是在客戶端腳本里用!NAME是用於獲取提交表單的某表單域信息!

不過在   form   裏面,若是不指定   Name   的話,就不會發送到服務器端哦!

input   select   form   frame   iframe   用name   
  table   tr   td   div   p   span   h1   li       用id 

表單元素(form  input  textarea  select)與框架元素(iframe  frame)用  name  
這些元素都與表單(框架元素做用於form的target)提交有關,  在表單的接收頁面只  
接收有name的元素,  賦ID的元素經過表單是接收不到值的,  你本身能夠驗證一下.  

固然上述元素也能夠賦ID值,  賦ID值的時候引用這些元素的方法就要變一下了.  
賦  name:  document.formName.inputName        document.frames("frameName")  
賦  ID    :  document.all.inputID                      document.all.frameID  

只能賦ID不能賦name的元素:(除去與表單相關的元素都只能賦ID)  
body  li  a  table  tr  td  th  p  div  span  pre  dl  dt  dd  font  b  等等

   HTML、CSS裏面關於 id、class、name 屬性的區別和用法     2007-05-31 21:06:44 
大 中 小 
  name和id

name原來是爲了標識之用，可是如今根據規範，都建議用id來標識元素。

如下只能用name：   
   1.    表單（form）的控件名，提交的數據都用控件的name而不是id來控制。由於有許多name會同時對應多個控件，好比checkbox和radio，而id必須是全文檔中惟一的。此外瀏覽器會根據name來設定發送到服務器的request。所以若是用id，服務器是沒法獲得數據的。  
   2.    frame和window的名字，用於在其餘frame或window指定target。   

如下只能用id：   
   1.    label與form控件的關聯，   
   <label for="MyInput">My    Input</label>   
   <input id="MyInput"    type="text">   
   for屬性指定與label關聯的元素的id，不可用name替代。   
   2.    CSS的元素選擇機制，以#MyId的方式指定應用樣式的元素，不能用name替代。   
   3.    腳本中得到對象：   
   IE支持在腳本中直接以id（而不是name）引用該id標識的對象。例如上面的input，要在腳本中得到輸入的內容，能夠直接以MyInput.value來得到。  
   若是用DOM的話，則用document.getElementById("MyInput").value，若是要用name的話，一般先獲得包含控件的form，例如document.forms[0]，而後從form再引用name，注意這樣獲得的是通過計算後將發送給服務器的值。  
    
name與id的其餘區別是：
   id要符合標識的要求，好比大小寫敏感，最好不要包含下劃線（由於不兼容CSS）。而name基本上沒有什麼要求，甚至能夠用數字。

class和id

在一個HTML網頁中,id是惟一的,即只有某一個標籤,或某一個塊的標識符是這個id。
class可重複使用，用來根據用戶定義的標準對一個或多個元素進行標記和定義。

實際使用中，class可能對文字的排版等比較有用，而id則對宏觀佈局和設計放置各類元素較有用。

綜合例子：
網頁代碼有
<div id=m_blog>
    <div class="opt">
      <a id=myLink href="xxx">
    </div>
</div>

用CSS控制這個連接的停留樣式，
能夠這樣寫 #m_blog div.opt a:hover{color:#D57813} 或 #myLink:hover{color:#D57813}

網友E說:

 

其實一句話：ID和html頁面內部元素相關，不和頁面元素的內容相關。name則更多地和頁面元素的內容相關

看了看Reference，name還有一個用途window.name，樓主是否是能夠把這個也算上一個呢？最多見的就是windows.open的第二個參數，在<A>的target裏用到。

iframe： 還有 frame 和 iframe 的 name 屬性。

iframe 的 name 有點特殊，上次遇到一個問題，必定要用 name 才行，呵呵，忘記具體的了

大概是用 iframe 頁面裏的 onload()/onclick() 改變 iframe 的大小 ~~

name是frame, iframe & frameset的Identity，還有什麼特殊的地方嗎？你說的那個onload()/onclick()，是說在裏面引用frame要使用frame的name吧？

對於 iframe 直接使用 id 獲取的是其 window 對象（而經過 name 卻能夠獲取其 element 對象），我想 boynannan 說的問題應該是這個吧！不知道猜想是否準確。^_^

 

網友N說:

 

對於剛剛接觸HTML源代碼的朋友可能有這樣一個疑惑：在一個表單元素中，我若是想用腳本肯定某個具體元素，我既能夠用他的NAME來索引這個對象，也能夠加一個ID來索引它，那這兩種方法究竟有什麼區別呢？如下咱們來具體探討一下，鑑於本人水平有限，若有描述不當，懇請指教。

咱們能夠經過一段代碼來分析一下其中的微妙差異:

<form method="post" action="" name="demoform"><input type="text" name="oDemo" id=」oDemo2」 value="DEMO" /></form>

在IE瀏覽器裏，咱們能夠經過多少方法來索引到這個文本框對象？(爲區別起見，咱們把NAME和ID設成了不一樣的值)

1. oDemo

2. demoform.oDemo

3. document.all.oDemo

4. document.all.demoform.oDemo

5. document.forms[0].oDemo

6. document.forms['demoform'].oDemo

7. document.forms['demoform'].childNodes[0]

8. document.forms['demoform'].elements[0]

9. document.getElementById('oDemo2')

以上9種索引方法在IE6裏面所有經過返回值測試，不過值得注意的是最後一種：在IE6裏，我把索引對象寫成document.getElementById('oDemo')，瀏覽器也能正確索引到對象，真是可怕的容錯性啊！！

接着問題來了，咱們把這段代碼放在Mozilla Firefox 1.0裏再執行一次，只有第7種方法返回「undefined」，其餘的方法能夠正確索引到對象，不過因爲第三、4種方法用到了document.all這個IE專有對象，FF1.0雖然返回了正確的值，不過卻在控制檯裏發出了警告：警告：非標準的屬性 document.all。請使用 W3C 的標準形式 document.getElementById() 。

接下來咱們把HTML文本類型定義得嚴格一點，在源代碼開頭加上：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">使HTML文本按照HTML4.01標準去解析，在IE6裏照樣所有經過返回值測試，不過在Mozilla Firefox 1.0裏麻煩就大了，第三、4種方法沒有任何的返回值，而在控制檯裏發出了報錯信息：錯誤： document.all has no properties ，而第7種方法依舊返回「undefined」。

小 結

NAME主要應用在交互式網頁，表單提交給某個服務器端腳本後接收變處理量使用。從源代碼的規範性和兼容性角度出發，如在客戶端腳本里要索引某個對象，建議用document.getElementById()方法，儘可能不要直接使用NAME的值，固然若是不考慮兼容性，以上9種方法均可以在IE裏運行經過(IE5.0沒測試過)。

附：測試源代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> <form method="post" action="" name="demoform"> <input type="text" name="oDemo" value="DEMO" id="oDemo2" /><br /> <input type="button" value="oDemo" onclick="alert(oDemo.value)" /><br /> <input type="button" value="demoform.oDemo" onclick="alert(demoform.oDemo.value)" /><br /> <input type="button" value="document.all.oDemo" onclick="alert(document.all.oDemo.value)" /><br /> <input type="button" value="document.all.demoform.oDemo" onclick="alert(document.all.demoform.oDemo.value)" /><br /> <input type="button" value="document.forms[0].oDemo" onclick="alert(document.forms[0].oDemo.value)" /><br /> <input type="button" value="document.forms['demoform'].oDemo" onclick="alert(document.forms['demoform'].oDemo.value)" /><br /> <input type="button" value="document.forms['demoform'].childNodes[0]" onclick="alert(document.forms['demoform'].childNodes[0].value)" /><br /> <input type="button" value="document.forms['demoform'].elements[0]" onclick="alert(document.forms['demoform'].elements[0].value)" /><br /> <input type="button" value="document.getElementById('oDemo2')" onclick="alert(document.getElementById('oDemo2').value)" /><br /> </form> </body> </html>

 [Ctrl+A 所有選擇 提示：你可先修改部分代碼，再按運行]

 

網友N+1說:

 

id與name的做用,做爲標籤的標識符,基本上是同樣的.name是老方法,id是在name基礎上發明的,後來纔有的,"現代化"一點,用的範圍廣一點. <A..> 中的name原來(剛發明時)就是用於本頁撳一下轉向過去用的.

除 BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE 標籤外,id 均可用. 

name只用於APPLET,SELECT,FORM,FRAME,IFRAME,IMG,A,INPUT,OBJECT,MAP,PARAM,META. (name有時有本身的用途)

table 中 name 無定義, 應當用 id. 

有些標籤,能夠同時有name和id. 

在一個HTML網頁中,id是惟一的,即只有某一個標籤,或某一個塊的標識符是這個id. 

id 在HTML中的做用: 

(1) 用id選擇相應的style sheet(風格). 
(2) <A ..> 連接的目的地 
(3) 腳本語言用它找目的地(找該id的標籤) 
(4) 做爲名字,用於聲明某OBJECT element 
(5) 做爲一個標籤或塊的區分標緻(用於從HTML網頁中取出數據放入數據庫或把HTML翻譯成別的格式,等狀況). 

(參考HTML 4.0 定義)

 

網友太多...最後我想說:

到這裏算完了..再不理解就能夠不用學了.

 

到此處自影烏DotNet工做室博客：http://shylockbaby.blog.163.com/blog/static/605330200835101137852/