Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Input Hidden form Property


The HTML DOM input hidden form property returns the reference of the form that contain the hidden input field in the HTML document.

Syntax

Following is the syntax −

object.form

Example

Let us see an example of HTML DOM input hidden form property −

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }
   form{
      margin:2.5rem auto;
   }
   button{
      background-color:#db133a;
      border:none;
      cursor:pointer;
      padding:8px 16px;
      color:#fff;
      border-radius:5px;
      font-size:1.05rem;
   }
   .show{
      font-weight:bold;
      font-size:1.4rem;
   }
</style>
</head>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<fieldset>
   <legend>Form 1</legend>
   Here is hidden input field: <input type="hidden" class="hiddenField">
</fieldset>
</form>
<button onclick="identify()">Identify Hidden Input Field</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".hiddenField").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Input Hidden form Property

Click on “Identify Hidden Input Field” button to identify the form which contain the hidden input field.

HTML DOM Input Hidden form Property