HTML DOM의 input FileUpload type 속성은 HTML 문서 내 <input> 요소의 type 속성값을 반환하는 기능입니다. 파일 업로드 버튼이 어떤 입력 유형으로 설정되어 있는지 자바스크립트로 확인할 수 있어, 동적인 폼 검증이나 UI 제어에 유용하게 활용됩니다.
문법(Syntax)
type 속성의 기본 사용 문법은 다음과 같습니다.
object.type
예제(Example)
HTML DOM input FileUpload type 속성의 실제 동작을 살펴보겠습니다. 아래 예제에서는 버튼을 클릭하면 파일 업로드 입력 요소의 type 속성값이 화면에 출력됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#52B2CF;
color:#fff;
}
.btn{
background-color:coral;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
display:block;
color:#fff;
outline:none;
}
.show{
font-size:2rem;
color:#fff;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM fileupload type property example</h1>
<input type = "file" class = "file-upload-btn">
<button onclick="getType()" class="btn">Click me to get value of type
property</button>
<div class="show"></div>
<script>
function getType() {
var fileBtn = document.querySelector(".file-upload-btn");
document.querySelector('.show').innerHTML = fileBtn.type;
}
</script>
</body>
</html>코드 설명
위 코드에서는 document.querySelector() 메서드로 클래스명이 'file-upload-btn'인 파일 업로드 요소를 선택하고, 버튼 클릭 시 해당 요소의 type 속성값을 읽어와 '.show' 영역에 출력하도록 구현했습니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
이제 주황색(orange) 버튼을 클릭해 보세요. 파일 업로드 버튼의 type 속성값인 'file'이 화면에 표시됩니다.
정리
input FileUpload의 type 속성은 읽기 전용으로 동작하며, 모든 주요 브라우저에서 지원됩니다. 파일 업로드뿐 아니라 text, checkbox 등 다양한 input 요소의 유형을 프로그래밍 방식으로 판별할 때 활용할 수 있습니다.