HTML DOM 입력 이미지 개체

<시간/>

HTML DOM 입력 이미지 개체는 HTML 문서의 요소를 type="image"로 나타냅니다.

입력 이미지 객체를 생성하는 방법을 알아봅시다 -

구문

다음은 구문입니다 -

var imageInput = document.createElement(“INPUT”);
imageInput.setAttribute(“type”,”image”);

속성

다음은 HTML DOM 입력 이미지 Object의 속성입니다 -

속성	설명
Alt	입력 이미지의 alt 속성 값을 반환하고 수정합니다.
자동 초점	브라우저가 HTML 웹 페이지에서 이미지 로드를 완료했는지 여부를 반환합니다.
기본값	입력 이미지의 기본값을 반환하고 수정합니다.
비활성화됨	입력 이미지의 disabled 속성 값을 반환 및 수정합니다.
양식	HTML 문서에서 입력 이미지 필드를 포함하는 양식의 참조를 반환합니다.
formAction	입력 이미지의 formaction 속성 값을 반환하고 수정합니다.
formEnctype	입력 이미지의 formenctype 속성 값을 반환하고 수정합니다.
formMethod	입력 이미지의 formmethod 속성 값을 반환하고 수정합니다.
formNoValidate	양식의 데이터를 제출할 때 유효성을 검사해야 하는지 여부를 반환하고 수정합니다.
formTarget	입력 이미지의 formtarget 속성 값을 반환하고 변경합니다.
높이	입력 이미지의 height 속성 값을 반환하고 수정합니다.
이름	입력 이미지의 name 속성 값을 반환하고 변경합니다.
Src	입력 이미지의 src 속성 값을 반환하고 수정합니다.
유형	입력 이미지의 type 속성 값을 반환합니다.
값	입력 이미지의 value 속성 내용을 반환 및 수정합니다.
너비	입력 이미지의 너비 속성 값을 반환하고 수정합니다.

예시

입력 이미지 객체의 예를 보자 -

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }
   .btn{
      background-color:#db133a;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM Input Image Object Example</h1>
<button onclick="createIframe()" class="btn">Create an image submit button</button>
<script>
   function createIframe() {
      var imageInput = document.createElement("INPUT");
      imageInput.setAttribute("type", "image");
      imageInput.setAttribute("src", "https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg");
      document.body.appendChild(imageInput);
   }
</script>
</body>
</html>

출력

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

HTML DOM 입력 이미지 개체

"이미지 제출 버튼 만들기를 클릭합니다. ” 버튼을 눌러 입력 이미지 객체 생성 -

HTML DOM 입력 이미지 개체