HTML DOM 按钮 type 属性
htmlweb developmentfront end technology更新于 2025/9/23 0:44:17
HTML DOM 按钮 type 属性与 HTML <button> 元素关联。按钮元素默认 type=”submit”，即点击表单上的任何按钮都将提交表单。按钮 type 属性设置或返回按钮的类型。
语法
以下是语法 −
设置按钮 type 属性 −
buttonObject.type = "submit|button|reset"
此处，submit|button|reset 是按钮 type 值。默认设置为"提交"。
- 提交 − 使按钮成为提交按钮。
- 按钮 − 使按钮成为普通的可点击按钮。
- 重置 − 使按钮重置表单数据。
示例
让我们看一个 HTML DOM 按钮类型属性的示例 −
<!DOCTYPE html>
<html>
<body>
<form id="Form1" action="/sample.php">
<label>First Name: <input type="text" name="fname"><br><br></label>
<label>Surname: <input type="text" name="lname"><br><br></label>
<button id="Button1" type="submit">Submit</button>
</form>
<p>Click the below button below to change the type of the above button from "submit" to "reset".</p>
<button onclick="changeType()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset
button";
}
</script>
</body>
</html>
输出
这将产生以下输出 −
填写详细信息并点击"更改" −
现在点击"提交"(现已重置) −
在上面的例子中 −
我们首先创建了两个文本字段和一个类型为 “submit” 的按钮，用于提交我们的数据 −
<label>名字:<input type="text" name="fname><br><br></label> <label>姓氏:<input type="text" name="lname><br><br></label> <button id="Button1" type="submit>提交</button>
然后，我们创建了"更改"按钮，该按钮将在点击时执行 changeType() 方法 −
<button onclick="changeType()">CHANGE</button>
changeType() 方法通过其 ID 获取按钮元素，并将其类型设置为"重置"。然后，有关更改的消息将反映在带有"ID"示例的段落中。现在，当您点击"提交"按钮时，它将重置，即清除表单数据而不是提交 −
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset button";
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
