HTML DOM 입력 버튼 객체

<시간/>

HTML DOM 입력 버튼 개체는 유형 속성이 "버튼"인 입력 HTML 요소 역할을 합니다.

입력 버튼 개체를 만드는 방법을 살펴보겠습니다 -

구문

다음은 구문입니다 -

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

여기에서 값은 "버튼", "제출" 및 "재설정"일 수 있습니다.

속성

다음은 입력 버튼 개체의 속성입니다 -

속성	설명
자동 초점	이 속성은 HTML에서 입력 버튼의 autofocus 속성 값을 반환하고 변경합니다.
기본값	HTML에서 입력 버튼의 기본값을 반환하고 수정합니다.
비활성화	HTML에서 입력 버튼의 disabled 속성 값을 반환하고 변경합니다.
형식	입력 버튼을 둘러싸는 형식의 참조를 반환합니다.
이름	HTML에서 입력 버튼의 name 속성 값을 반환하고 변경합니다.
유형	이 속성은 입력 버튼의 유형, 즉 "버튼" 유형, "제출" 유형 또는 "재설정" 유형인지 여부를 반환합니다.
값	입력 버튼의 값 속성의 내용을 반환하고 수정합니다.

예시

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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 입력 버튼 객체

"나를 복제하려면 클릭" 버튼을 클릭하여 동일한 버튼의 새 복제본을 만듭니다.

HTML DOM 입력 버튼 객체