HTML DOM Fieldset 表单属性

htmlweb developmentfront end technology更新于 2025/9/24 22:04:17

HTML DOM Fieldset 表单属性返回表单对象类型的表单引用。该属性针对的是给定表单中存在的 <fieldset> 元素。它是一个只读属性。如果表单中不存在指定的 fieldset,则返回 null。

语法

以下是 fieldset 表单属性的语法 −

fieldsetObject.form

示例

让我们来看一个 fieldset 表单属性的示例 −

<!DOCTYPE html>
<html>
<head>
<script>
   function formId() {
      var field = document.getElementById("FieldSet1").form.id;
      document.getElementById("Sample").innerHTML = "The id of the form in which fieldset
      element is present is "+field;
   }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form id="FORM1">
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name:<input type="text"><br>
Address:<input type="text"><br>
Age:<input type="text">
</fieldset>
</form>
<br>
<button onclick="formId()">GET ID</button>
<p id="Sample"></p>
</body>
</html>

输出

这将产生以下输出 −

点击"获取 ID"按钮 −

在上面的例子中 −

我们首先创建了一个 id 为 “FORM1” 的 <form> 元素,该元素包含一个 id 为 “FieldSet1” 的 <fieldset> 元素 −

<form id="FORM1">
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name:<input type="text"><br>
Address:<input type="text"><br>
Age:<input type="text">
</fieldset>
</form>

然后,我们创建了一个按钮 GET ID,当用户点击该按钮时,它将执行 formId() 函数 −

<button onclick="formId()">GET ID</button>

formId() 函数使用 getElementById() 获取 fieldset 元素,然后获取其 form.id 属性,该属性返回指定 fieldset 元素所在的表单 ID。form.id 返回值被赋值给 field 变量。然后,该变量显示在与 ID"Sample"关联的段落中,并使用其 innerHTML 属性赋值所需的文本 −

function formId() {
   var field = document.getElementById("FieldSet1").form.id;
   document.getElementById("Sample").innerHTML = "The id of the form in which fieldset element is    present is "+field;
}

相关文章


有用资源