HTML DOM Input Hidden Object

HTML Web Development Front End Technology

The HTML DOM input hidden object represents the <input> element with type=”hidden” of an HTML document.

Create input hidden object −

Syntax

Following is the syntax −

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

Properties

Following are the properties of HTML DOM input hidden Object −

Property	Explanation
form	It returns the cite of the form that contain the hidden input field.
name	It returns and alter the value of name attribute of hidden input field.
type	It returns the value of type attribute of input field.
defaultValue	It returns the value of type attribute of input field.
defaultValue	It returns and modify the default value of the hidden input field.
value	It returns and modify the value of the value attribute of hidden input field.

Example

Let us see an example of HTML DOM input hidden object −

Live Demo

<!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>