html中id屬性和name屬性的區(qū)別有哪些

這篇文章主要介紹html中id屬性和name屬性的區(qū)別有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在html中，id屬性和name屬性都是提供標(biāo)識(shí)符，表示HTML元素標(biāo)簽的。那么它們之間有什么區(qū)別？

html中的id屬性

我們使用id屬性可以標(biāo)識(shí)唯一的HTML元素，可以在在URL中用作錨引用（帶#符號(hào)的URL），或者在css中用作ID選擇器來(lái)設(shè)置該元素的樣式。也可以在javascript中，使用getElementById()，通過(guò)id屬性值來(lái)查找元素，在對(duì)元素進(jìn)行操作。例：

<p id="p1">測(cè)試文本！測(cè)試文本！</p>
<p id="p2">測(cè)試文本！測(cè)試文本！</p>

<script>
document.getElementById("p2").style.color="red";
</script>

id屬性是普遍兼容的，對(duì)任何元素都有效。且id屬性的值是區(qū)分大小寫(xiě)的，每個(gè)id值都應(yīng)該是唯一的。例：

<div id="demo">
	<div id="a">div標(biāo)簽，id值為a</div>
	<p id="A">p標(biāo)簽，id值為A</p>
</div>

#a{ color: red;}
#A{ color: pink;}

效果圖：

html中的name屬性

name屬性同樣是用來(lái)標(biāo)識(shí)HTML元素的，但它不具有是唯一行，它的值可以重復(fù)使用，例：?jiǎn)芜x按鈕

<form action="" method="get"> 
	最喜歡水果？<br /><br /> 
	<label><input name="Fruit" type="radio" value="" />蘋(píng)果 </label> <br /> 
	<label><input name="Fruit" type="radio" value="" />桃子 </label> <br /> 
	<label><input name="Fruit" type="radio" value="" />香蕉 </label> <br /> 
	<label><input name="Fruit" type="radio" value="" />梨 </label> <br /> 
	<label><input name="Fruit" type="radio" value="" />其它 </label> <br /> 
</form>

效果圖：

正如上例所示，name屬性經(jīng)常在表單中使用，用來(lái)提交信息；它僅對(duì)a, form, iframe, img, map, input, select, textarea等標(biāo)簽元素有效。

name屬性可以在在javascript中，使用getElementsByName()來(lái)查找元素；但無(wú)法在CSS或URL中被引用。例：

<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>


<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名為 'myInput' 的元素有多少個(gè)？" />

效果圖：

說(shuō)明：

可以這樣說(shuō)，ID是一個(gè)人的身份證號(hào)碼，而Name是這個(gè)人的名字。兩者可以同時(shí)存在，共享相同的命名空間（兩者的值可以相同）。

以上是html中id屬性和name屬性的區(qū)別有哪些的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！