HTML DOM Input Hidden Object


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>

Output

This will produce the following output −

Click on “Click to show/hide input field” button to hide the input field −

raja
Published on 17-Jul-2019 11:05:59
Advertisements