HTML标签中id和name的区别

HTML标签中的<input>元素的输入类型时，我们发现<input>标签除了拥有，type等控制输入字段的属性以外，还有两个不能被直接看出来的属性：“id”和“name”。那么这两个属性有什么不同呢？

1.定义

name：name属性规定input元素的名称，但它不具有是唯一行，它的值可以重复使用。

id：id属性规定HTML元素的唯一的id。

或许这两句话很难被区分开来，我们可以通过生活上的列子来形象地类比这个问题。我们每个人都有自己的名字和身份证号。在生活上难免会遇见和自己重名的人。但每个人的身份证号却是唯一的，这就是通过，姓名(name)，与身份证idcard)来区分两者的不同。

2.用法

在清楚了name与id的定义后，我们不难看出二者的作用肯定也是不同的，id的特殊属性决定了，每一个id元素在同一个HTML文档中必须是唯一的。而name元素却不需要这样。

2.1name

<form>
    name相同：
    <input type="radio" name="fruit" value="banana">香蕉
    <input type="radio" name="fruit" value="apple">苹果
    <input type="radio" name="fruit" value="orange">橙子

    <br>
    <hr>
    name不同：
    <input type="radio" name="fruit1" value="banana">香蕉
    <input type="radio" name="fruit2" value="apple">苹果
    <input type="radio" name="fruit3" value="orange">橙子
</form>

结果展示：

 结果分析：

在<form>这样的块级元素中定义了3个单选输入。

当name元素相同时，因为type元素是“radio”，所以，当我选择一个选项的时候另一个选项会消失。相当于将他们绑成一个整体，这样系统才会识别他们的是作用在同一个radio分组内。

当name元素不同时，发现可以进行多项选择了。由此我们可以发现在同一个块级元素<form>内的不同的<input>中，每一个name元素都相当于对这个<form>元素所进行的赋值。

name的另一个重点：在服务器端根据name的通过Request.Params取得元素提交的值。只有设置了name属性的表单元素才能在提交表单时传递它们的值。而在没有name属性的情况下是没有接受到输入的。

2.2.id

我们使用id属性可以标识唯一的HTML元素，在css中用作ID选择器来设置该元素的样式。也可以在javascript中，使用getElementById()，通过id属性值来查找元素，在对元素进行操作。例：

<p id="p1">测试文本！测试文本！</p>
<p id="p2">测试文本！测试文本！</p>
<script>
    document.getElementById("p2").style.color="red";
</script>

结果展示：

 参考：

https://www.jianshu.com/p/7a171f96c1e0

https://zhuanlan.zhihu.com/p/139507001