html中id属性和name属性的区别有哪些-百分百源码网

html中id属性和name属性的区别有哪些

发布时间：09/01 来源：未知浏览：关键词：

在html中，id属性和name属性都是供给标识符，表示HTML元素标签的。那么它们之间有什么不同？本篇文章就给大家简便比力一下id属性和name属性，介绍id属性和name属性之间的不同是啥，但愿对大家有所帮忙。

html中的id属性

我们使用id属性可以标识独一的HTML元素，可以在在URL中用作锚援用（带#符号的URL），或者在css中用作ID选中器来设定该元素的样式。也可以在javascript中，使用getElementById()，通过id属性值来查寻元素，在对元素停止操纵。例：

<p id="p1">测试文本！测试文本！</p>
<p id="p2">测试文本！测试文本！</p>

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

id属性是遍及兼容的，对任何元素都有效。且id属性的值是区分大小写的，每个id值都应当是独一的。例：

<div id="demo">
	<div id="a">div标签，id值为a</div>
	<p id="A">p标签，id值为A</p>
</div>

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

结果图：

html中的name属性

name属性一样是用来标识HTML元素的，但它不具有是独一行，它的值可以反复使用，例：单选按钮

<form action="" method="get"> 
	最喜爱水果？<br /><br /> 
	<label><input name="Fruit" type="radio" value="" />iphone </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属性经常在表单中使用，用来提交信息；它仅对a, form, iframe, img, map, input, select, textarea等标签元素有效。

name属性可以在在javascript中，使用getElementsByName()来查寻元素；但没法在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' 的元素有多少个？" />

结果图：