HTML DOM의 입력 숨김(Input Hidden) 객체는 HTML 문서에서 type="hidden"으로 지정된 <input> 요소를 나타냅니다. 숨김 입력 필드는 화면에는 전혀 표시되지 않지만, 폼을 제출할 때 사용자에게 보여주고 싶지 않은 데이터를 함께 전송해야 하는 경우에 매우 유용하게 활용됩니다.
입력 숨김 객체 생성하기
JavaScript로 입력 숨김 객체를 동적으로 생성하는 기본 구문은 다음과 같습니다.
var hiddenInput = document.createElement("INPUT");
hiddenInput.setAttribute("type", "hidden");
입력 숨김 객체의 주요 속성
HTML DOM 입력 숨김 객체에서 활용할 수 있는 주요 속성은 아래 표와 같습니다.
| 속성 | 설명 |
|---|---|
| form | 숨김 입력 필드가 포함된 폼(form)에 대한 참조를 반환합니다. |
| name | 숨김 입력 필드의 name 속성 값을 반환하거나 변경합니다. |
| type | 입력 필드의 type 속성 값을 반환합니다. |
| defaultValue | 숨김 입력 필드의 기본값(default value)을 반환하거나 수정합니다. |
| value | 숨김 입력 필드의 value 속성 값을 반환하거나 수정합니다. |
예제 코드
아래 예제는 버튼을 클릭할 때마다 입력 필드의 타입을 text와 hidden 사이에서 전환하여, 입력 필드를 화면에 보여주거나 숨기는 동작을 구현한 것입니다.
<!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;
}
input{
border:1px solid #fff;
background-color:transparent;
color:#fff;
padding:8px;
outline:none;
}
input::placeholder{
color:#fff;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Input Hidden Object Example</h1>
<input type="text" placeholder="Enter your name" class="input-field">
<button onclick="showHide()" class="btn">Click to show/hide input field</button>
<script>
// 클릭 시 입력 필드의 타입을 text ↔ hidden 으로 전환
function showHide() {
var inputField = document.querySelector(".input-field");
if(inputField.type === 'text'){
inputField.type='hidden'; // 필드 숨기기
} else {
inputField.type='text'; // 필드 다시 표시
}
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
"Click to show/hide input field" 버튼을 클릭하면 입력 필드가 화면에서 숨겨집니다.
