HTML DOM 输入按钮对象

htmlweb developmentfront end technology更新于 2026/2/5 10:52:17

HTML DOM 输入按钮对象用作输入 HTML 元素，其 type 属性为"button"。

让我们看看如何创建输入按钮对象 −

语法

以下是语法 −

var newButton = document.createElement(“INPUT”);
newButton.setAttribute(“type”,”value”);

此处，value 可以是 “button”、“submit” 和 “reset”。

属性

以下是输入按钮对象的属性 −

属性	说明
autofocus	此属性返回并修改 HTML 中输入按钮的 autofocus 属性值。
defaultValue	它返回并修改 HTML 中输入按钮的默认值。
disabled	它返回并修改 HTML 中输入按钮的 disabled 属性值。
form	它返回包含输入按钮的表单的引用。
name	它返回并修改 name 的值HTML 中输入按钮的属性。
type	此属性返回输入按钮的类型，即它是"按钮"类型、"提交"类型还是"重置"类型。
value	它返回并修改输入按钮的 value 属性的内容。

示例

让我们看一个 DOM 输入按钮对象的示例 −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Input Button Object</title>
<style>
   body{
      text-align:center;
   }
   .btn{
      display:block;
      margin:1rem auto;
      background-color:#db133a;
      color:#fff;
      border:1px solid #db133a;
      padding:0.5rem;
      border-radius:50px;
      width:60%;
      font-weight:bold;
   }
   .show-msg{
      font-weight:bold;
      font-size:1.4rem;
      color:#ffc107;
   }
</style>
</head>
<body>
<h1>Input Button Object Example</h1>
<input type="button" onclick="createReplica()" class="btn" value="Click to replicate
me">
<div class="show-msg"></div>
<script>
   function createReplica() {
      var newButton = document.createElement("INPUT");
      newButton.setAttribute("type","button");
      newButton.setAttribute("class","btn");
      newButton.setAttribute("value","Click to replicate me");
      newButton.setAttribute("onclick","createReplica()");
      document.body.appendChild(newButton);
   }
</script>
</body>
</html>