html 中真的需要 name 属性吗？ [关闭]

Question

如果 HTML 表单中 name 属性的目的只是引用 input 等元素，为什么我们不能简单地使用 id 或 class 属性？创建名称属性背后是否有一些不那么明显的原因。

.....html
 Name: <input type="text" name="fullname"><br>
.....

Answer 1

name、id 和 class 具有根本不同的目的。

• name 用于表单元素名称，不需要唯一（事实上，有时您需要重用相同的name）。
• id 顾名思义，是元素的标识符，在整个文档中必须是唯一的。
• class 主要用于展示（尽管它有时也用于连接客户端 UI）并且包含元素的类的 list，而不仅仅是单个类。如果您使用class 来识别表单字段，您会使用可能的几个类中的哪一个？

您可以在多个字段上使用相同的name 的方式：

1. 您可以以不同的形式使用相同的name，而不会产生任何冲突。

2. 您在表单中使用相同的name 来表示应该组合在一起的单选按钮。

3. 您可以在表单中为多种其他类型的元素使用相同的name，这些元素的值应全部发送到服务器。

相比之下，id 必须是唯一的 - 不仅在表单中，而且在整个文档中。

#3 可能需要一个例子来说明清楚。假设你有：

<form action="example" method="get">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="submit" value="Send">
</form>

如果用户在这三个文本字段中填写a、b和c并发送表单，这就是查询字符串：

?foo=a&foo=b&foo=c

注意foo 被重复了。接收资源可以访问所有这三个值。 （也许您正在列出帖子的标签，或者您所有孩子的名字，或者......）

Answer 2

name和id有一些区别

name不能应用于每个元素，id可以

id 是唯一的，可以应用于每个存在的 dom 元素，并且只能为以下元素设置名称：<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>

id 应该是唯一的，name 不是

id 应该是唯一的，因为函数document.getElementById(id) 只会检索一个元素。 document.getElementsByName(name); 函数将检索所有具有给定名称的 dom 元素

在一个表单dom元素中，元素的名字被添加到发送给浏览器的数据中，id没有

每个有名字的输入 dom 元素，如果他在一个表单元素里面，在表单提交中会将所有输入的值发送到服务器。你可以在here查看这个。

Answer 3

@MisterJojo 有什么例子吗？ - 德斯基雷伊

示例 1：

const MyForm = document.getElementById('my-form')

MyForm.onsubmit = e=>{
  e.preventDefault()

  console.log( MyForm.username.value )  // direct access to value with name
}

<form id="my-form">
  <input type="text" name="username">

  <button type="submit">submit</button>
</form>

示例 2：

const MyForm = document.getElementById('my-form')

MyForm.onsubmit = e=>{
  e.preventDefault()

  console.clear()
  console.log( MyForm.RadioABC.value )  // direct access to value with name
}

<form id="my-form">

A: <input type="radio" name="RadioABC" value="A" checked >
B: <input type="radio" name="RadioABC" value="B">
C: <input type="radio" name="RadioABC" value="C">

  <button type="submit">submit</button>
</form>

想要更多？