当使用HTML <input>标记时,使用名称和id属性之间的区别是什么,特别是我发现它们有时命名相同?


当前回答

name用于在DOM(文档对象模型)中提交表单。

ID用于DOM中HTML控件的唯一名称,尤其是JavaScript和CSS控件。

其他回答

输入上的name属性由其父HTML <form>s用于将该元素作为POST请求中的HTTP表单成员或GET请求中的查询字符串包含在内。

id应该是唯一的,因为JavaScript应该使用它在DOM中选择元素进行操作,并在CSS选择器中使用。

我希望下面的例子对你有帮助:

<!DOCTYPE html>
<html>
<head>
  <script>
    function checkGender(){
      if(document.getElementById('male').checked) {
         alert("Selected gender: "+document.getElementById('male').value)
      }else if(document.getElementById('female').checked) {
         alert("Selected gender: "+document.getElementById('female').value)
      }
      else{
         alert("Please choose your gender")
      }
    }
  </script>
</head>
<body>
<h1>Select your gender:</h1>

<form>
  <input type="radio" id="male" name="gender" value="male">Male<br>
  <input type="radio" id="female" name="gender" value="female">Female<br>
  <button onclick="checkGender()">Check gender</button> 
</form> 
</body>
</html>

在代码中,请注意两个'name'属性是相同的,以定义'male'或'female'之间的可选性,但'id'不等于以区分它们。

name是传递值时使用的名称(在URL中或在发布的数据中)。id用于唯一标识CSS样式和JavaScript元素。

id也可以用作锚。在过去,它使用<a名称,但您也应该对锚使用id。名称仅用于发布表单数据。

如果你使用JavaScript/CSS,你必须使用控件的“id”来应用任何CSS/JavaScript的东西。

如果使用name, CSS将不能用于该控件。例如,如果使用JavaScript日历附加到文本框,则必须使用文本控件的id为其分配JavaScript日历。

name用于在DOM(文档对象模型)中提交表单。

ID用于DOM中HTML控件的唯一名称,尤其是JavaScript和CSS控件。