개요
HTML DOM의 input hidden type 속성은 입력 필드(input)의 type 속성값을 문자열 형태로 반환합니다. 숨김(hidden) 타입의 입력 필드는 화면에는 보이지 않지만, 폼(form) 제출 시 사용자가 볼 수 없는 데이터를 서버로 전달할 때 유용하게 활용됩니다.
문법(Syntax)
다음은 type 속성의 기본 문법입니다.
object.type
반환값
이 속성은 해당 입력 필드의 type 속성값을 나타내는 문자열을 반환합니다. 예를 들어 <input type="hidden"> 요소에 접근하면 "hidden"이라는 문자열이 반환됩니다.
예제(Example)
다음은 HTML DOM input hidden type 속성의 실제 사용 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#F19A3E;
color:#fff;
}
.btn{
background-color:#3C787E;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
display:block;
color:#fff;
outline:none;
}
.show{
color:#fff;
font-size:1.2rem;
font-weight:600;
}
</style>
</head>
<body>
<h1>DOM Hidden type Property Demo</h1>
Enter your Name:<input type="hidden" class="input-field">
<button onclick="getType()" class="btn">Click to get above input type</button>
<div class="show"></div>
<script>
function getType() {
var inputField = document.querySelector(".input-field");
var msgDiv = document.querySelector(".show");
msgDiv.innerHTML = "type = " + inputField.type;
}
</script>
</body>
</html>코드 설명
위 예제에서는 document.querySelector() 메서드를 사용해 클래스명이 "input-field"인 숨김 입력 필드를 선택합니다. 버튼을 클릭하면 getType() 함수가 실행되어 해당 입력 필드의 type 속성값을 읽어온 뒤, 결과 영역(.show)에 출력합니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
화면의 "Click to get above input type" 버튼을 클릭하면 숨김 입력 필드의 type 속성값이 아래와 같이 표시됩니다.
정리
HTML DOM의 type 속성은 모든 input 요소에서 공통으로 지원되며, 자바스크립트만으로 특정 입력 필드가 어떤 타입인지 동적으로 확인해야 할 때 매우 유용합니다. 특히 숨김 필드처럼 화면에 드러나지 않는 요소의 속성을 검증할 때 활용도가 높습니다.