HTML DOM 입력 숨겨진 개체

<시간/>

HTML DOM 입력 숨김 개체는 HTML 문서의 type="hidden"인 요소를 나타냅니다.

입력 숨김 개체 만들기 -

구문

다음은 구문입니다 -

var hiddenInput = document.createElement(“INPUT”);
hiddenInput.setAttribute(“type”,”hidden”);

속성

다음은 HTML DOM 입력 hidden Object의 속성입니다 -

속성	설명
형식	숨겨진 입력 필드가 포함된 양식의 인용을 반환합니다.
이름	숨겨진 입력 필드의 name 속성 값을 반환하고 변경합니다.
유형	입력 필드의 type 속성 값을 반환합니다.
기본값	입력 필드의 type 속성 값을 반환합니다.
기본값	숨겨진 입력 필드의 기본값을 반환하고 수정합니다.
값	숨겨진 입력 필드의 값 속성 값을 반환하고 수정합니다.

예시

HTML DOM 입력 숨김 개체의 예를 살펴보겠습니다 -

<!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>
   function showHide() {
      var inputField = document.querySelector(".input-field");
      if(inputField.type === 'text'){
         inputField.type='hidden';
      } else {
         inputField.type='text';
      }
   }
</script>
</body>
</html>

출력

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

HTML DOM 입력 숨겨진 개체

"입력 필드를 표시하거나 숨기려면 클릭을 클릭하십시오. ” 버튼을 눌러 입력 필드를 숨깁니다 -

HTML DOM 입력 숨겨진 개체