HTML DOM 字段集 name 属性
htmlweb developmentfront end technology更新于 2024/5/29 9:48:17
HTML DOM 字段集 name 属性用于获取或设置 <fieldset> 元素的 name 属性值。name 属性有助于在表单提交后识别表单数据，或仅用于引用表单元素。
语法
以下是语法 −
设置字段集 name 属性 −
fieldsetObject.name = name
此处，name 指定字段集名称。
示例
让我们看一个关于字段集 name 属性的示例 −
<!DOCTYPE html>
<html>
<head>
<script>
function fieldName() {
var field = document.getElementById("FieldSet1").name;
document.getElementById("Sample").innerHTML = "The fieldset name is "+field;
}
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form id="FORM1">
<fieldset id="FieldSet1" name="FS1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
<br>
<button onclick="fieldName()">GET NAME</button>
<p id="Sample"></p>
</body>
</html>
输出
这将产生以下输出 −
点击"获取名称"按钮 −
在上面的例子中 −
我们首先在表单元素中创建了一个名为"FS1"、ID 为"FieldSet1"的字段集 −
<form id="FORM1"> <fieldset id="FieldSet1" name="FS1"> <legend>User Data:</legend> Name: <input type="text"><br> Address: <input type="text"><br> Age: <input type="text"> </fieldset> </form>
然后，我们创建了一个"获取名称"按钮，当用户点击该按钮时，它将执行 fieldname() 方法 −
<button onclick="fieldName()">GET NAME</button>
fieldname() 方法使用 getElementById() 方法获取 fieldset 元素。然后，它获取其 name 属性值并将其赋值给变量 field。该值随后显示在 id 为"Sample"的段落中，并使用 innerHTML 属性为其赋值文本 −
function fieldName() {
var field = document.getElementById("FieldSet1").name;
document.getElementById("Sample").innerHTML = "The fieldset name is "+field;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
