参考资料

  1. HTML DOM 鼠标的坐标?
  2. HTML DOM 用指定的Name弹出元素的数量实例
  3. HTML DOM 提交表单
  4. HTML DOM一个行的innerHTML
  5. HTML DOM 返回image的name
  6. HTML DOM添加表格中的行
  7. HTML DOM document.write() 方法
  8. HTML DOM 返回一个锚的名字 实例

HTML DOM 表单 name 属性

简介

name 属性用于标识表单元素,在表单提交时作为数据字段名。

标签

适用于所有表单元素:

  • <form>

  • <input>

  • <textarea>

  • <select>

  • <button>

用法

<input type="text" name="username">

实例

<form name="myForm">
  <input type="text" name="email">
  <input type="submit">
</form>

<script>
  // 通过name访问表单
  const form = document.forms["myForm"];
  
  // 通过name访问表单元素
  const emailInput = form.elements["email"];
</script>

功能

  1. 表单提交时标识数据字段

  2. 通过DOM访问表单元素

  3. 用于表单验证

  4. 作为JavaScript引用元素的标识符

CSS扩展

可以通过属性选择器选择具有特定name的表单元素:

input[name="email"] {
  border: 1px solid blue;
}

form[name="myForm"] {
  background-color: #f0f0f0;
}

注意事项

  • name属性在表单提交时是必须的(除非使用FormData API)

  • 同一表单内的name值应该唯一

  • name属性区分大小写