HTML | name 属性

name 属性是 HTML 元素中的一个标准属性，用于定义元素的名称。这个属性通常与表单元素一起使用。

语法

name 属性的语法如下：

<element name="name_value">

其中，name_value 是你要给元素定义的名称。

用途

name 属性通常在表单元素中使用，用于将提交的表单数据关联到一个标识符，以在后续处理过程中区分不同的输入数据。

以下是一些常用的表单元素，可以使用 name 属性：

• <input> 元素，用于创建输入框、单选按钮、复选按钮等。
• <select> 元素，用于创建下拉列表框。
• <textarea> 元素，用于创建多行文本输入框。
• <button> 元素，用于创建按钮。

示例

以下示例演示了如何使用 name 属性创建一个简单的表单，并使用 JavaScript 捕获提交事件并打印表单数据：

<form onsubmit="return false;">
  <label>Name:</label>
  <input type="text" name="name_input"><br>
  <label>Email:</label>
  <input type="email" name="email_input"><br>
  <button type="submit" onclick="submitForm()">Submit</button>
</form>

<script>
function submitForm() {
  const form = document.querySelector('form');
  const formData = new FormData(form);
  console.log(formData.get('name_input'));
  console.log(formData.get('email_input'));
}
</script>

在上面的示例中，我们创建了一个包含两个输入框和一个提交按钮的表单。输入框都具有各自的 name 属性。当提交按钮被点击时，JavaScript 捕获表单提交事件并使用 FormData API 获取表单数据。最后，我们打印了表单数据中 name_input 和 email_input 的值。

结论

name 属性是一个非常有用的属性，用于将输入元素中的数据关联到一个标识符。无论您是在处理表单数据还是使用 JavaScript 操作表单元素，都可以使用 name 属性轻松识别和访问输入数据。