What is the difference between id and name in html

Difference: 1. The value of the id attribute is case-sensitive, and each id value should be unique; while the name attribute is not unique, and its value can be reused. 2. The uses are different. The id attribute can be used as an anchor reference or an ID selector; while the name attribute is used in forms to submit information.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

In HTML, both the id attribute and the name attribute provide identifiers to represent HTML element tags. So what's the difference between them? This article will give you a brief comparison of the id attribute and the name attribute, and introduce the difference between the id attribute and the name attribute. I hope it will be helpful to you.

id attribute in html

We use the id attribute to identify a unique HTML element, which can be used as an anchor reference in the URL (URL with # symbol), or in css Use an ID selector to style the element. You can also use getElementById() in javascript to find elements through the id attribute value and then operate on the elements. Example:

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

##

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

The id attribute is universally compatible and valid for any element. And the value of the id attribute is case-sensitive, and each id value should be unique. Example:

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

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

Rendering:

The name attribute in html

The name attribute is also used to identify HTML elements, but it does not have a unique row. Its value can be reused, for example: radio button

<form action="" method="get"> 
 最喜欢水果？<br /><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 /> 
 <label><input name="Fruit" type="radio" value="" />其它 </label> <br /> 
</form>

Rendering:

##As shown in the above example, name The attribute is often used in forms to submit information; it is only valid for tag elements such as a, form, iframe, img, map, input, select, textarea, etc.

The name attribute can be used in JavaScript to find elements using getElementsByName(); but it cannot be referenced in CSS or URLs. Example:

<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="名为 &#39;myInput&#39; 的元素有多少个？" />

Rendering:

Description:

It can be said that ID is a person's ID number, and Name is the person's name. Both can exist at the same time, sharing the same namespace (the values ​​of both can be the same).

Recommended tutorial: "

html video tutorial

"

The above is the detailed content of What is the difference between id and name in html. For more information, please follow other related articles on the PHP Chinese website!