HTML DOM의 입력 이미지 객체(Input Image Object)는 HTML 문서에서 type="image" 속성을 가진 <input> 요소를 나타냅니다. 이 요소는 일반 텍스트 버튼 대신 이미지 형태의 제출(submit) 버튼을 만들 때 사용됩니다.
입력 이미지 객체 생성 방법
자바스크립트로 입력 이미지 객체를 생성하는 기본 문법은 다음과 같습니다.
var imageInput = document.createElement("INPUT");
imageInput.setAttribute("type", "image");주요 속성(Properties)
HTML DOM 입력 이미지 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| alt | 입력 이미지의 alt 속성 값을 가져오거나 수정합니다. |
| autofocus | 페이지 로드 시 해당 이미지 입력 필드에 자동으로 포커스가 설정되는지 여부를 반환합니다. |
| defaultValue | 입력 이미지의 기본값을 가져오거나 수정합니다. |
| disabled | 입력 이미지의 disabled 속성 값을 가져오거나 수정하여 비활성화 여부를 제어합니다. |
| form | 해당 입력 이미지 필드가 포함된 폼(form)의 참조를 반환합니다. |
| formAction | formaction 속성 값을 가져오거나 수정합니다. |
| formEnctype | formenctype 속성 값을 가져오거나 수정합니다. |
| formMethod | formmethod 속성 값을 가져오거나 수정합니다. |
| formNoValidate | 폼 제출 시 데이터 유효성 검사를 수행할지 여부를 가져오거나 수정합니다. |
| formTarget | formtarget 속성 값을 가져오거나 수정합니다. |
| height | 입력 이미지의 height 속성 값을 가져오거나 수정합니다. |
| name | 입력 이미지의 name 속성 값을 가져오거나 수정합니다. |
| src | 입력 이미지의 src 속성 값(이미지 경로)을 가져오거나 수정합니다. |
| type | 입력 이미지의 type 속성 값을 반환합니다. |
| value | 입력 이미지의 value 속성 내용을 가져오거나 수정합니다. |
| width | 입력 이미지의 width 속성 값을 가져오거나 수정합니다. |
예제 코드
다음은 입력 이미지 객체를 동적으로 생성하는 실제 예제입니다.
<!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>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
Create an image submit button 버튼을 클릭하면 입력 이미지 객체가 동적으로 생성되어 화면에 표시됩니다.
