深入理解input中的valuenameid的区别和用法——Web前端自学笔记

Posted 2021-06-30 来老铁干了这碗代码

value：指该控件显示出来的值，是面向用户的。如<input type="button" value="123">这条语句运行出来时，button按钮上显示的数值就是123；

name：指一类控件的名称，可以重复。如<input type="button" name="123" value="提交">这条语句运行出来时，该按钮上显示的值为提交，该按钮的名字是123

id：指唯一区分控件的属性值，含义与name相同，不过id值是唯一的，而name允许重复。
即：

<input type="button" id="1" name="input" value="提交">
<input type="button" id="2" name="input" value="重置">
<input type="button" id="3" name="input" value="注册">

是合理的。

---

为什么要同时设置id和name呢？ 因为二者在javascript中有不同的用处。

当使用JavaScript时，如果我们只想获取一个控件对象，可以通过getElementById()来获取对应id的控件对象。

但我们若想获取一类对象，如获取所有的按钮控件对象，就可以通过getElementsByName()来获取对象数组。