参考资料

1. HTML DOM对单个单元格的内容水平对齐
2. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
3. HTML DOM将下拉列表变成多行列表
4. HTML DOM 对iframe排版
5. HTML DOM 返回图像映射的某个区域的shape 实例
6. HTML DOM document.write() 方法
7. HTML DOM 返回文档的标题实例
8. HTML DOM获得下拉列表的选项数量

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;
}