参考资料

1. HTML DOM 节点
2. HTML DOM 返回一个区域的href属性的锚部分实例
3. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
4. HTML DOM 返回加载的文档的服务器域名 实例
5. HTML DOM 返回文档中第一个图像的ID
6. HTML DOM write() 和 writeln()的不同实例
7. HTML DOM 返回一个iframe中的name属性的值
8. HTML DOM 返回页面上所有相对URL的基URL 实例

HTML DOM 返回一个button所属表的ID 实例

HTML DOM 返回 button 所属表的 ID 实例

详细介绍

在 HTML DOM 中，可以通过 button 元素的 form 属性获取它所属的表单元素，然后通过表单的 id 属性获取表单的 ID。

标签

<button> 和 <form>

用法

var formId = document.getElementById("buttonId").form.id;

实例

<form id="myForm">
  <button id="myButton" type="button">点击获取表单ID</button>
</form>

<script>
document.getElementById("myButton").addEventListener("click", function() {
  var formId = this.form.id;
  alert("所属表单ID是: " + formId);
});
</script>

功能

• 获取 button 元素所属表单的 ID

• 可用于表单验证或动态表单操作

• 适用于需要知道按钮所属表单的场景

CSS 扩展

/* 为属于特定表单的按钮添加样式 */
button[form="myForm"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

/* 鼠标悬停效果 */
button[form="myForm"]:hover {
  background-color: #45a049;
}