HTML DOM Input FileUpload form Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM input FileUpload form property returns the reference of the form which enclose the file upload input button.

Syntax

Following is the syntax −

object.form

Example

Let us see an example of input FileUpload form property −

 Live Demo

<!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>
<input type="file" class="fileUploadBtn">
</fieldset>
</form>
<button onclick="identify()">Identify File Upload button Form</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".fileUploadBtn").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Identify File Upload Button Form” button to identify the form which contain the file upload button.

raja
Published on 17-Jul-2019 13:57:22
Advertisements