HTML输入-名称vs. id

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

当前回答

一个使用相同名称的有趣案例:input元素类型复选框，如下所示:

<input id="fruit-1" type="checkbox" value="apple"  name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">

至少如果响应是由PHP处理的，如果你选中了这两个框，你的POST数据将显示:

$myfruit[0] == 'apple' && $myfruit[1] == 'orange'

我不知道这种数组构造是否会发生在其他服务器端语言中，或者如果name属性的值只被视为字符串，并且它是PHP语法的侥幸，基于0的数组根据POST响应中的数据顺序构建，这只是:

myfruit[]       apple
myfruit[]       orange

对身份证可不能耍这种把戏。在HTML中的id属性的有效值是什么?似乎引用了HTML 4的规范(尽管他们没有给出引用):

ID和NAME标记必须以字母([a- za -z])开头，并且可以是后面跟着任意数量的字母，数字([0-9])，连字符(“-”)，下划线(“_”),冒号(“:”)和时间(“。”)。

所以字符[和]在HTML4中的id或名称中都是无效的(在HTML5中是可以的)。但与html的许多东西一样，仅仅因为它是无效的并不意味着它不会工作或不是非常有用。

2015-01-10 15:47:31

其他回答

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

<!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'不等于以区分它们。

2014-09-29 14:09:47

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

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

2011-09-19 11:36:27

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

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

2014-06-19 13:20:56

名称定义了表单提交后属性的名称。因此，如果您稍后想要读取此属性，您将在POST或GET请求中的“name”下找到它。

而在JavaScript或CSS中，id用于寻址字段或元素。

2011-09-19 11:36:14

在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是标准的时候写的，许多浏览器和功能都与今天不同。

2011-09-19 11:38:16

HTML输入-名称vs. id

推荐文章

最新文章

标签