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


当前回答

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

ID用于DOM中HTML控件的唯一名称,尤其是JavaScript和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属性由其父HTML <form>s用于将该元素作为POST请求中的HTTP表单成员或GET请求中的查询字符串包含在内。

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

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

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

在HTML4.01:

名称属性

Valid only on <a>, <form>, <iframe>, <img>, <map>, <input>, <select>, <textarea> Name does not have to be unique, and can be used to group elements together such as radio buttons & checkboxes Can not be referenced in URL, although as JavaScript and PHP can see the URL there are workarounds Is referenced in JavaScript with getElementsByName() Shares the same namespace as the id attribute Must begin with a letter According to specifications is case sensitive, but most modern browsers don't seem to follow this Used on form elements to submit information. Only input tags with a name attribute are submitted to the server

Id属性

Valid on any element except <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title> Each Id should be unique in the page as rendered in the browser, which may or may not be all in the same file Can be used as anchor reference in URL Is referenced in CSS or URL with # sign Is referenced in JavaScript with getElementById(), and jQuery by $(#<id>) Shares same name space as name attribute Must contain at least one character Must begin with a letter Must not contain anything other than letters, numbers, underscores (_), dashes (-), colons (:), or periods (.) Is case insensitive

在(X)HTML5中,一切都是一样的,除了:

名称属性

在<form>上无效 XHTML规定必须全部小写,但大多数浏览器不遵守这一规定

Id属性

对任何元素都有效 XHTML规定必须全部小写,但大多数浏览器不遵守这一规定

这个问题是在HTML4.01是标准的时候写的,许多浏览器和功能都与今天不同。

名称标识表单字段*;因此,它们可以由表示该字段的多个可能值的控件(单选按钮、复选框)共享。它们将作为表单值的键提交。 id标识DOM元素;所以它们可以被CSS或JavaScript定位。

* name's也用于标识本地锚,但这是不赞成的,'id'是现在这样做的首选方式。